/**
 * Main-меню каталога (Пряжа / Спицы / …) — TSK25.
 * Внешний .content = сетка шапки; зелёная плашка = внутренняя колонка
 * (левый край = логотип, padding 20px), без «двойного» сужения max-width.
 */
.sk-main-nav-c25 {
    --c25-brand: #497952; /* ОФЗ */
    --c25-brand-dark: #127023; /* ФТЗ */
    --c25-brand-mid: #5f9a69;
    --c25-brand-soft: #e8efe6; /* ФСЗ */
    --sk-nav-inset: 20px; /* = .content padding — край логотипа/контента */
    z-index: 20;
    /* Только вертикаль — горизонталь даёт внутренняя .content */
    padding: 8px 0 10px !important;
    background: transparent !important;
    box-sizing: border-box;
    min-height: 0;
}

/* Sticky-клон #scroll_art — по умолчанию скрыт, JS fadeIn по скроллу */
#scroll_art.sk-main-nav-c25 {
    display: none;
    z-index: 1000;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 16px rgba(73, 121, 82, 0.12);
}

/*
 * Птичка sticky — герой: крупнее, отступ слева, круг ФТЗ, лёгкий «полёт».
 * !important: перебиваем #scroll_art .footer__logo { float; background logo_scroll7 }.
 */
#scroll_art.sk-main-nav-c25 > .content {
    flex-wrap: nowrap !important;
    column-gap: 14px;
    align-items: center !important;
    /* симметрия: птичка слева / женщина справа */
    padding-left: 28px !important;
    padding-right: 28px !important;
}

@keyframes sk-sticky-bird-fly {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.35),
            0 4px 14px rgba(18, 112, 35, 0.4);
    }
    40% {
        transform: translateY(-5px) scale(1.06);
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.45),
            0 8px 18px rgba(18, 112, 35, 0.45);
    }
    70% {
        transform: translateY(-2px) scale(1.02);
    }
}

/* Hover: +50% (scale 1.5), пульс «летит» чуть сильнее */
@keyframes sk-sticky-bird-fly-hover {
    0%, 100% {
        transform: translateY(0) scale(1.5);
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.5),
            0 8px 22px rgba(18, 112, 35, 0.5);
    }
    40% {
        transform: translateY(-7px) scale(1.58);
        box-shadow:
            0 0 0 6px rgba(255, 255, 255, 0.55),
            0 12px 28px rgba(18, 112, 35, 0.55);
    }
    70% {
        transform: translateY(-3px) scale(1.52);
    }
}

@keyframes sk-sticky-bird-wing {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-4deg); }
}

/* Не обрезать увеличенную птичку на hover */
#scroll_art.sk-main-nav-c25,
#scroll_art.sk-main-nav-c25 > .content {
    overflow: visible !important;
}

/* Человечек — зеркально птичке: правый край плашки */
#scroll_art.sk-main-nav-c25 .sk-sticky-person-wrap {
    position: relative !important;
    z-index: 6 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 8px 0 auto !important; /* вправо, симметрия птичке слева */
    overflow: visible !important;
    order: 3;
}

#scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird,
#scroll_art.sk-main-nav-c25 a.sk-sticky-bird {
    order: 1;
}

#scroll_art.sk-main-nav-c25 .sk-sticky-burger {
    order: 2;
    display: none; /* desktop: пункты видны */
}

#scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

#scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel .nav,
#scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel .nav.spacer {
    order: unset;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

#scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird,
#scroll_art.sk-main-nav-c25 a.sk-sticky-bird,
#scroll_art.sk-main-nav-c25 a.sk-sticky-person {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 68px !important;
    flex-shrink: 0 !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    margin: 0 8px 0 8px !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    /* Круг ФТЗ */
    background: var(--c25-brand-dark, #127023) !important;
    background-image: none !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.35),
        0 4px 14px rgba(18, 112, 35, 0.4) !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    animation: sk-sticky-bird-fly 2.8s ease-in-out infinite;
    transition: box-shadow 0.28s ease, filter 0.28s ease;
    will-change: transform;
    transform-origin: center center;
    cursor: pointer;
}

#scroll_art.sk-main-nav-c25 a.sk-sticky-person {
    margin: 0 !important;
    animation-delay: 0.35s;
}

#scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird:hover,
#scroll_art.sk-main-nav-c25 a.sk-sticky-bird:hover,
#scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird:focus-visible,
#scroll_art.sk-main-nav-c25 a.sk-sticky-bird:focus-visible,
#scroll_art.sk-main-nav-c25 a.sk-sticky-person:hover,
#scroll_art.sk-main-nav-c25 a.sk-sticky-person:focus-visible {
    z-index: 80 !important;
    animation: sk-sticky-bird-fly-hover 2.4s ease-in-out infinite !important;
    filter: drop-shadow(0 6px 16px rgba(18, 112, 35, 0.45));
}

#scroll_art.sk-main-nav-c25 .sk-sticky-bird__img,
#scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird img {
    display: block !important;
    width: 48px !important;
    height: 58px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 6 !important;
    animation: sk-sticky-bird-wing 1.4s ease-in-out infinite;
    will-change: transform;
}

/* Белый женский силуэт (PNG) на круге ФТЗ — как птичка */
#scroll_art.sk-main-nav-c25 .sk-sticky-person__img,
#scroll_art.sk-main-nav-c25 a.sk-sticky-person img.sk-sticky-person__img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: center 58% !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 6 !important;
    animation: sk-sticky-bird-wing 1.4s ease-in-out infinite;
    animation-delay: 0.2s;
    will-change: transform;
    flex-shrink: 0;
}

#scroll_art.sk-main-nav-c25 .sk-sticky-person__drop {
    z-index: 120 !important;
}

#scroll_art.sk-main-nav-c25 .nav,
#scroll_art.sk-main-nav-c25 .nav.spacer {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Sticky на mobile: скрыт до скролла; категории только через бургер */
@media (max-width: 768px) {
    #scroll_art.sk-main-nav-c25 {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        min-height: 52px;
        opacity: 0;
    }

    #scroll_art.sk-main-nav-c25[style*="display: block"],
    #scroll_art.sk-main-nav-c25[style*="display:block"],
    #scroll_art.sk-main-nav-c25[style*="display: flex"],
    #scroll_art.sk-main-nav-c25[style*="display:flex"] {
        display: flex !important;
        opacity: 1 !important;
        align-items: center !important;
    }

    #scroll_art.sk-main-nav-c25 > .content {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    #scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird,
    #scroll_art.sk-main-nav-c25 a.sk-sticky-bird,
    #scroll_art.sk-main-nav-c25 a.sk-sticky-person {
        flex-basis: 58px !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        margin: 0 6px 0 6px !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-person-wrap {
        margin: 0 !important;
    }

    #scroll_art.sk-main-nav-c25 a.sk-sticky-person {
        margin: 0 !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-bird__img,
    #scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird img {
        width: 44px !important;
        height: 52px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-person__img,
    #scroll_art.sk-main-nav-c25 a.sk-sticky-person img.sk-sticky-person__img {
        width: 36px !important;
        height: 36px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 40px !important;
        filter: none !important;
    }

    /* Sticky mobile: полная ширина viewport, плашка с inset 20px как у лого */
    #scroll_art.sk-main-nav-c25 {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    #scroll_art.sk-main-nav-c25 > .content.sk-sticky-shell {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        position: relative;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding-left: var(--sk-nav-inset) !important;
        padding-right: var(--sk-nav-inset) !important;
        column-gap: 8px;
    }

    /* Плашка sticky — на всю ширину внутри padding (не узкая коробочка) */
    #scroll_art.sk-main-nav-c25 > .content.sk-sticky-shell::before,
    #scroll_art.sk-main-nav-c25 > .content.sk-sticky-shell::after {
        left: var(--sk-nav-inset) !important;
        right: var(--sk-nav-inset) !important;
        border-radius: 14px;
    }

    #scroll_art.sk-main-nav-c25 .footer__logo.sk-sticky-bird,
    #scroll_art.sk-main-nav-c25 a.sk-sticky-bird {
        grid-column: 1;
        justify-self: start;
        order: unset !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-person-wrap {
        grid-column: 3;
        justify-self: end;
        order: unset !important;
        margin: 0 !important;
    }

    /* Сэндвич по центру полосы, без слова «Меню» */
    #scroll_art.sk-main-nav-c25 .sk-sticky-burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        justify-self: center;
        order: unset !important;
        flex: 0 0 auto;
        margin: 0 !important;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 40px;
        padding: 0;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.65);
        background: rgba(255, 255, 255, 0.14);
        background-size: auto;
        animation: none;
        box-sizing: border-box;
        z-index: 6;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-burger .ttl {
        display: none !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-burger span {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        background: #fff;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-burger.active {
        background: rgba(255, 255, 255, 0.95);
        border-color: #fff;
        animation: none;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-burger.active span,
    #scroll_art.sk-main-nav-c25 .sk-sticky-burger.active span:before,
    #scroll_art.sk-main-nav-c25 .sk-sticky-burger.active span:after {
        background: var(--c25-brand-dark);
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel {
        display: none !important; /* не плавать поверх контента */
        position: absolute;
        top: calc(100% + 6px);
        left: var(--sk-nav-inset);
        right: var(--sk-nav-inset);
        z-index: 30;
        flex: none;
        order: 4;
        padding: 10px 14px;
        border-radius: 14px;
        box-sizing: border-box;
        overflow: hidden;
        background: transparent;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 14px;
        background: linear-gradient(
            115deg,
            var(--c25-brand-dark) 0%,
            var(--c25-brand) 18%,
            var(--c25-brand-mid) 36%,
            #9ab894 50%,
            var(--c25-brand-mid) 64%,
            var(--c25-brand) 82%,
            var(--c25-brand-dark) 100%
        );
        background-size: 280% 100%;
        animation: sk-main-nav-shimmer 7.5s ease-in-out infinite;
        box-shadow: 0 8px 22px rgba(73, 121, 82, 0.22);
    }

    #scroll_art.sk-main-nav-c25.is-nav-open .sk-sticky-nav-panel {
        display: block !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel .nav,
    #scroll_art.sk-main-nav-c25 .sk-sticky-nav-panel .nav.spacer {
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

}

/*
 * Оболочка = тот же бокс, что header.content (content-box + max-width 90%).
 * Зелёный фон НЕ на оболочке — иначе скругление «съедает» край относительно логотипа.
 */
.sk-main-nav-c25 > .content {
    position: relative;
    width: 100%;
    box-sizing: content-box !important; /* перебиваем .nav-bar > .content { border-box } */
    overflow: visible;
    display: flex;
    align-items: center;
    /* горизонт как у глобального .content; вертикаль — зазор плашки */
    padding-top: 4px;
    padding-bottom: 4px;
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;
}

/* Плашка строго по сетке логотипа/текста (inset = padding .content) */
.sk-main-nav-c25 > .content::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--sk-nav-inset);
    right: var(--sk-nav-inset);
    z-index: 0;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 8px 22px rgba(73, 121, 82, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
    background: linear-gradient(
        115deg,
        var(--c25-brand-dark) 0%,
        var(--c25-brand) 18%,
        var(--c25-brand-mid) 36%,
        #9ab894 50%,
        var(--c25-brand-mid) 64%,
        var(--c25-brand) 82%,
        var(--c25-brand-dark) 100%
    );
    background-size: 280% 100%;
    animation: sk-main-nav-shimmer 7.5s ease-in-out infinite;
}

@keyframes sk-main-nav-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Блик shimmer поверх плашки */
.sk-main-nav-c25 > .content::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--sk-nav-inset);
    right: var(--sk-nav-inset);
    border-radius: 18px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 62%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: sk-main-nav-blink 3.6s ease-in-out infinite;
}

@keyframes sk-main-nav-blink {
    0% { background-position: 120% 0; opacity: 0.35; }
    40% { opacity: 0.85; }
    100% { background-position: -40% 0; opacity: 0.35; }
}

.sk-main-nav-c25 .nav,
.sk-main-nav-c25 .nav.spacer {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
}

.sk-main-nav-c25 .nav__link {
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 12px;
    padding: 12px 10px;
    min-height: 44px;
    transition: background 0.15s ease, color 0.15s ease;
}

.sk-main-nav-c25 .nav__link:hover,
.sk-main-nav-c25 .nav__link:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #fff !important;
    text-decoration: none !important;
}

.sk-main-nav-c25 .nav__item[style*="underline"] > .nav__link,
.sk-main-nav-c25 .nav__item.is-active > .nav__link {
    background: rgba(255, 255, 255, 0.92);
    color: var(--c25-brand-dark) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sk-main-nav-c25 .main-nav a.main-nav__link {
    color: #fff !important;
}

.sk-main-nav-c25 .main-nav a.main-nav__link:hover,
.sk-main-nav-c25 .main-nav a.main-nav__link:focus,
.sk-main-nav-c25 .main-nav a.main-nav__link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none !important;
    border-radius: 10px;
}

@media (max-width: 768px) {
    /* media.css: .nav-bar { padding: 10px } — сбрасываем боковые */
    .nav-bar.sk-main-nav-c25 {
        padding: 6px 0 8px !important;
    }

    /*
     * Main-меню (не sticky): категории спрятаны, виден только бургер.
     * !important — перебиваем .sk-main-nav-c25 > .content { display:flex }.
     */
    .sk-main-nav-c25:not(#scroll_art) > .content.nav-bar__toggle {
        display: none !important;
    }

    .sk-main-nav-c25:not(#scroll_art).is-nav-open > .content.nav-bar__toggle {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    /*
     * Выезжающая панель: не на весь viewport (left:0), а по сетке .content —
     * левый край = логотип (20px).
     */
    .sk-main-nav-c25 > .content.nav-bar__toggle,
    .sk-main-nav-c25 > .nav-bar__toggle {
        left: var(--sk-nav-inset) !important;
        right: var(--sk-nav-inset) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 10px 14px !important;
        border-radius: 14px;
        overflow: hidden;
    }

    .sk-main-nav-c25 > .content.nav-bar__toggle::before,
    .sk-main-nav-c25 > .content.nav-bar__toggle::after,
    .sk-main-nav-c25 > .nav-bar__toggle::before,
    .sk-main-nav-c25 > .nav-bar__toggle::after {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 14px;
    }

    /* Полоса бургера на всю ширину сетки (как лого / padding 20px), не «коробочка» справа */
    .nav-bar.sk-main-nav-c25:not(#scroll_art) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding-left: var(--sk-nav-inset) !important;
        padding-right: var(--sk-nav-inset) !important;
    }

    .sk-main-nav-c25 > .menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 2px 0 !important; /* перебиваем media.css margin-left:auto */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        min-width: 0;
        max-width: none;
        height: 44px;
        padding: 0 !important;
        right: auto !important;
        left: auto !important;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.65);
        background: linear-gradient(
            115deg,
            var(--c25-brand-dark),
            var(--c25-brand),
            var(--c25-brand-mid),
            var(--c25-brand)
        );
        background-size: 220% 100%;
        animation: sk-main-nav-shimmer 7.5s ease-in-out infinite;
        box-sizing: border-box;
    }

    /* Обычный mobile: без «Меню», сэндвич строго по центру полосы */
    .sk-main-nav-c25 > .menu-btn .ttl {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .sk-main-nav-c25 > .menu-btn span {
        display: block !important;
        position: relative !important;
        top: 0 !important; /* иначе style.css top:50% съезжает с flex-center */
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        flex: 0 0 22px;
        background: #fff;
    }

    .sk-main-nav-c25 > .menu-btn.active {
        background: rgba(255, 255, 255, 0.95);
        border-color: #fff;
        animation: none;
    }

    .sk-main-nav-c25 > .menu-btn.active span,
    .sk-main-nav-c25 > .menu-btn.active span:before,
    .sk-main-nav-c25 > .menu-btn.active span:after {
        background: var(--c25-brand-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-main-nav-c25 > .content::before,
    .sk-main-nav-c25 > .content::after,
    .sk-main-nav-c25 > .menu-btn,
    #scroll_art.sk-main-nav-c25 .sk-sticky-bird,
    #scroll_art.sk-main-nav-c25 .sk-sticky-bird__img,
    #scroll_art.sk-main-nav-c25 .sk-sticky-person,
    #scroll_art.sk-main-nav-c25 .sk-sticky-person__img,
    .personal-menu__item--horoscope > a {
        animation: none !important;
    }

    #scroll_art.sk-main-nav-c25 .sk-sticky-bird:hover,
    #scroll_art.sk-main-nav-c25 .sk-sticky-bird:focus-visible,
    #scroll_art.sk-main-nav-c25 .sk-sticky-person:hover,
    #scroll_art.sk-main-nav-c25 .sk-sticky-person:focus-visible {
        transform: scale(1.5) !important;
        transition: transform 0.28s ease !important;
    }

    .sk-main-nav-c25 > .content::before {
        background-position: 40% 50%;
    }

    .sk-main-nav-c25 > .content::after {
        display: none;
    }
}