.nh__cats {
    margin-top: 20px;
    padding: 0 0 20px;
}

.nh__cats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.nh__cats-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nh__cats-row::-webkit-scrollbar {
    display: none;
}

.nh__chip {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    padding: 0 20px;
    border-radius: var(--nh-radius);
    background: var(--nh-chip-bg);
    color: var(--nh-text);
    font-size: 16px;
    white-space: nowrap;
    transition: color 0.15s ease;
    scroll-snap-align: start;

    border: 2px solid var(--nh-chip-bg);
}

.nh__chip:hover {
    border-color: #C4C4C4;
}

.nh__chip:active {
    border-color: #00afff;
}

.nh__chip--accent {
    color: var(--nh-accent);
}

.nh .nh__chip--accent {
    color: #00afff;
    -webkit-text-fill-color: #00afff;
}

.nh__chip--gradient {
    background: var(--nh-chip-bg);
}

.nh__chip--gradient span {
    background: linear-gradient(90deg, #2e46e0 0%, #8b46bf 43%, #f093fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* CUSTOM */
.nh__chip--custom {
    position: relative;
    padding: 16px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.nh__chip--custom {
    background:
        linear-gradient(var(--nh-chip-bg), var(--nh-chip-bg)) padding-box,
        linear-gradient(var(--nh-chip-bg), var(--nh-chip-bg)) border-box;
    transition: 0.3s ease;
}

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

.nh__chip--custom span {
    background: linear-gradient(
        #2E46E0 0%,
        #8B46BF 43%,
        #F093FB 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
} 

/* Градиентная рамка */
.nh__chip--custom::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #3546DE 0%,
        #F093FB 32%,
        #8B46BF 100%
    );

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Внутренняя серая часть — чтобы оставалась только рамка */
.nh__chip--custom::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: calc(5px - 2px);
    background: var(--nh-chip-bg);
}

/* Hover — градиентная рамка */
.nh__chip--custom:hover {
    background:
        linear-gradient(#F5F5F5, #F5F5F5) padding-box,
        linear-gradient(
            #3546DE 0%,
            #F093FB 32%,
            #8B46BF 100%
        ) border-box;
}

.nh__chip--custom:hover::before {
    opacity: 1;
}

/* Active — весь блок градиентный */
.nh__chip--custom:active {
    background: linear-gradient(
        #2E46E0 0%,
        #8B46BF 43%,
        #F093FB 100%
    );
    color: #fff;
    border-color: transparent;
}

.nh__chip--custom:active span {
    -webkit-text-fill-color: currentColor;
    color: #fff;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

.nh__chip--custom:active::after {
    opacity: 0;
}

/* MEDIA */

.nh__chip--media span {
    color: #00AFFF;
}

.nh__chip--media:active {
    background-color: #00AFFF;
}

.nh__chip--media:active span {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .nh__cats {
        display: none;
        background-color: #f0f0f0;
    }

    .nh--catalog-open .nh__cats {
        display: block;
        margin-top: 0;
        padding: 15px 16px;
        margin: 0 -16px;
    }

    .nh--catalog-open .nh__cats-row {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nh--catalog-open .nh__cats-row::-webkit-scrollbar {
        display: none;
    }

    .nh__chip {
        border: 1px solid #D9D9D9;
    }
}