@import "assets/css/fonts.css";

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'AA Stetica', sans-serif;
}

:root{
    --Main-Accent: rgb(166, 156, 117);
    --Main-White: #FFFFFF;
    --Main-Black: #242526;
    --Main-LightGray: #F9F9F9;
}

a, p, h1, h2, h3, h4, h5, h6, li{
    color: #FFFFFF;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

html{
    scroll-behavior: smooth;
    height: 100%;
}

body{
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
}

.container{
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
}

section{
    position: relative;
    overflow: hidden;
}

.crosshair{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    & span{
        display: block;
        position: absolute;
    }

    & .circle{
        width: 220px;
        height: 220px;
        border-radius: 50%;
        border: 1px solid var(--Main-Accent);
    }

    & .line{
        background: var(--Main-Accent);

        &.left.transparent{
            background: linear-gradient(to left, rgba(166, 156, 117, 1) 0%, rgba(166, 156, 117, 0) 100%);
        }

        &.right.transparent{
            background: linear-gradient(to right, rgba(166, 156, 117, 1) 0%, rgba(166, 156, 117, 0) 100%);
        }

        &.top.transparent{
            background: linear-gradient(to top, rgba(166, 156, 117, 1) 0%, rgba(166, 156, 117, 0) 100%);
        }

        &.bottom.transparent{
            background: linear-gradient(to bottom, rgba(166, 156, 117, 1) 0%, rgba(166, 156, 117, 0) 100%);
        }

        &.left, &.right{
            width: 100%;
            height: 1px;
        }

        &.top, &.bottom{
            height: 100%;
            width: 1px;
        }
    }

    &.left-top{
        & .circle{
            top: 41px;
            left: 70px;
        }

        & .line{
            &.top{
                height: 180px;
                left: 180px;
                top: -100px;
            }

            &.right{
                top: 150px;
                right: -250px;
            }

            &.bottom{
                left: 180px;
                height: calc(100% - 220px);
                bottom: 0;
            }

            &.left{
                width: 115px;
                top: 150px;
            }
        }
    }

    &.right-top{
        & .circle{
            top: 48px;
            right: 68px;
        }

        & .line{
            &.top{
                height: 180px;
                right: 178px;
                top: -90px;
            }

            &.right{
                width: 113px;
                top: 157px;
                right: 0;
            }

            &.bottom{
                right: 178px;
                bottom: 0;
                height: calc(100% - 220px);
            }

            &.left{
                top: 157px;
                right: 240px;
            }
        }
    }

    &.bottom-right{
        & .circle{
            bottom: 29px;
            right: 105px;
        }

        & .line{
            &.top{
                right: 215px;
                top: -200px;
            }

            &.right{
                width: 155px;
                bottom: 139px;
                right: 0;
            }

            &.bottom{
                right: 215px;
                bottom: 0;
                height: 74px;
            }

            &.left{
                bottom: 139px;
                right: 275px;
            }
        }
    }
}

.ellipse{
    position: absolute;
    background: var(--Main-Accent);
}

header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99;

    & .container{
        overflow: visible;
    }

    & .header-top{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 24px 0;
        background: var(--Main-White);

        & .container{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            & > a{
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--Main-Black);
                font-size: 24px;
                font-weight: 700;
                text-transform: uppercase;
            }

            & .header-top__info{
                display: flex;
                gap: 32px;
                align-items: center;

                & .info__main{
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    & a{
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: var(--Main-Black);
                        font-size: 16px;
                    }
                }

                & .info__socials{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;

                    & div{
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        & a svg{
                            color: var(--Main-Accent);
                        }

                        & a{
                            color: var(--Main-Black);
                            font-size: 20px;
                        }
                    }

                    & p{
                        font-size: 16px;
                        color: var(--Main-Accent);
                        line-height: 150%;
                        cursor: pointer;
                    }
                }
            }

            & .header-mobile{
                display: none;
                gap: 12px;

                & .shopping-cart{
                    position: relative;

                    & img{
                        height: 41px;
                        width: 41px;
                    }

                    & .shopping-count{
                        position: absolute;
                        top: 5px;
                        right: 3px;
                        font-size: 14px;
                        color: var(--Main-Black);
                        -webkit-text-stroke: 0.2px var(--Main-Black);
                        background: var(--Main-White);
                        line-height: 100%;
                        font-weight: 500;
                    }
                }

                & .bars {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    padding: 10px 8px;
                    cursor: pointer;

                    & .bar {
                        width: 34px;
                        height: 4px;
                        background: var(--Main-Black);
                        transition: transform .1s linear;
                        border-radius: 8px;
                    }

                    &.active {
                        & .bar:nth-child(1) {
                            transform: rotate(-45deg) translate(-8.5px, 8.5px)
                        }

                        & .bar:nth-child(2) {
                            opacity: 0
                        }

                        & .bar:nth-child(3) {
                            transform: rotate(45deg) translate(-8.5px, -8.5px)
                        }

                    }
                }
            }
        }
    }

    & .header-bottom{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 14px 0;
        background: var(--Main-Black);

        & .container{
            display: flex;
            justify-content: space-between;
            gap: 64px;
            align-items: center;
            width: 100%;

            & nav{
                display: flex;
                gap: 24px;

                & > a{
                    opacity: .7;
                    text-transform: uppercase;
                    font-size: 15px;
                }

                & .nav-items{
                    position: relative;

                    & p{
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 15px;
                        cursor: pointer;
                        text-transform: uppercase;

                        &:after{
                            content: url("assets/images/nav-arrow.svg");
                            height: 16px;
                        }
                    }

                    &:hover{
                        & .nav-modal{
                            gap: 15px;
                            padding: 52px;
                            max-height: 600px;
                            pointer-events: unset;
                        }
                    }

                    & .nav-modal{
                        max-height: 0;
                        display: flex;
                        border-radius: 20px;
                        background: rgba(255, 255, 255, 1);
                        padding: 0;
                        transition: 0.1s linear;
                        position: absolute;
                        pointer-events: none;
                        overflow: hidden;

                        & a{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 8px;
                            background: var(--Main-LightGray);
                            padding: 20px;
                            border-radius: 8px;

                            & img{
                                max-width: 181px;
                            }

                            & h2{
                                font-size: 14px;
                                color: var(--Main-Black);
                                line-height: 130%;
                            }

                            & p{
                                font-size: 20px;
                                line-height: 130%;
                                color: var(--Main-Accent);
                                cursor: pointer;
                            }
                        }
                    }
                }
            }

            & > a{
                display: flex;
                align-items: center;
                gap: 4px;

                & .shopping-cart{
                    position: relative;

                    & .shopping-count{
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size: 12px;
                        color: var(--Main-White);
                        -webkit-text-stroke: 0.2px var(--Main-Black);
                        background: var(--Main-Black);
                        line-height: 100%;

                    }
                }
            }
        }
    }

    & .mobile-box{
        display: none;
        background: var(--Main-White);
        justify-content: center;
        position: absolute;
        top: 96px;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: 0.25s linear;

        &.active{
            max-height: 1500px;
        }

        & .container{
            display: flex;
            flex-direction: column;
            gap: 24px;

            & nav{
                display: flex;
                flex-direction: column;
                gap: 24px;
                padding-top: 28px;

                & > a{
                    opacity: .7;
                    text-transform: uppercase;
                    font-size: 18px;
                    color: var(--Main-Black);
                    font-weight: 500;
                }

                & .nav-items{
                    position: relative;
                    margin: 0;

                    & > p{
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        cursor: pointer;
                        font-size: 18px;
                        color: var(--Main-Black);
                        font-weight: 500;
                        text-transform: uppercase;

                        &:after{
                            content: url("assets/images/nav-arrow-mobile.svg");
                            height: 16px;
                        }
                    }

                    &.active{
                        & .nav-modal{
                            padding-top: 8px;
                            max-height: 600px;
                            pointer-events: unset;
                        }
                    }

                    & .nav-modal{
                        max-height: 0;
                        display: flex;
                        border-radius: 20px;
                        background: rgba(255, 255, 255, 1);
                        padding: 0;
                        transition: linear;
                        pointer-events: none;

                        width: unset;
                        height: unset;

                        & a{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            gap: 8px;
                            background: var(--Main-LightGray);
                            padding: 20px;
                            border-radius: 8px;
                            max-width: 242px;
                            height: auto;
                            overflow: hidden;

                            & img{
                                max-width: 181px;
                            }

                            & h2{
                                font-size: 14px;
                                color: var(--Main-Black);
                                line-height: 130%;
                                white-space: wrap;
                            }

                            & p{
                                font-size: 20px;
                                line-height: 130%;
                                color: var(--Main-Accent);
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

            & .info__main{
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding-bottom: 28px;

                & a{
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    color: var(--Main-Black);
                    font-size: 16px;
                }
            }

            & .info__socials{
                display: flex;
                flex-direction: column;

                & div{
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    & a svg{
                        color: var(--Main-Accent);
                    }

                    & a{
                        color: var(--Main-Black);
                        font-size: 20px;
                        font-weight: 700;
                    }
                }

                & p{
                    font-size: 16px;
                    color: var(--Main-Accent);
                    line-height: 150%;
                    font-weight: 700;
                    cursor: pointer;
                }
            }
        }
    }
}

.breadcrumbs{
    display: flex;
    justify-content: center;
    padding: 52px 0 32px;

    & .container{
        display: flex;
        gap: 4px;

        & li{
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 16px;
            line-height: 19px;
            color: var(--Main-Black);
            opacity: .5;
            cursor: pointer;

            & a{
                font-size: 16px;
                line-height: 19px;
                color: var(--Main-Black);
            }

            &:first-child{
                &:after{
                    content: url("assets/images/caret-down-filled.svg");
                    width: 16px;
                    height: 16px;
                }
                opacity: 1;
            }
        }
    }
}

.main-button{
    padding: 20px 40px;
    border-bottom: 5px solid rgba(78, 72, 46, 1);
    border-radius: 8px;
    background: var(--Main-Accent);
    font-size: 18px;
    transition: .1s linear;
    user-select: none;
    cursor: pointer;

    &:hover{
        background: rgba(196, 187, 151, 1);
    }

    &:active{
        background: rgba(150, 141, 108, 1);
    }

    &:disabled{
        opacity: .3;
    }
}

.sub-button{
    padding: 12px 32px;
    border-radius: 8px;
    background: var(--Main-Accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--Main-White);
    transition: .1s linear;
    line-height: 140%;
    border: none;
    user-select: none;
    cursor: pointer;

    &:hover{
        background: rgba(150, 141, 108, 1);
    }

    &:active{
        background: rgba(196, 187, 151, 1);
    }

    &:disabled{
        opacity: .3;
    }
}

.start{
    display: flex;
    justify-content: center;
    background: url(assets/images/start-bg.png) center no-repeat #040404;
    background-size: cover;

    & .container{
        padding: 102px 0 132px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 40px;

        & .start__main{
            display: flex;
            flex-direction: column;
            gap: 40px;

            & .main__title{
                display: flex;
                flex-direction: column;
                gap: 12px;

                & h1{
                    font-size: 48px;
                    max-width: 654px;

                    & span{
                        color: var(--Main-Black);
                        background-color: var(--Main-Accent);
                        padding: 10px 20px;
                        border-radius: 8px;
                        font-size: 18px;
                        position: absolute;
                        margin: 8px 0 0 8px;
                    }
                }

                & p{
                    font-size: 22px;
                    color: var(--Main-Accent);
                    font-weight: 500;
                }
            }

            & .main__list{
                display: flex;
                flex-direction: column;
                gap: 12px;

                & li{
                    display: flex;
                    gap: 4px;
                    align-items: center;

                    & p{
                        font-size: 18px;
                    }
                }
            }
        }

        & .start__choose{
            display: flex;
            gap: 16px;
            align-items: center;

            & p{
                font-size: 18px;
                max-width: 180px;
            }
        }
    }

    & .ellipse{
        z-index: 2;
    }

    & .first{
        filter: blur(250px);
        width: 852px;
        height: 319px;
        bottom: -235px;
        left: -307px;
    }

    & .second{
        filter: blur(85px);
        width: 634px;
        height: 116px;
        top: -98px;
        left: calc(50% - 500px);
    }

    & .third{
        filter: blur(125px);
        width: 648px;
        height: 319px;
        bottom: -194px;
        right: -133px;
    }

    & .crosshair{

        & .circle{
            border: 1px solid rgba(166, 156, 117, 0.25);
        }

        & .line{
            background-color: rgba(166, 156, 117, 0.25);
        }

        &.bottom-right {
            & .line {
                &.left {
                    width: 65%;
                }
            }
        }

    }
}

.about-us{
    display: flex;
    justify-content: center;
    padding-top: 100px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 28px;

        & h2{
            font-size: 32px;
            font-weight: 700;
            color: var(--Main-Black);
        }

        & .about-us__content{
            display: flex;
            flex-direction: column;
            gap: 28px;

            & .content_text{
                display: flex;
                gap: 24px;

                & div{
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    max-width: 690px;

                    & p{
                        font-size: 18px;
                        color: var(--Main-Black);
                        line-height: 150%;
                    }
                }

                & img{
                    width: 100%;
                    height: 100%;
                    max-width: 487px;
                    max-height: 287px;
                    object-fit: cover;
                    border-radius: 8px;
                }
            }

            & .content_items{
                display: flex;
                gap: 24px;

                & .item:first-child{
                    display: none;
                }

                & .item{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding: 20px;
                    background-color: var(--Main-LightGray);
                    border-radius: 8px;
                    width: calc(33.33% - 10px);
                    position: relative;
                    overflow: hidden;

                    &:after{
                        content: "";
                        background-color: var(--Main-Accent);
                        width: 296px;
                        height: 73px;
                        filter: blur(90px);
                        position: absolute;
                        bottom: -53px;
                        right: -87px;
                    }

                    & h3{
                        font-size: 32px;
                        color: var(--Main-Accent);
                        font-weight: 700;
                        line-height: 150%;
                    }

                    & p{
                        font-size: 16px;
                        color: var(--Main-Black);
                        line-height: 150%;
                    }
                }
            }
        }
    }

    .crosshair{
        opacity: .25;
        top: 0;
        z-index: -1;
    }
}

.banner{
    display: flex;
    justify-content: center;
    padding-top: 100px;
    overflow: unset;

    & .container{
        border-radius: 8px;
        background: var(--Main-Black);
        position: relative;
        padding: 32px 0 32px 32px;
        overflow: unset;

        & .banner__content{
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            z-index: 1;

            & div{
                display: flex;
                flex-direction: column;
                gap: 12px;

                & h2{
                    max-width: 454px;
                    font-size: 32px;
                }

                & ul{
                    display: flex;
                    gap: 38px;

                    & li{
                        font-size: 16px;
                        color: var(--Main-Accent);
                        font-weight: 500;
                        position: relative;

                        &:before{
                            content: url("assets/images/arrow-big-right-line.svg");
                            position: absolute;
                            left: -28px;
                            top: -1px;
                        }

                        &:first-child:before{
                            content: none;
                        }
                    }
                }
            }

            & a{
                padding: 12px 32px;
                background: var(--Main-White);
                font-size: 16px;
                color: var(--Main-Black);
                line-height: 150%;
                width: fit-content;
                border-radius: 8px;
            }
        }

        & img{
            position: absolute;
            right: 0;
            top: 0;
        }

        & .fire{
            width: 100%;
            max-width: 800px;
            height: 100%;
        }

        & .dtk{
            max-width: 456px;
            max-height: 456px;
            rotate: 20deg;
            top: -60%;
            scale: .9;
            right: 3%;
        }

        & .phone{
            top: -105px;
            right: 11%;
            scale: .9;
        }
    }

    & .crosshair{
        opacity: .25;
        top: 0;
        overflow: visible;
        z-index: -1;

        & .line.top{
            top: -50%;
            height: 150%;
        }
    }
}

.catalog{
    display: flex;
    justify-content: center;
    padding-top: 100px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 40px;

        & h2{
            font-size: 32px;
            color: var(--Main-Black);
            font-weight: 700;
        }

        & .catalog__content{
            display: flex;
            flex-direction: column;
            gap: 33px;
            margin: 0;

            & .items-carousel{
                margin: 0;
            }

            & .catalog__items{
                display: flex;
                gap: 24px;

                & .item{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 44px;
                    width: calc(25% - 12px);
                    padding: 20px;
                    background: var(--Main-LightGray);
                    border-radius: 8px;
                    position: relative;
                    overflow: hidden;
                    height: auto;

                    & .item__main-info{
                        display: flex;
                        flex-direction: column;
                        gap: 20px;

                        & .catalog__images{
                            position: relative;

                            & img{
                                width: 100%!important;
                            }

                            & .swiper-pagination{
                                display: flex;
                                gap: 4px;
                                bottom: 0;
                                top: unset;

                                & .swiper-pagination-bullet{
                                    width: 100%;
                                    border-radius: unset;
                                    height: 2px;
                                    margin: 0;
                                    background: rgba(217, 217, 217, 1);
                                }

                                & .swiper-pagination-bullet-active{
                                    background-color: var(--Main-Accent);
                                }
                            }

                            & .discount-info{
                                position: absolute;
                                top: 0;
                                left: 0;
                                padding: 8px 12px;
                                font-size: 13px;
                                font-weight: 500;
                                line-height: 130%;
                                border-radius: 8px;
                                background: rgba(234, 47, 47, 1);
                                color: var(--Main-White);
                                z-index: 2;
                            }
                        }

                        & .item_info{
                            display: flex;
                            flex-direction: column;
                            gap: 20px;

                            & h3{
                                font-size: 18px;
                                color: var(--Main-Black);
                            }

                            & div{
                                display: flex;
                                flex-direction: column;
                                gap: 8px;

                                & ul{
                                    display: flex;

                                    & li{
                                        color: var(--Main-Black);
                                        font-size: 14px;
                                    }
                                }

                                & .top-info{
                                    gap: 8px;

                                    & li{
                                        display: flex;
                                        align-items: center;
                                        gap: 4px;

                                        &.size:before{
                                            content: url("assets/images/arrows-horizontal.svg");
                                            height: 24px;
                                        }

                                        &.radius:before{
                                            content: url("assets/images/circle-off.svg");
                                            height: 24px;
                                        }

                                        &.weight:before{
                                            content: url("assets/images/weight.svg");
                                            height: 24px;
                                        }
                                    }
                                }

                                & .id-info{
                                    display: flex;
                                    flex-direction: row;
                                    gap: 4px;

                                    &:before{
                                        content: url("assets/images/brand-pushbullet.svg");
                                        height: 24px;
                                    }

                                    & ul{
                                        flex-wrap: wrap;
                                        column-gap: 12px;

                                        & li{
                                            position: relative;

                                            &:not(:last-child):after{
                                                content: "/";
                                                position: absolute;
                                                right: -8px;
                                                color: var(--Main-Accent);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    & .item__count{
                        display: flex;
                        justify-content: space-between;
                        gap: 12px;

                        & div{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            & p{
                                color: var(--Main-Black);
                                line-height: 130%;
                                font-weight: 500;
                            }

                            & .main-count{
                                font-size: 24px;
                            }

                            & .crossed-count{
                                font-size: 15px;
                                text-decoration-line: line-through;
                                opacity: .5;
                            }
                        }
                    }

                    &:before{
                        content: "";
                        background-color: var(--Main-Accent);
                        width: 269px;
                        height: 67px;
                        filter: blur(70px);
                        position: absolute;
                        bottom: -52px;
                        left: -66px;
                    }
                }
            }

            & .catalog__filter{
                display: flex;
                background: var(--Main-LightGray);
                border-radius: 8px;

                & li{
                    padding: 12px 32px;
                    line-height: 140%;
                    font-size: 18px;
                    color: var(--Main-Black);
                    cursor: pointer;
                    transition: .1s linear;
                    user-select: none;

                    &:first-child{
                        border-radius: 8px 0 0 8px;
                    }

                    &.active{
                        color: var(--Main-White);
                        background-color: var(--Main-Accent);
                    }
                }
            }
        }
    }

    & .crosshair{
        top: 0;
        opacity: .25;
        z-index: -1;
    }
}

.sale{
    display: flex;
    justify-content: center;
    padding-top: 100px;

    & .container{
        display: flex;
        background: url("assets/images/sale-bg.png") no-repeat center;
        position: relative;
        padding: 32px 0 32px 32px;
        border-radius: 8px;

        & .sale__content{
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: relative;
            z-index: 1;

            & h2{
                font-size: 32px;
                line-height: 130%;
                max-width: 597px;
            }

            & p{
                font-size: 20px;
                color: var(--Main-Accent);
                line-height: 130%;
            }

            & a{
                padding: 12px 32px;
                background: var(--Main-White);
                font-size: 16px;
                border-radius: 8px;
                width: fit-content;
                color: var(--Main-Black);
                font-weight: 500;
                cursor: pointer;
            }
        }

        & > img{
            position: absolute;

            &.adapter{
                max-width: 448px;
                top: -110px;
                right: 28px;
            }

            &.dtk{
                top: -185px;
                right: -100px;
            }
        }
    }
}

.reviews{
    display: flex;
    justify-content: center;
    padding-top: 100px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 40px;

        & .reviews__title{
            display: flex;
            justify-content: space-between;
            gap: 32px;
            position: relative;

            & h2{
                font-size: 32px;
                color: var(--Main-Black);
                line-height: 130%;
            }

            & > div{
                display: flex;
                gap: 8px;
                position: relative;

                & .swiper-button-next, & .swiper-button-prev{
                    background: var(--Main-Accent, rgba(166, 156, 117, 1));
                    border-radius: 8px;
                    padding: 8px;
                    width: 40px;
                    height: 40px;
                    position: static;
                    margin: 0;

                    &:after{
                        content: url("assets/images/reviews-arrow.svg");
                        width: 24px;
                        height: 24px;
                        font: unset;
                    }

                    &.swiper-button-disabled{
                        opacity: .3;
                    }
                }

                & .swiper-button-prev{
                    &:after{
                        rotate: 180deg;
                    }
                }
            }
        }

        & .reviews__items{
            & .reviews__item{
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding: 20px;
                background: var(--Main-LightGray);
                border-radius: 8px;
                position: relative;
                overflow: hidden;

                & .item__title{
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    & h3{
                        font-size: 16px;
                        color: var(--Main-Black);
                        line-height: 130%;
                    }

                    & .item__score{
                        display: flex;
                        gap: 4px;
                    }
                }

                & p{
                    font-size: 15px;
                    color: var(--Main-Black);
                    line-height: 130%;
                }

                &:before{
                    content: "";
                    background-color: var(--Main-Accent);
                    width: 269px;
                    height: 67px;
                    filter: blur(70px);
                    position: absolute;
                    bottom: -52px;
                    right: -66px;
                }
            }
        }
    }

    & .crosshair{
        top: 0;
        opacity: .25;
    }
}

.product{
    display: flex;
    justify-content: center;
    padding-bottom: 52px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 32px;

        & h1{
            font-size: 32px;
            color: var(--Main-Black);
            line-height: 130%;
            font-weight: 700;
        }

        & .product__content{
            display: flex;
            flex-direction: column;
            gap: 52px;

            & .content__main-info{
                display: flex;
                gap: 24px;

                & .main-info__images{
                    display: flex;
                    gap: 24px;

                    & .images__main-images{
                        max-height: 384px;
                        padding: 20px;
                        background: var(--Main-LightGray);
                        border-radius: 8px;
                        height: fit-content;

                        .swiper-slide {
                          opacity: 0 !important;
                          visibility: hidden;
                          pointer-events: none; /* чтобы не кликалось */
                        }

                        .swiper-slide-active {
                          opacity: 1 !important;
                          visibility: visible;
                          pointer-events: auto;
                        }
                        
                        & .swiper-wrapper{
                            max-width: 344px;
                            max-height: 344px;
                            height: fit-content;

                            & img{
                                max-width: 344px;
                                max-height: 344px;
                                height: fit-content;
                            }
                        }
                    }

                    & .main-wrapper{
                        width: 78px;
                        max-height: 384px;
                        position: relative;
                        overflow: hidden;

                        & .images__thumbnails{
                            display: flex;
                            flex-direction: column;
                            gap: 12px;
                            & .swiper-wrapper{
                                display: flex;
                                flex-direction: column;
                                border-radius: 8px;

                                & .swiper-slide{
                                    max-width: 78px;
                                    max-height: 78px;
                                    padding: 10px;
                                    background: var(--Main-LightGray);
                                    border-radius: 8px;
                                    border: 2px solid transparent;
                                    transition: .1s linear;
                                    cursor: pointer;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    &.swiper-slide-thumb-active{
                                        border: 2px solid var(--Main-Black);
                                    }
                                }
                            }
                        }

                        & .swiper-button-next{
                            top: unset;
                            bottom: 0;
                            left: unset;
                            right: unset;
                            width: 100%;
                            height: 24px;
                            border-radius: 8px;
                            background: var(--Main-Black);
                            user-select: none;

                            &:after{
                                content: url("assets/images/nav-arrow.svg");
                                width: 20px;
                                height: 24px;
                                font: unset;
                                display: flex;
                                justify-content: center;
                                align-items: flex-end;
                            }
                        }
                    }
                }

                & .main-info__specifications{
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    & .specifications__item{
                        display: flex;
                        flex-direction: column;
                        gap: 15px;

                        & h2{
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            font-size: 17px;
                            font-weight: 700;
                            color: var(--Main-Black);
                        }

                        & .item__choose{
                            display: flex;
                            row-gap: 24px;
                            column-gap: 8px;
                            flex-wrap: wrap;
                            max-width: 400px;

                            & .item{
                                & input{
                                    display: none;
                                }

                                & input:checked + label{
                                    background: var(--Main-Accent);
                                    color: var(--Main-White);
                                }

                                & label{
                                    padding: 8px 12px;
                                    border-radius: 8px;
                                    background: var(--Main-LightGray, rgba(249, 249, 249, 1));
                                    font-size: 17px;
                                    transition: .1s linear;
                                    user-select: none;
                                    cursor: pointer;
                                    display: flex;
                                }
                            }
                        }

                        &.static{
                            display: flex;
                            gap: 20px;
                            flex-direction: row;

                            & > div{
                                display: flex;
                                flex-direction: column;
                                gap: 4px;

                                & p{
                                    font-size: 17px;
                                    color: var(--Main-Black);
                                }
                            }
                        }
                    }
                }

                & .main-info__price{
                    & .pc{
                        display: flex;
                        flex-direction: column;
                        gap: 16px;

                        & > div{
                            display: flex;
                            flex-direction: column;
                            gap: 16px;
                            background: var(--Main-LightGray);
                            border-radius: 8px;
                            padding: 20px;

                            & > div{
                                display: flex;
                                flex-direction: column;
                                gap: 12px;

                                & input[type= "number"]::-webkit-inner-spin-button, input[type= "number"]::-webkit-outer-spin-button {
                                    -webkit-appearance: none;
                                    margin: 0;
                                }

                                & .counter{
                                    display: flex;
                                    justify-content: space-between;
                                    padding: 15px 28px;
                                    background: var(--Main-White);
                                    border-radius: 8px;

                                    & input{
                                        display: block;
                                        width: fit-content;
                                        padding: 0;
                                        margin: 0;
                                        border: none;
                                        font-size: 18px;
                                        font-weight: 500;
                                        background: none;
                                        
                                        &:focus{
                                            outline: none;
                                        }
                                    }

                                    & p{
                                        font-size: 18px;
                                        font-weight: 500;
                                        color: var(--Main-Black);
                                        cursor: pointer;
                                        user-select: none;
                                    }
                                }

                                & .sub-button{
                                    padding: 16.5px 32px;

                                    &.active{
                                        background: var(--Main-Black);
                                        color: var(--Main-White);
                                    }
                                }
                            }

                            & .price__count{
                                font-size: 28px;
                                color: var(--Main-Black);
                                font-weight: 500;
                                line-height: 130%;
                                width: 100%;
                                text-align: center;
                            }

                            & .this-item{
                                font-size: 15px;
                                font-weight: 700;
                                line-height: 150%;
                                color: var(--Main-Black);

                                & span{
                                    color: var(--Main-Accent);
                                    opacity: .8;
                                }
                            }
                        }

                        & .price-info{
                            font-size: 15px;
                            color: var(--Main-Black);
                            line-height: 150%;
                        }
                    }

                    & .mobile{
                        display: none;
                        gap: 16px;

                        & > div{
                            display: flex;
                            gap: 16px;
                            background: var(--Main-LightGray);
                            border-radius: 8px;
                            padding: 20px;

                            & > div{
                                display: flex;
                                flex-direction: column;
                                gap: 12px;

                                & input[type= "number"]::-webkit-inner-spin-button, input[type= "number"]::-webkit-outer-spin-button {
                                    -webkit-appearance: none;
                                    margin: 0;
                                }

                                & .counter{
                                    display: flex;
                                    justify-content: space-between;
                                    padding: 15px 28px;
                                    background: var(--Main-White);
                                    border-radius: 8px;

                                    & input{
                                        display: block;
                                        width: fit-content;
                                        padding: 0;
                                        margin: 0;
                                        border: none;
                                        font-size: 18px;
                                        font-weight: 500;
                                        background: none;

                                        &:focus{
                                            outline: none;
                                        }
                                    }

                                    & p{
                                        font-size: 18px;
                                        font-weight: 500;
                                        color: var(--Main-Black);
                                        cursor: pointer;
                                        user-select: none;
                                    }
                                }

                                & .sub-button{
                                    padding: 16.5px 32px;

                                    &.active{
                                        background: var(--Main-Black);
                                        color: var(--Main-White);
                                    }
                                }
                            }

                            & .price__count{
                                font-size: 28px;
                                color: var(--Main-Black);
                                font-weight: 500;
                                line-height: 130%;
                                width: 100%;
                            }

                            & .this-item{
                                font-size: 15px;
                                font-weight: 700;
                                line-height: 150%;
                                color: var(--Main-Black);

                                & span{
                                    color: var(--Main-Accent);
                                    opacity: .8;
                                }
                            }
                        }

                        & .price-info{
                            font-size: 15px;
                            color: var(--Main-Black);
                            line-height: 150%;
                        }
                    }

                    @media screen and (max-width: 768px){
                        & .pc{
                            display: none;
                        }

                        & .mobile{
                            display: flex;
                        }
                    }
                }
            }

            & .content__description{
                display: flex;
                justify-content: space-between;
                gap: 28px;

                & h2{
                    font-size: 24px;
                    font-weight: 700;
                    color: var(--Main-Black);
                }

                & .description{
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    & div{
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        p{
                            font-size: 16px;
                            color: var(--Main-Black);
                            line-height: 150%;
                            max-width: 792px;
                        }
                    }
                }

                & .see-also{
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    & .item{
                        display: flex;
                        flex-direction: column;
                        gap: 44px;
                        width: 100%;
                        padding: 20px;
                        max-width: 282px;
                        background: var(--Main-LightGray);
                        border-radius: 8px;
                        position: relative;
                        overflow: hidden;
                        height: fit-content;

                        & .item__main-info{
                            display: flex;
                            flex-direction: column;
                            gap: 20px;

                            & .catalog__images{
                                & img{
                                    width: 100%!important;
                                }

                                & .swiper-pagination{
                                    display: flex;
                                    gap: 4px;
                                    bottom: 0;
                                    top: unset;

                                    & .swiper-pagination-bullet{
                                        width: 100%;
                                        border-radius: unset;
                                        height: 2px;
                                        margin: 0;
                                        background: rgba(217, 217, 217, 1);
                                    }

                                    & .swiper-pagination-bullet-active{
                                        background-color: var(--Main-Accent);
                                    }
                                }
                            }

                            & .item_info{
                                display: flex;
                                flex-direction: column;
                                gap: 20px;

                                & h3{
                                    font-size: 18px;
                                    color: var(--Main-Black);
                                }

                                & div{
                                    display: flex;
                                    flex-direction: column;
                                    gap: 8px;

                                    & ul{
                                        display: flex;

                                        & li{
                                            color: var(--Main-Black);
                                            font-size: 14px;
                                        }
                                    }

                                    & .top-info{
                                        gap: 8px;

                                        & li{
                                            display: flex;
                                            align-items: center;
                                            gap: 4px;

                                            &.size:before{
                                                content: url("assets/images/arrows-horizontal.svg");
                                                height: 24px;
                                            }

                                            &.radius:before{
                                                content: url("assets/images/circle-off.svg");
                                                height: 24px;
                                            }

                                            &.weight:before{
                                                content: url("assets/images/weight.svg");
                                                height: 24px;
                                            }
                                        }
                                    }

                                    & .id-info{
                                        display: flex;
                                        flex-direction: row;
                                        gap: 4px;

                                        &:before{
                                            content: url("assets/images/brand-pushbullet.svg");
                                            height: 24px;
                                        }

                                        & ul{
                                            flex-wrap: wrap;
                                            column-gap: 12px;

                                            & li{
                                                position: relative;

                                                &:not(:last-child):after{
                                                    content: "/";
                                                    position: absolute;
                                                    right: -8px;
                                                    color: var(--Main-Accent);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        & .item__count{
                            display: flex;
                            justify-content: space-between;
                            gap: 12px;

                            & div{
                                display: flex;
                                flex-direction: column;
                                justify-content: center;

                                & p{
                                    color: var(--Main-Black);
                                    line-height: 130%;
                                    font-weight: 500;
                                }

                                & .main-count{
                                    font-size: 24px;
                                }

                                & .crossed-count{
                                    font-size: 15px;
                                    text-decoration-line: line-through;
                                    opacity: .5;
                                }
                            }
                        }

                        &:before{
                            content: "";
                            background-color: var(--Main-Accent);
                            width: 269px;
                            height: 67px;
                            filter: blur(70px);
                            position: absolute;
                            bottom: -52px;
                            left: -66px;
                        }
                    }
                }
            }
        }
    }
}

.cart{
    display: flex;
    justify-content: center;
    padding-bottom: 80px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 32px;

        & h1{
            font-size: 32px;
            font-weight: 700;
            color: var(--Main-Black);
            line-height: 120%;
        }

        & .cart__content{
            display: flex;
            gap: 24px;

            & .cart__items{
                display: flex;
                flex-direction: column;
                gap: 40px;

                & .item{
                    display: flex;
                    position: relative;
                    gap: 24px;

                    &:not(:first-child):before{
                        content: "";
                        width: 100%;
                        height: 1px;
                        background: rgba(217, 217, 217, 1);
                        position: absolute;
                        top: -20px;
                    }

                    & .item-info{
                        display: flex;
                        gap: 24px;

                        & > img{
                            padding: 10px;
                            background-color: var(--Main-LightGray);
                            border-radius: 8px;
                            max-width: 78px;
                            max-height: 78px;
                        }

                        & > div{
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            justify-content: center;
                            min-width: 380px;
                            width: 100%;

                            & h2{
                                font-size: 16px;
                                font-weight: 700;
                                color: var(--Main-Black);
                                width: 100%;
                            }

                            & > div{
                                display: flex;
                                gap: 12px;

                                & p{
                                    display: flex;
                                    gap: 4px;
                                    align-items: center;
                                    font-size: 15px;
                                    line-height: 130%;
                                    color: var(--Main-Black);
                                }
                            }
                        }
                    }

                    & .item-change{
                        display: flex;
                        align-items: center;
                        gap: 32px;

                        & input[type= "number"]::-webkit-inner-spin-button, input[type= "number"]::-webkit-outer-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        & .counter{
                            display: flex;
                            justify-content: space-between;
                            padding: 8px 20px;
                            gap: 27px;
                            background: var(--Main-LightGray);
                            border-radius: 8px;

                            & input{
                                display: block;
                                width: fit-content;
                                padding: 0;
                                margin: 0;
                                border: none;
                                font-size: 18px;
                                font-weight: 500;
                                background: none;

                                &:focus{
                                    outline: none;
                                }
                            }

                            & p{
                                font-size: 18px;
                                font-weight: 500;
                                color: var(--Main-Black);
                                cursor: pointer;
                                user-select: none;
                            }
                        }

                        & .item-cost{
                            font-size: 20px;
                            font-weight: 500;
                            line-height: 150%;
                            color: var(--Main-Black);
                            min-width: 83px;
                        }

                        & .trashcan{
                            cursor: pointer;
                        }
                    }
                }
            }

            & .cart__total{
                display: flex;
                flex-direction: column;
                gap: 16px;
                border-radius: 8px;
                background: var(--Main-LightGray);
                padding: 20px;

                & .total-count{
                    font-size: 24px;
                    font-weight: 500;
                    color: var(--Main-Black);
                    text-align: center;
                }

                & .total-info{
                    display: flex;
                    flex-direction: column;
                    gap: 16px;

                    & p{
                        font-size: 16px;
                        line-height: 150%;
                        color: var(--Main-Black);
                        opacity: .8;
                    }
                }

                & .total-block{
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }
            }
        }
    }
}

.infopage{
    display: flex;
    justify-content: center;
    padding-bottom: 52px;

    & .container{
        max-width: 996px;
        display: flex;
        flex-direction: column;
        gap: 32px;


        & h1{
            font-size: 32px;
            font-weight: 700;
            color: var(--Main-Black);
            line-height: 120%;
        }

        & div{
            display: flex;
            flex-direction: column;
            gap: 4px;

            & p{
                font-size: 16px;
                color: var(--Main-Black);
                line-height: 130%;
            }

            & a{
                text-decoration: underline;
                font-size: 16px;
                color: var(--Main-Black);
                line-height: 130%;
            }
        }
    }
}

.payment{
    display: flex;
    justify-content: center;
    padding-bottom: 50px;

    & .container{
        max-width: 996px;
        display: flex;
        flex-direction: column;
        gap: 45px;

        & .payment__content-block{
            display: flex;
            flex-direction: column;
            gap: 45px;

            & .title-block{
                display: flex;
                flex-direction: column;
                gap: 32px;

                & .attention{
                    padding: 20px 32px;
                    border: 2px solid var(--Main-Accent);
                    border-radius: 8px;
                    font-size: 20px;
                    color: var(--Main-Black);
                    font-weight: 500;
                    width: 100%;
                    text-align: center;
                }
            }

            & .title{
                font-size: 32px;
                font-weight: 700;
                color: var(--Main-Black);
            }

            & .subtitle{
                font-size: 20px;
                font-weight: 500;
                color: var(--Main-Black);
            }

            & .content-block{
                display: flex;
                flex-direction: column;
                gap: 12px;

                & .subtitle{
                    margin-bottom: 5px;
                }

                & ol{
                    padding: unset;
                    padding-inline-start: 30px;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    & li{
                        font-size: 20px;
                        font-weight: 400;
                        color: var(--Main-Black);
                        line-height: 120%;
                    }
                }

                & .under-numeric{
                    font-size: 16px;
                    color: var(--Main-Black);
                    line-height: 150%;
                }
            }

            &.delivery{
                gap: 19px;

                & > div{
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    width: 100%;

                    & > div{
                        display: flex;
                        gap: 66px;
                        align-items: center;
                        justify-content: center;
                    }

                    & p{
                        font-size: 16px;
                        color: var(--Main-Black);
                        line-height: 150%;
                    }
                }
            }

            &.refund{
                gap: 32px;

                & p:not(.title){
                    font-size: 16px;
                    color: var(--Main-Black);
                    line-height: 150%;
                }
            }
        }
    }
}

.nf404{
    display: flex;
    justify-content: center;
    padding: 80px 0 100px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 40px;

        & .main404{
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: center;

            & .fourofour{
                display: flex;
                justify-content: center;

                & p{
                    font-size: 308px;
                    font-weight: 700;
                    line-height: 120%;
                    color: var(--Main-Black);
                    position: relative;
                    z-index: 2;
                }

                & p:first-child{
                    margin-right: -130px;
                }

                & p:last-child{
                    margin-left: -130px;
                }
            }

            & .sorry{
                font-size: 32px;
                font-weight: 700;
                line-height: 120%;
                color: var(--Main-Black);
            }
        }

        & .other-pages{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;

            & p{
                font-size: 20px;
                color: var(--Main-Black);
                line-height: 120%;
            }

            & > div{
                display: flex;
                gap: 26px;

                & .main-button.blue{
                    border-bottom: 5px solid rgba(20, 63, 112, 1);
                    background: rgba(55, 112, 177, 1);

                    &:hover{
                        background: rgb(63, 126, 203);
                    }

                    &:active{
                        background: rgb(47, 97, 154);
                    }
                }
            }
        }
    }
}

.contacts{
    display: flex;
    justify-content: center;
    padding-bottom: 80px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 40px;

        & h1{
            font-size: 32px;
            font-weight: 700;
            color: var(--Main-Black);
        }

        & .contact__content{
            display: flex;
            gap: 24px;
            justify-content: space-between;

            & .content__info{
                display: flex;
                flex-direction: column;
                gap: 32px;

                & h2{
                    font-size: 18px;
                    font-weight: 700;
                    color: var(--Main-Black);
                }

                .info{
                    display: flex;
                    flex-direction: column;
                    gap: 20px;

                    & > div{
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                    }
                }

                & .main-contacts{
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    & li a{
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 16px;
                        color: var(--Main-Black);
                    }
                }

                & .socials{
                    display: flex;
                    gap: 8px;
                    margin-top: 4px;

                    & li a{
                        border-radius: 8px;
                        background: var(--Main-Accent);
                        padding: 6px;
                        display: flex;
                        color: var(--Main-Black);

                        & svg, & img{
                            width: 20px;
                            height: 20px;
                            color: var(--Main-White);
                        }
                    }
                }

                & p{
                    font-size: 18px;
                    line-height: 150%;
                    color: var(--Main-Black);
                }
            }

            & .map{
                max-width: 799px;
                width: 100%;
                position:relative;

                & iframe{
                    border: none;
                    border-radius: 8px;
                    max-width: 799px;
                    width: 100%;
                    height: -webkit-fill-available;
                    position:relative;
                }
            }
        }


    }
}

footer{
    margin-top: auto;
    background: var(--Main-Black);
    display: flex;
    justify-content: center;

    padding: 32px 0 61px;

    & .container{
        display: flex;
        flex-direction: column;
        gap: 40px;

        & > a{
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 24px;
            line-height: 150%;
            font-weight: 700;
            text-transform: uppercase;
            width: fit-content;
        }

        & .footer__content{
            display: flex;
            justify-content: space-between;
            gap: 32px;

            & .content__contacts{
                display: flex;
                flex-direction: column;
                gap: 12px;
                max-width: 384px;
                width: 100%;

                & h2{
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 150%;
                }

                & .main-contacts{
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    & li a{
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 16px;
                    }
                }

                & .socials{
                    display: flex;
                    gap: 8px;

                    & li a{
                        border-radius: 8px;
                        background: var(--Main-Accent);
                        padding: 6px;
                        display: flex;

                        & svg, & img{
                            width: 20px;
                            height: 20px;
                        }
                    }
                }
            }

            & .content__information{
                display: flex;
                gap: 24px;

                & .main-information, & .products{
                    max-width: 282px;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    & h2{
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 150%;
                    }

                    & ul{
                        display: flex;
                        flex-direction: column;
                        gap: 8px;

                        & li a{
                            font-size: 16px;
                            line-height: 150%;
                        }
                    }
                }
            }
        }
    }
}

.modal, .modal-cart{
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 99999;
    top: 0;

    &.active{
        display: flex;
    }

    & form, & .modal-success{
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: var(--Main-White);
        padding: 52px;
        border-radius: 20px;
        position: relative;
        max-width: 780px;
        width: 100%;

        & ol{
            padding: unset;
            padding-inline-start: 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;

            & li{
                font-size: 16px;
                font-weight: 400;
                color: var(--Main-Black);
                line-height: 120%;
            }
        }

        &.disabled{
            display: none;
        }

        & h2{
            font-size: 28px;
            font-weight: 700;
            color: var(--Main-Black);
        }

        & > p{
            font-size: 18px;
            font-weight: 500;
            color: var(--Main-Black);
        }

        & .inputs{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            & label{
                position: relative;
                display: flex;
                width: calc(50% - 10px);

                & > span{
                    color: var(--Main-Black);
                    position: absolute;
                    font-size: 16px;
                    top: calc(50% - 9.5px);
                    left: 20px;
                    transition: .1s linear;
                    pointer-events: none;

                    & span.required{
                        color: #C75656;
                    }
                }

                & input{
                    padding: 26px 20px 7px;
                    background: var(--Main-LightGray);
                    outline: 1px solid transparent;
                    border-radius: 8px;
                    width: 100%;
                    border: 1px solid rgba(226, 226, 226, 1);
                    transition: .1s linear;
                    position: relative;

                    &:hover{
                        border: 1px solid var(--Main-Accent, rgba(166, 156, 117, 1));
                    }

                    &:focus, &:not(:placeholder-shown){
                        border: 1px solid var(--Main-Accent);
                        outline: 1px solid var(--Main-Accent);

                        &::placeholder {
                            opacity: 1;
                        }

                        & + span{
                            top: 7px;
                            font-size: 12px;
                        }
                    }

                    &.input-success:not(:focus){
                        border: 1px solid rgba(226, 226, 226, 1);
                        outline: 1px solid transparent;
                    }

                    &::placeholder{
                        opacity: 0;
                        font-size: 16px;
                        color: var(--Main-Black);
                        transition: opacity .1s linear;
                    }
                }

                &:before{
                    content: url("assets/images/circle-check.svg");
                    position: absolute;
                    right: 20px;
                    top: calc(50% - 12px);
                    width: 24px;
                    height: 24px;
                    z-index: 1;
                    opacity: 0;
                    transition: .1s linear;
                }

                &:has(.input-success){
                    &:before{
                        opacity: 1;
                    }
                }
            }
        }

        & .policy{
            display: flex;
            align-items: center;
            gap: 8px;

            & label {
                width: 24px;
                height: 24px;
                border: 1px solid rgba(226, 226, 226, 1);
                border-radius: 8px;
                background: var(--Main-LightGray);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                position: relative;

                input {
                    display: none;

                    &:checked + span::before {
                        opacity: 1;
                    }
                }

                span {
                    display: block;
                    width: 16px;
                    height: 16px;

                    &:before{
                        content: url("assets/images/check.svg");
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        opacity: 0;
                        transition: .1s linear;
                    }
                }
            }

            & p{
                font-size: 16px;
                line-height: 140%;
                color: var(--Main-Black);

                & a{
                    color: var(--Main-Accent);
                    text-decoration: underline;
                }
            }
        }

        & .sub-button{
            width: calc(50% - 12px);
            padding: 16.5px 32px;
        }

        & .socials{
            display: flex;
            gap: 20px;
            width: 100%;

            & a{
                width: 100%;
                padding: 13.5px 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                font-size: 16px;
                font-weight: 500;
                border-radius: 8px;

                &:first-child{
                    border: 2px solid rgba(1, 147, 210, 1);
                    color: rgba(1, 147, 210, 1);
                }

                &:last-child{
                    border: 2px solid rgba(1, 153, 0, 1);
                    color: rgba(1, 153, 0, 1);
                }
            }
        }

        & .close-modal{
            position: absolute;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }
    }

    & .modal-success{
        & > p{
            &.colored{
                color: rgba(126, 126, 126, 1);
            }
        }

        & .socials {
            & a {
                transition: .1s linear;
                &:first-child {
                    background: rgba(55, 112, 177, 1);
                    color: var(--Main-White);
                    border: none;

                    &:hover {
                        background: rgb(63, 126, 197);
                    }

                    &:active {
                        background: rgb(51, 103, 162);
                    }
                }

                &:last-child {
                    background: var(--Main-Accent);
                    color: var(--Main-White);
                    border: none;

                    &:hover {
                        background: rgba(196, 187, 151, 1);
                    }

                    &:active {
                        background: rgba(150, 141, 108, 1);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1180px){
    & .container{
        max-width: 1080px;
    }
}

@media screen and (max-width: 1024px){
    .container{
        max-width: 960px;
    }

    .about-us {
        & .container {
            & .about-us__content {
                & .content_text {
                    & img {
                        display: none;
                    }

                    & div{
                        max-width: unset;
                    }
                }

                & .content_items{
                    flex-wrap: wrap;
                    & .item:first-child{
                        display: flex;
                        width: calc(50% - 12px);
                        max-height: 170px;
                        background: none;
                        padding: 0;

                        & img{
                            object-fit: cover;
                            width: 100%;
                            height: 140%;
                        }
                    }

                    & .item{
                        width: calc(50% - 12px);

                    }
                }
            }
        }
    }

    .banner {
        & .container {
            overflow: hidden;
            & .banner__content {
                & div {
                    & ul {
                        flex-direction: column;
                        gap: 5px;

                        & li{
                            display: flex;
                            align-items: center;
                            gap: 4px;

                            &:before{
                                content: url("assets/images/arrow-big-right-line.svg");
                                position: relative;
                                left: 0;
                                top: unset;
                                height: 20px;
                            }

                            &:first-child:before{
                                content: url("assets/images/arrow-big-right-line.svg");
                            }
                        }
                    }
                }
            }

            & .dtk {
                top: -30%;
                right: 0;
                rotate: 25deg;
            }

            & .phone{
                top: -54px;
            }
        }
    }

    .catalog {
        & .container {
            & .catalog__content {
                & .catalog__items {
                    flex-wrap: wrap;

                    & .item{
                        width: calc(33.33% - 16px);
                    }
                }
            }
        }
    }

    .sale {
        & .container {
            & .sale__content {
                & h2 {
                    position: relative;
                    z-index: 1;
                }
            }
        }
    }

    .product {
        & .container {
            & .product__content {
                & .content__main-info {
                    width: 100%;
                    flex-wrap: wrap;
                    & .main-info__price {
                        width: 100%;
                        & .pc{
                            display: none;
                        }

                        & .mobile {
                            display: flex;
                        }
                    }
                }

                & .content__description {
                    & .description {
                        & div {
                            & p{
                                max-width: 670px;
                            }
                        }
                    }
                }
            }
        }
    }

    .cart {
        & .container {
            & .cart__content {
                flex-direction: column;

                & .cart__items{
                    & .item{
                        justify-content: space-between;
                    }
                }

                & .cart__total{
                    & .total-block{
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 980px){
    .container{
        max-width: 880px;
    }

    .product {
        & .container {
            & .product__content {
                & .content__description {
                    & .description {
                        & div {
                            & p {
                                max-width: 600px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px){
    .container{
        max-width: 700px!important;
    }

    & .crosshair{

        &.left-top{
            & .circle{
                left: -100px;
                top: 25px;
            }

            & .line{
                &.top{
                    left: 10px;
                    top: -105px;
                }

                &.right{
                    right: -70px;
                    top: 141px;
                }

                &.bottom{
                    left: 10px;
                    bottom: 25px;
                }

                &.left{
                    display: none;
                }
            }
        }

        &.bottom-right{
            & .circle{
                right: 40px;
            }

            & .line{
                &.top{
                    right: 150px;
                }

                &.right{
                    width: 90px;
                }

                &.bottom{
                    right: 150px;
                }

                &.left{
                    right: 210px;
                    width: 75%;
                }
            }
        }

        &.right-top{
            & .circle{
                right: 14px;
                top: 13px;
            }

            & .line{
                &.top{
                    right: 124px;
                    top: -125px;
                }

                &.right{
                    width: 64px;
                    top: 122px;
                }

                &.bottom{
                    right: 124px;
                    bottom: 25px;
                }

                &.left{
                    right: 184px;
                    width: 77%;
                    top: 122px;
                }
            }
        }
    }

    header{
        & .mobile-box{
            display: flex;
        }

        & .header-bottom{
            display: none;
        }

        & .header-top {
            border-bottom: 1px solid rgba(221, 221, 221, 1);
            & .container {
                & .header-top__info{
                    display: none;
                }

                & .header-mobile {
                    display: flex;
                }
            }
        }
    }

    .start {
        & .container {
            padding: 52px 0;

            & .start__main{
                gap: 204px;
            }
        }

        & .crosshair.left-top{
            display: none;
        }

        & .crosshair.bottom-right{
            & .circle{
                right: 40px;
            }

            & .line{
                &.top{
                    right: 150px;
                }

                &.right{
                    width: 90px;
                }

                &.bottom{
                    right: 150px;
                }

                &.left{
                    right: 210px;
                    width: 75%;
                }
            }
        }

        & .third {
            filter: blur(125px);
            width: 648px;
            height: 319px;
            bottom: -237px;
            right: -350px;
        }
    }

    .banner {
        & .container {
            & .dtk {
                top: -30%;
                right: -80px;
                rotate: 25deg;
                scale: .8;
            }

            & .phone{
                right: 0;
            }
        }

        & .crosshair{
            display: none;
        }
    }

    .catalog {
        & .container {
            & .catalog__content {
                & .catalog__items {
                    & .item {
                        width: calc(50% - 12px);
                    }
                }
            }
        }
    }

    .sale {
        & .container {
            padding: 32px 0 133px 32px;

            & > img {
                &.dtk {
                    top: -40px;
                    right: -130px;
                }

                &.adapter {
                    top: 25px;
                    right: 0;
                }
            }
        }
    }

    .reviews {
        padding-bottom: 60px;
        & .container {
            & .reviews__title {
                & > div {
                    display: none;
                }
            }

            & .reviews__items{
                cursor: grab;

                &:active{
                    cursor: grabbing;
                }
            }
        }
    }

    footer {
        & .container {
            & .footer__content {
                flex-direction: column;
            }
        }
    }

    .product {
        & .container {
            & .product__content {
                & .content__main-info {
                    & .main-info__images {
                        width: 100%;
                        justify-content: center;

                        & .images__main-images{
                            margin: 0;
                        }
                    }

                    & .main-info__specifications {
                        & .specifications__item {
                            & .item__choose {
                                max-width: unset;
                            }
                        }
                    }

                    & .main-info__price {
                        & .mobile {
                            & > div {
                                width: 100%;
                                justify-content: space-between;
                            }
                        }
                    }
                }

                & .content__description {
                    & .description {
                        & div {
                            & p {
                                font-size: 14px;
                                max-width: 440px;
                            }
                        }
                    }
                }
            }
        }
    }

    .contacts {
        & .container {
            & .contact__content {
                flex-direction: column;

                & .content__info{
                    flex-direction: row;

                    & .info{
                        width: 50%;
                    }
                }

                & .map{
                    height: 417px;

                    & iframe{
                        height: 100%;
                    }
                }

            }
        }
    }
}

@media screen and (max-width: 680px) {
    & .container {
        max-width: 600px!important;
    }
}

@media screen and (max-width: 560px){
    .container{
        max-width: 500px!important;
    }

    .main-button{
        font-size: 16px;
    }

    .sub-button{
        font-size: 14px;
    }

    .modal, .modal-cart {
        & form, & .modal-success {
            & .inputs {
                flex-direction: column;

                & label{
                    width: 100%;
                }
            }

            & .socials{
                flex-direction: column;
            }

            & .sub-button {
                width: 100%;
            }
        }

        & .modal-success {
            & .socials {
                flex-direction: column;

                & a:last-child{
                    height: 55px;
                }
            }
        }
    }

    .breadcrumbs{
        padding: 20px 0;

        & .container {
            & li{
                font-size: 14px;
                & a{
                    font-size: 14px;
                }
            }
        }
    }

    header {
        & .header-top {
            & .container {
                & > a {
                    font-size: 18px;
                }
            }
        }
    }

    & .crosshair{

        & .circle{
            width: 98px;
            height: 98px;
        }

        &.left-top{
            & .circle{
                left: -41.5px;
                top: 62px;
            }

            & .line{
                &.top{
                    left: 7px;
                    top: -95px;
                }

                &.right{
                    right: -35px;
                    top: 112px;
                }

                &.bottom{
                    left: 7px;
                    bottom: 85px;
                }

                &.left{
                    display: none;
                }
            }
        }

        &.bottom-right{
            & .circle{
                right: 40px;
            }

            & .line{
                &.top{
                    right: 150px;
                }

                &.right{
                    width: 90px;
                }

                &.bottom{
                    right: 150px;
                }

                &.left{
                    right: 210px;
                    width: 75%;
                }
            }
        }

        &.right-top{
            & .circle{
                right: 20px;
                top: 6px;
            }

            & .line{
                &.top{
                    right: 70px;
                    top: -150px;
                }

                &.right{
                    width: 45px;
                    top: 55px;
                }


                &.bottom{
                    right: 70px;
                    bottom: 140px;
                }

                &.left{
                    right: 95px;
                    width: 90%;
                    top: 55px;
                }
            }
        }
    }

    .start {
        background: url(assets/images/start-bg.png) -360px 75px no-repeat #040404;
        & .container {
            padding: 32px 0 19px;
            gap: 191px;
            & .start__main {
                gap: 20px;
                & .main__title {
                    & h1 {
                        font-size: 32px;
                        & span {
                            display: none;
                        }
                    }

                    & p{
                        font-size: 18px;
                    }
                }

                & .main__list {
                    & li {
                        & p {
                            font-size: 14px;
                        }
                    }
                }
            }

            & .start__choose {
                flex-direction: column;
                align-items: center;

                & .main-button{
                    width: 100%;
                    text-align: center;
                }

                & p{
                    max-width: unset;
                    font-size: 14px;
                }
            }
        }

        & .ellipse{
            z-index: 0;
        }

        & .crosshair.bottom-right{
            & .circle{
                display: none;
            }

            .line{
                display: none;

                &.left{
                    display: block;
                    bottom: 160px;
                    width: 100%;
                    right: 0;
                    left: unset;
                }
            }
        }
    }

    .about-us {
        padding-top: 60px;
        & .container {
            & h2{
                font-size: 24px;
            }
            & .about-us__content {
                & .content_items {
                    & .item:first-child, & .item {
                        width: 100%;
                    }

                    & .item{
                        & h3{
                            font-size: 24px;
                        }

                        & p{
                            font-size: 14px;
                        }
                    }
                }

                & .content_text{
                    & div{
                        & p{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    .banner {
        padding-top: 32px;
        & .container {
            padding: 32px;
            & .banner__content {
                gap: 243px;
                & div {
                    & h2 {
                        font-size: 24px;
                    }

                    & ul{
                        & li{
                            font-size: 14px;
                        }
                    }
                }

                & a{
                    width: 100%;
                    font-size: 16px;
                    font-weight: 500;
                    text-align: center;
                }
            }

            & .fire{
                left: -30%;
                width: unset;
                max-width: unset;
            }

            & .dtk{
                top: 15%;
                right: -80px;
                left: unset;
            }

            & .phone{
                scale: 1;
                bottom: -190px;
                right: 20px;
                top: unset;
            }
        }
    }

    .catalog {
        & .container {
            gap: 25px;

            & h2{
                font-size: 24px;
            }

            & .catalog__content{
                width: 100%;
                & .catalog__filter{
                    & li{
                        font-size: 14px;
                    }
                }

                & .items-carousel{
                    cursor: grab;

                    &:active{
                        cursor: grabbing;
                    }
                }

                & .catalog__items {
                    flex-wrap: unset;
                    gap: unset;


                    & .item {
                        width: unset;
                        gap: 10px;

                        & .discount-info{
                            font-size: 10px;
                            top: 4px;
                            left: 4px;
                        }

                        & .item__main-info{
                            & .item_info{
                                & h3{
                                    font-size: 14px;
                                }

                                & div{
                                    & .top-info{
                                        & li{
                                            font-size: 12px;
                                        }
                                    }

                                    & .id-info{
                                        & ul{
                                            & li{
                                                font-size: 12px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        & .item__count{
                            & div{
                                & .main-count{
                                    font-size: 20px;
                                }

                                & .crossed-count{
                                    font-size: 13px;
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    .sale {
        & .container {
            padding: 16px;
            & .sale__content {
                & h2 {
                    font-size: 21px;
                }

                & p{
                    font-size: 16px;
                    font-weight: 500;
                }

                & a{
                    margin-top: 127px;
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                }
            }

            & > img{
                &.dtk{
                    top: -135px;
                    right: -250px;
                    scale: .7;
                }

                &.adapter{
                    top: -15px;
                    right: -105px;
                    scale: .7;
                }
            }
        }
    }

    .reviews {
        padding-top: 60px;
        & .container {
            gap: 28px;
            & .reviews__title{
                & h2{
                    font-size: 24px;
                }
            }

            & .reviews__items {
                & .reviews__item {
                    & .item__title {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 4px;
                        & h3 {
                            font-size: 15px;
                        }
                    }

                    & p{
                        font-size: 14px;
                    }
                }
            }
        }

        & .crosshair{
            margin-top: -20px;
        }
    }

    .product {
        & .container {
            & h1{
                font-size: 24px;
            }
            & .product__content {
                & .content__main-info {
                    justify-content: center;
                    & .main-info__images {
                        flex-direction: column;
                        width: fit-content;
                        & .main-wrapper {
                            width: 100%;
                            & .images__thumbnails {
                                position: relative;
                                & .swiper-wrapper {
                                    flex-direction: row;
                                }

                                &:before{
                                    content: '';
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    background: linear-gradient(270.00deg, rgba(255, 255, 255, 1),rgba(255, 255, 255, 0) 100%);
                                }
                            }
                            & .swiper-button-next{
                                display: none;
                            }
                        }
                    }

                    & .main-info__specifications {
                        & .specifications__item {
                            gap: 12px;
                            & h2 {
                                font-size: 15px;
                            }

                            & .item__choose {
                                & .item {
                                    & label {
                                        font-size: 14px;
                                    }
                                }
                            }

                            &.static {
                                & > div {
                                    & p {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }

                    & .main-info__price {
                        & .mobile {
                            & > div {
                                flex-direction: column;
                            }
                        }
                    }
                }

                & .content__description {
                    flex-direction: column;
                    gap: 32px;

                    & .see-also{
                        & .item{
                            max-width: unset;
                            gap: 28px;

                            & .item__main-info {
                                & .item_info {
                                    & h3 {
                                        font-size: 16px;
                                        color: var(--Main-Black);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .cart {
        & .container {
            & .cart__content {
                & .cart__total {
                    & .total-block {
                        flex-direction: column;
                        width: 100%;
                        align-items: flex-start;

                        & .sub-button{
                            width: 100%;
                            padding: 17.5px 32px;
                            font-size: 14px;
                        }
                    }
                }

                & .cart__items {
                    & .item {
                        flex-direction: column;

                        & .item-info{
                            & > div{
                                min-width: unset;
                            }
                        }

                        & .item-change{
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
    }

    .payment {
        & .container {
            & .payment__content-block {
                gap: 16px;

                & .title{
                    font-size: 24px;
                }

                & .title-block {
                    gap: 16px;
                    & .attention {
                        font-size: 16px;
                    }
                }

                & .content-block{
                    & .subtitle{
                        font-size: 18px;
                    }

                    & ol {
                        & li {
                            font-size: 16px;
                        }
                    }

                    & .under-numeric {
                        font-size: 13px;
                    }
                }

                &.delivery {
                    gap: 16px;
                    & > div {
                        & p {
                            font-size: 13px;
                            color: var(--Main-Black);
                            line-height: 150%;
                        }
                    }
                }

                &.refund {
                    gap: 16px;

                    & p:not(.title) {
                        font-size: 13px;
                    }
                }
            }
        }
    }

    .nf404 {
        padding: 52px 0 60px;
        & .container {
            gap: 20px;
            & .main404 {
                & .fourofour {
                    height: fit-content;
                    align-items: center;
                    & p{
                        font-size: 168px;
                        height: fit-content;
                    }

                    & p:last-child {
                        margin-left: -70px;
                    }

                    & img{
                        max-width: 289px;
                    }

                    & p:first-child {
                        margin-right: -70px;
                    }
                }

                & .sorry{
                    font-size: 24px;
                }
            }

            & .other-pages{
                & p{
                    font-size: 18px;
                }

                & > div{
                    flex-direction: column;
                    gap: 16px;
                    width: 100%;

                    & .main-button{
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
    }

    .contacts {
        & .container {
            gap: 20px;

            & h1{
                font-size: 24px;
            }

            & .contact__content {
                & .content__info {
                    flex-direction: column;
                    gap: 24px;

                    & .info{
                        width: 100%;
                        gap: 12px;
                    }

                    & p {
                        font-size: 14px;
                    }

                    & .main-contacts {
                        & li a {
                            font-size: 14px;
                        }
                    }
                }

                & .map {
                    height: 509px;

                    & iframe {
                        height: 100%;
                    }
                }
            }
        }
    }

    footer {
        padding: 24px 0 27px;
        & .container {
            gap: 28px;

            & .footer__content {
                & .content__contacts {
                    & h2{
                        font-size: 16px;
                    }
                    & .main-contacts {
                        & li a {
                            font-size: 14px;
                        }
                    }
                }

                & .content__information {
                    flex-direction: column;

                    & .main-information, & .products {
                        & h2 {
                            font-size: 16px;
                        }

                        & ul {
                            & li a {
                                font-size: 14px;
                                line-height: 150%;
                            }
                        }
                    }
                }
            }
        }
    }

    .infopage{
        .container{
            & div{
                & p{
                    font-size: 13px;
                }

                & a{
                    font-size: 13px;
                }
            }
        }
    }
}

@media screen and (max-width: 480px){

    & .container{
        max-width: 400px!important;
    }

}

@media screen and (max-width: 380px){

    & .container{
        max-width: 335px!important;
    }

    }
header {
    & .mobile-box {
        & .container {
            & nav {
                & .nav-items {
                    & .nav-modal {
                        & a {
                            & h2{
                               font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}

}