@font-face {
    font-family: 'Roboto';
    src: url('/local/templates/general/fonts/Robotolight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Roboto';
    src: url('/local/templates/general/fonts/Roboto.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Roboto';
    src: url('/local/templates/general/fonts/Robotomedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Roboto';
    src: url('/local/templates/general/fonts/Robotobold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

/*html {*/
/*    scroll-behavior: smooth;*/
/*}*/

.breadcrumbs {
    padding-bottom: 16px;

    .breadcrumbs__list {
        justify-content: center;
    }
}
.text__content .page-title{
    padding-left: 0;
    padding-right: 0;
}

.page-title {
    line-height: 1.2;
    font-family: 'Roboto', sans-serif;

    h1.page-title__title {
        margin: 0;
        text-align: center;
        font-weight: 700;
        font-size: 40px;
        @media (max-width: 600px) {
            font-size: 28px;
        }
    }

    .page-title__subtitle {
        margin-top: 16px;
        color: var(--c-gray);
        text-transform: none;
        text-align: center;
        font-size: 16px;
    }
}

.text-content {
    /*overflow: hidden;*/
    @media (max-width: 991px) {
        overflow: visible;
    }

}

.nc {
    --c-main: #EE490E;
    --c-border: #E2DBD5;
    --c-gray: #6F6F78;
    margin-top: 24px;
    font-family: 'Roboto', sans-serif;

    .mt {
        margin-top: 60px;
    }
}

.nc-links {
    margin-bottom: 24px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    /*justify-content: space-between;*/
    position: sticky;
    padding: 10px 24px;
    margin: 0 -15px 32px;
    z-index: 16;
    top: calc(10px + 6 * 100vw / (var(--vwIdth) / 16));
    background-color: #fff;

    @media (max-width: 1180px) {
        top: 130px;
    }
    @media (max-width: 991px) {
        flex-wrap: nowrap;
        gap: 24px;
        overflow: auto;

        top: 49px;
        margin: 0 -35px 32px;
        padding: 10px 35px;

        z-index: 16;
        justify-content: normal;
        scrollbar-width: none;
    }
    @media (max-width: 600px) {
        margin: 0 -25px 32px;
        padding: 10px 25px;
    }

}

.nc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    text-align: center;
    padding: 0 30px;
    border: 1px solid var(--c-border);
    border-radius: 100px;
    color: var(--c-gray);
    transition: all ease .3s;
    flex-shrink: 0;

    &:hover {
        @media (hover: hover) {
            cursor: pointer;
            /*font-weight: 600;*/
            color: var(--c-main);
            border-color: var(--c-main);
        }
    }
}

.nc-link.active {
    font-weight: 600;
    color: var(--c-main);
    border-color: var(--c-main);
}

.nc-top {
    padding: 42px 0;
    background-color: #F7F7F7;
    position: relative;
}

.nc-top:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    z-index: -1;
    width: calc(100vw - 12px);
    background-color: #F7F7F7;
    transform: translateX(calc((-1 * (100vw - 1400px) /2) - 12px));
    @media (max-width: 1411px) {
        width: 100vw;
        transform: translateX(-27px);
    }
    @media (max-width: 991px) {
        transform: translateX(-35px);
    }
    @media (max-width: 600px) {
        transform: translateX(-25px);
    }
}

.nc-top__slider {
    .swiper-slide {
        width: 285px;
    }

    .swiper:not(.inited) {
        .swiper-slide {
            margin-right: 20px;
        }
    }
}

.top-card {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    aspect-ratio: 0.792;
    display: block;

    &:hover {
        @media (hover: hover) {
            cursor: pointer;
            .top-card__descr {
                height: 100px;
            }
        }
    }
}

.top-card__inner {
    position: absolute;
    inset: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

.top-card__inner:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(64, 64, 64, 0) 79.73%, rgba(64, 64, 64, 0.5) 100%);

}

.top-card__content {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 16px;
    color: #ffffff;
}

.top-card__title {
    font-weight: 700;
    font-size: 21px;
}

.top-card__descr {
    font-size: 16px;
    transition: all ease .3s;
    height: 0;
    overflow: hidden;
    max-height: 57px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.2;
    padding-top: 12px;
}


.nc-card {
    display: flex;
    flex-direction: column;
    color: #222227;

    &:hover {
        @media (hover: hover) {
            cursor: pointer;
            .nc-card__title {
                color: var(--c-main);
            }

            .nc-card__img:before {
                opacity: 1;
                visibility: visible;
            }
        }
    }

}

.nc-card__img {
    position: relative;
    aspect-ratio: 0.792;
    overflow: hidden;

    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.nc-card__img:before {
    position: absolute;
    content: '';
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--c-main);
    transition: all ease .3s;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

.nc-card__title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 18px;
    transition: all ease .3s;
}

.nc-card__descr {
    margin-top: 12px;
    color: var(--c-gray);
    font-size: 16px;
    max-height: 57px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.nc-card__price {
    font-size: 16px;
    font-weight: 400;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 10px;

    .price {

    }
}

.nc-card__price--discount {

    .price {
        color: var(--c-main);
    }

    .old-price {
        text-decoration: line-through;
        font-size: 14px;
        color: var(--c-gray);
    }
}


.nc-section {
    margin-top: 48px;
    padding-top: 74px;
    position: relative;
    line-height: 1.2;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--c-border);
    scroll-margin-top: 150px;
    @media (max-width: 991px) {
        margin-top: 24px;
        padding-top: 0;
    }

    .nc-section__title {
        padding-bottom: 12px;
        position: relative;
    }

    .nc-section__title:before {
        content: '';
        position: absolute;
        left: 0;
        height: 1px;
        width: 150px;
        display: block;
        background-color: #404040;
        bottom: 0;
    }
}

.nc-section:last-child {
    border-bottom: none;
}

.nc-section--v2 {

    @media (min-width: 1440px) {
        .nc-section__products {
            grid-template-columns: 1fr 320px;
        }

        .nc-section__card {
            border-right: none;
            padding-right: 0;
            padding-left: 30px;
            order: 2;
            border-left: 1px solid var(--c-border);
        }

        .swiper-buttons {
            left: 0;
            right: auto;
        }
    }


}

.nc-section__title {
    font-weight: 100;
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: #222227;
    @media (max-width: 600px) {
        font-size: 24px;
    }

}

.nc-section__descr {
    font-size: 16px;
    color: var(--c-gray);
}

.nc-section__price {
    margin-top: 24px;
    font-size: 16px;
    display: flex;
    flex-direction: column;

    .price {
        margin-top: 3px;
        font-size: 32px;
    }

    .sale {
        color: var(--c-main);
    }
}

.nc-section__btn {
    margin-top: 24px;
}

.nc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    transition: all ease .3s;
    color: var(--c-main);
    border: 1px solid var(--c-main);
    height: 52px;
    font-weight: 500;
    border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    background-color: #ffffff;

    &:hover {
        @media (hover: hover) {
            cursor: pointer;
            background-color: var(--c-main);
            color: #ffffff;
        }
    }
}

.nc-section__products {
    display: grid;
    gap: 30px;
    grid-template-columns: 320px 1fr;
    @media (max-width: 991px) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.nc-section__slider {
    min-width: 100%;

    .swiper:not(.inited) {
        .swiper-slide {
            margin-right: 30px;
            width: calc((100% - 60px) / 3);
            @media (max-width: 1439px) {
                margin-right: 24px;
                width: 320px;
            }
        }
    }

    .swiper-slide {
        @media (max-width: 1439px) {
            width: 320px;
        }
    }

    .swiper-buttons {
        width: 114px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        @media (max-width: 991px) {
            position: static;
            margin-bottom: 24px;
        }
    }

    .swiper-button-next, .swiper-button-prev {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #EEE9E5;
        color: #6F6F78;
        top: 0;
        margin-top: 0;
        position: static;
    }

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 16px;
    }

}

.nc-section__slider {

}

.nc-section__card {
    padding-right: 30px;
    border-right: 1px solid var(--c-border);
    @media (max-width: 991px) {
        padding-right: 0;
        border-right: none;
    }
}
