@import '/vendors/nouislider/dist/nouislider.min.css';
@import '/fonts/HelveticaNeueCyr/stylesheet.css';
@import '/fonts/Montserrat/stylesheet.css';
@import '/common.css';
@import '/vendors/swiper/swiper.min.css';
@import '/vendors/slim-select/dist/slimselect.min.css';
@import '/vendors/@fancyapps/ui/dist/fancybox.css';

html {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    width: 100%;
    overflow-x: hidden;
}

:root {
    --text-color: #2D3748;;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    --content-width: 1500px;
    line-height: 1.6;
}

h2 {
    font-weight: 500;
}

@media (max-width: 1550px) {
    :root {
        --content-width: calc(100vw - (10px + 2.58vw));
    }
}

picture {
    line-height: 0;
    display: flex;

    img {
        width: 100%;
    }
}

img {
    max-width: var(--content-width);
}

* {
    box-sizing: border-box;
}

input[type='radio' i] {
    margin: 0;
}

input[type='checkbox'] {
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
        margin: 0;
        padding: 0;
    }
}

.page_title {
    font-size: 22px;
    font-weight: 600;
}

.ss-main .ss-single-selected .placeholder {
    line-height: 1.5em;
}

.custom-page-content {
    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;

        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }
    }
}

a {
    text-decoration: none;
    transition: color 0.5s;
    color: var(--text-color);

    &:hover {
        color: hsl(200, 87.4%, 33.1%);
    }

    &.link {
        color: var(--main-color);
        text-decoration: underline;
    }
}

html,
body {
    margin: 0;
    min-height: 100vh;
}

body {
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 25px;
    padding-bottom: 25px;
}

.content {
    container-name: container;
    container-type: inline-size;
    width: var(--content-width);
}

.text-color-blue {
    color: var(--main-color);
}

body .page-title-block {
    max-width: 100%;
    --padding: 1.7vw;
    margin-top: var(--padding);
    margin-bottom: var(--padding);
    display: flex;
    flex-direction: column;
    gap: var(--padding);

    > * {
        width: var(--content-width);
        margin: 0 auto;
    }

    &.readable-text {
        > * {
            width: 1121px;
        }
    }

    h1 {
        font-weight: 400;
    }
}

.circle-icon {
    width: 44px;
    height: 44px;
    border: 1px solid #eeeeee;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
        width: 80%;
        height: 80%;

        rect,
        path {
            fill: var(--main-color);
        }
    }
}

.arrow-down-svg {
    fill: #c7c7c7;
    width: 1em;
}

.breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    color: #989ba0;

    li:not(:last-child) {
        :after {
            display: inline-block;
            margin-left: 10px;
            content: '/';
            height: 9px;
            width: 5px;
        }
    }

    a {
        text-decoration: underline;
        color: #989ba0;
    }
}

.header__search-or-common-phone {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .search-from-categories {
        display: flex;
        height: 50px;

        .category-filter {
            display: none;
            border-radius: 3px 0 0 3px;
            padding: 0 23px;
            font-size: 14px;
            background-color: #efefef;
            gap: 15px;
            align-items: center;
        }

        .search-input-wrapper {
            display: flex;
            position: relative;
            width: stretch;

            button {
                border: none;
                background-color: transparent;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                width: 60px;
                height: 100%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;

                .search-icon {
                    width: 2em;
                    height: 2em;
                }
            }

            .search-input {
                font-family: Montserrat, sans-serif;
                outline: none;
                padding-left: 20px;
                position: relative;
                font-size: 14px;
                padding-right: 20px;
                width: stretch;
            }
        }
    }

    .free-phone {
        .label {
            color: rgb(100, 100, 100);
        }

        padding: 10px 0;
    }
}

.search-icon {
    width: 1em;
    height: 1em;

    .cls-1 {
        fill: none;
        stroke: var(--main-color);
        stroke-linejoin: round;
        stroke-width: 2px;
    }
}

header {
    line-height: 1;

    .section {
        padding-top: unset;
        padding-bottom: unset;
    }

    .header__site-logo {
        width: 95px;
    }

    .center-block {
        .content {
            display: flex;
            justify-content: space-between;
            padding: 26px 0;
            gap: 15px;
        }

        .header__contacts {
            display: flex;
            gap: 10px;

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

                .phone-row {
                    display: flex;
                    gap: 10px;
                    align-content: center;
                    font-weight: bold;
                    color: rgb(100, 100, 100);
                    font-size: 12px;
                    justify-content: space-between;
                }
            }

            .order-call {
                margin-top: 5px;
                text-align: center;
                font-size: 14px;
                text-transform: uppercase;
                color: var(--main-color);
                text-decoration: underline;
                font-weight: 500;
                cursor: pointer;
            }
        }

        .cart-thumb-block {
            grid-template-columns: repeat(2, max-content);
            align-self: flex-start;
            display: grid;
            gap: 10px;
            color: black;
            text-decoration: none;

            .cart__icon {
                grid-row: span 2;

                svg {
                    path {
                        fill: none;

                        &.cart-svg-path {
                            fill: var(--main-color);
                        }
                    }

                    width: 1.5em;
                    height: 1.5em;
                }
            }

            .cart__more-info {
                grid-row: span 2;
                display: flex;
                align-self: center;
                cursor: pointer;
            }

            .cart__general-sum {
                font-weight: 500;
            }
        }
    }

    .bottom-header-block {
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        z-index: 1;

        .bottom-header-menu {
            ul {
                display: flex;
                justify-content: center;
                margin: 0;
                padding: 0;
                list-style-type: none;

                li {
                    margin: 0;
                    padding: 0;

                    a {
                        display: inline-block;
                        font-size: 12px;
                        text-transform: uppercase;
                        color: black;
                        padding: 30px 50px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}

.top-header-block {
    background-color: #2d2d2d;
    color: white;

    .content {
        display: flex;
    }

    .top-header-menu {
        ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style-type: none;

            li {
                margin: 0;
                padding: 0;

                a {
                    display: inline-block;
                    font-size: 12px;
                    text-transform: uppercase;
                    color: white;
                    padding: 30px 20px;
                }

                &:first-child a {
                    padding-left: 0;
                }
            }
        }
    }

    .right-part {
        margin-left: auto;
        font-size: 15px;
        display: flex;
        gap: 50px;
    }

    .location {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        .icon__location {
            cursor: pointer;
        }

        svg {
            width: 1.2em;
            cursor: pointer;

            rect,
            path {
                fill: white;
            }
        }
    }

    .profile,
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: white;

        svg {
            width: 1.2em;

            rect,
            path {
                fill: white;
            }
        }

        .arrow {
            cursor: pointer;
        }
    }
}

.section {
    .section-title {
        margin-bottom: 1.7vw;
        font-size: 30px;
        font-weight: 400;
    }
}

.breadcrumbs ~ .page-content {
    .section:first-of-type {
        margin-top: 0;
    }
}

footer {
    margin-top: 4vw;
    line-height: 1;

    .footer-top-block {
        background-color: #393939;
        color: white;

        .content {
            padding: 3vw 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            justify-content: space-between;
            gap: 4vw;
        }

        .block {
            display: grid;
            gap: 20px 0;
            grid-template-rows: min-content 1fr;

            .title {
                font-size: 18px;
                text-transform: uppercase;
                font-weight: 500;
            }

            .block_content {
                font-size: 15px;
                line-height: 1.4;

                ul {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;

                    li {
                        line-height: 2;
                    }
                }

                a {
                    color: white;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            &.contacts {
                .block_content {
                    display: grid;

                    .mail {
                        color: var(--main-color);
                        text-decoration: underline;
                        padding: 1em 0;
                    }

                    .locality {
                        line-height: 1.4;
                    }
                }
            }
        }
    }

    .footer-bottom-block {
        padding: 20px 0;
    }
}

.hidden {
    display: none !important;
}

.sn-chunk {
    display: flex;
    gap: 26px;
    align-items: center;

    .sn-icons {
        display: flex;
        gap: 25px;

        img {
            width: 35px;
        }
    }
}

.button {
    cursor: pointer;
    background-color: transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    border-style: solid;
    border-radius: 2px;
    border-width: 1px;
    font-size: 12px;
    padding: 24px 30px;
    align-items: center;
    line-height: 0;
    white-space: nowrap;
    justify-content: center;
    outline: none;

    &.type-1 {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: white;
        border-radius: 3px;
        font-weight: 500;
        letter-spacing: 1px;
    }

    &.type-2 {
        background-color: white;
        border-color: var(--main-color);
        color: var(--main-color);
        border-radius: 3px;
        font-weight: 500;
    }
}

.input.alert-note::placeholder {
    color: red;
    font-weight: 500;
}

.input,
.textarea {
    font-family: Montserrat;
    line-height: 1.4;
    background-color: #f9f9f9;
    border: 1px solid #f1f0f0;
    border-radius: 3px;
    outline: none;
    font-size: 16px;
    padding: 13px;
}

.form__field {
    display: grid;
    gap: 10px;

    &.submit {
        &.with-notes {
            display: flex;
            gap: 30px;

            .note {
                font-size: 13px;
                color: rgb(146, 146, 146);
                line-height: 23px;
            }
        }
    }
}

.form {
    font-size: 15px;

    .title,
    .form__title {
        color: #242424;
        font-size: 22px;
        font-weight: 600;
    }

    [data-validate-errors]:not(.active) {
        display: none;
    }
}

.one-column-form {
    display: grid;
    gap: 25px;
    align-items: flex-start;
    align-content: flex-start;
}

.profile-form {
    display: inline-grid;

    input {
        width: 550px;
    }
}

.with-labels-form {
    button {
        justify-self: flex-start;
    }

    .validate-error-notation {
        padding: 13px;
        color: red;
    }
}

.product-filter-form {
    padding: 2vw 4.5vw;
    display: flex;
    gap: 1.5vw;
    flex-direction: column;
    background-color: #f3f4f5;
    border: 1px solid #f1f0f0;
    border-radius: 3px;

    .custom-select-panel {
        background-color: white;
    }

    .fieldset {
        display: flex;
        gap: 1.5vw;
        justify-content: space-between;
    }

    .field {
        flex-grow: 1;
        gap: 25px;
        display: grid;
        grid-template-rows: 1em 50px;

        &.no-label {
            grid-template-rows: 50px;
            align-content: end;
        }

        &.min-width {
            flex-grow: 0;
        }

        .field__label {
        }

        .field__input {
            /*height: 50px;*/
            .custom-select {
                height: 100%;
            }
        }
    }
}

.banner-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 100px 0;
    position: relative;

    &.banner-one {
        padding: 0;

        .content {
            position: relative;
            padding: 0;
            background-repeat: no-repeat;
            background-position: right;
            background-size: 60% auto;

            .float-image {
                position: absolute;
                top: -30px;
                right: 200px;
                width: 45%;

                &:hover {
                    transform: rotate(15deg);
                    transition: transform 1s;
                }
            }
        }
    }

    .note {
        margin-top: 30px;
        font-size: 15px;
        width: 35%;
        line-height: 1.4;
    }

    .section-title {
        width: 35%;
        font-weight: bolder;
        line-height: 1.4;
        padding-top: 0;
        position: relative;
        margin-bottom: 0;

        .sticker {
            position: absolute;
            top: 0;
            right: -250px;
            font-size: 13px;
            color: white;
            background-color: #fda861;
            border-radius: 5px;
            text-transform: uppercase;
            display: inline-flex;
            padding: 15px 38px;
            transform: skewX(-20deg);

            .sticker__text {
                transform: skewX(20deg);
                font-weight: 400;
            }
        }
    }

    .about-button {
        background-color: white;
        margin-top: 3.5vw;
    }

    .banner-image {
        position: absolute;
        top: 40px;
        right: 300px;
        transition: transform 1s;

        .sticker {
            position: relative;
            z-index: 1;
        }

        &:hover {
            transform: scale(1.3) rotate(10deg);
        }
    }
}

.about-button {
    border-color: var(--main-color);
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    color: black;
    line-height: 12px;
    transition: color 1s;

    &:hover {
        color: var(--main-color);
    }

    .arrow {
        font-size: 18px;
        margin-left: 5em;
        font-family: 'Times New Roman';
        color: var(--main-color);
        font-weight: bold;
        line-height: 12px;
    }
}

.utps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 30px;

    .utp {
        border: 1px solid #f5f5f5;
        align-items: center;
        display: flex;
        flex-direction: row;
        position: relative;
        padding: 0;

        .wrapper {
            padding: 30px 0 30px 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px
        }

        .name {
            font-size: 16px;
            font-weight: 600;
        }

        .description {
            font-size: 14px;
            line-height: 1.5;
        }

        .image {
        }
    }
}

.banner-two {
    background-image: url('/images/banner2-bg.png');
    color: white;

    .section-title {
        width: 50%;
    }

    .note {
        width: 50%;
    }

    .about-button {
        border-color: var(--main-color);

        .arrow {
            color: black;
        }
    }

    .play-video-icon {
        position: absolute;
        right: 430px;
        top: 100px;
    }
}

[data-page-type='main-page'] {
    .banner-one {
        margin-top: 0;
    }

    .section.utps-section {
        padding-top: 30px;
    }
}

.play-video-icon {
    .inner {
        position: relative;

        &:not(:hover) {
            .vestigial {
                opacity: 0.5;
            }
        }

        .vestigial {
            opacity: 1;
            transition: opacity 1s;
        }

        .icon-element {
            cursor: pointer;
        }

        > img {
            &:not(.bearing-element) {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

[data-modal-video-url] {
    cursor: pointer;
}

.youtube-frame-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.main-about-us-section {
    .section-title {
        line-height: 1.4;
    }

    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;

        .content-part {
            display: flex;
            flex-direction: column;
            padding-right: 3vw;

            .text p {
                line-height: 1.6;
            }
        }

        .image-part {
            img {
                width: 100%;
            }
        }
    }
}

@keyframes blink {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: grey;
    }
    100% {
        background-color: transparent;
    }
}

.page-content {
    padding-top: 1em;
    .rails-components-section {
        margin-top: 30px;

        .rails-components-listing {
            grid-area: 1 / 2 / 5 / 3;
        }

        .content {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 30px;
        }

        .search-product-button {
            justify-content: center;
        }
    }

    .contacts-content-section {
        margin-top: 20px;

        .contacts-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;

            .formResponse {
                margin-top: auto;
            }

            .contacts-part {
                .part_title {
                    text-transform: uppercase;
                    font-size: 20px;
                    font-weight: 500;
                    padding-bottom: 60px;
                }

                .part_content {
                    display: grid;
                    gap: 45px;

                    .list {
                        a {
                            color: var(--main-color);
                            text-decoration: underline;
                        }

                        display: grid;
                        gap: 15px;

                        .list__title {
                            font-weight: 500;
                            margin-bottom: 10px;
                            font-size: 18px;
                        }
                    }
                }
            }

            .get-consultation-part {
                display: grid;
                gap: 45px;
                grid-template-columns: 1fr 1fr;
                padding: 25px 0;

                .text {
                    line-height: 1.7;
                }

                .part_title {
                    border-left: 2px solid var(--main-color);
                    padding-left: 1em;
                    font-size: 20px;
                    line-height: 1.5;
                    font-weight: 500;
                    grid-column: span 2;
                }

                .image {
                    grid-row: span 2;

                    img {
                        width: 100%;
                    }
                }

                .invoke-form-button {
                    margin-top: auto;
                    grid-column: 2 / 3;
                }
            }

            .form-part {
                grid-row: span 2;
                display: grid;
                gap: 30px;
                grid-template-rows: min-content 1fr;

                form {
                    border-radius: 3px;
                    margin-top: auto;
                }

                .contacts_map {
                    height: 408px;
                }

                .field.submit {
                    display: grid;
                    grid-template-columns: min-content 1fr;
                    gap: 25px;

                    .note {
                        display: flex;
                        align-items: center;
                        line-height: 2;
                        color: #929292;
                        font-size: 13px;
                    }
                }

                textarea {
                    height: 130px;
                }

                button {
                    justify-self: flex-start;
                }
            }
        }
    }
}

.custom-select-opener {
    font-family: Montserrat;
    line-height: 1.4;
    background-color: white;
    border: 1px solid #f1f0f0;
    border-radius: 3px;
    outline: none;
    font-size: 16px;
    padding: 24px 14px;
    display: flex;
    align-items: center;

    &:after {
        content: url(/images/select-arrow.svg);
        width: 2em;
        height: 2em;
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 1em;
        transition: transform 1s;
    }
}

.is-open .custom-select-opener:after {
    transform: translateY(-50%) rotateX(180deg);
}

.custom-select-panel {
    .custom-select-option {
        border-left: 1px solid #f1f0f0;
        border-right: 1px solid #f1f0f0;
        cursor: pointer;

        &:last-child {
            border-bottom: 1px solid #f1f0f0;
            border-radius: 0 0 3px 3px;
        }
    }
}

.custom-select-container.is-open .custom-select-panel {
    max-height: 20em;
}

.product-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.product-thumb-wrapper {
    display: flex;
    justify-content: center;
}

.product-thumb {
    min-width: 350px;
    position: relative;
    border: 2px solid #f1f0f0;
    border-radius: 5px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;

    .left-stickers {
        left: 0;
        top: 0;
    }

    .right-sticker {
        right: -2px;
        top: -2px;
    }

    .product__name {
        line-height: 1.7;
        text-align: center;
        font-size: 15px;
        margin-bottom: auto;
    }

    .product__picture {
        display: block;
        margin-bottom: 10px;

        img {
            width: 100%;
            height: 220px;
            object-fit: scale-down;
            object-position: center;
        }
    }

    .product__price {
        display: flex;
        justify-content: center;
        gap: 20px;
        font-weight: bold;

        .price {
            font-size: 30px;
            padding: 0;

            .value {
                white-space: nowrap;

                &:after {
                    content: ' ₽';
                }
            }

            &.old .value {
                text-decoration: line-through;
            }
        }
    }

    .product__buy-tool {
        display: grid;
        grid-template-columns: 3fr 4fr;
        gap: 10px;

        .buy-button {
            padding: 0;
            align-items: center;
            justify-content: center;
            letter-spacing: 1px;
            cursor: pointer;
        }
    }

    .product__send-question {
        text-align: center;

        a {
            font-size: 12px;
            text-transform: uppercase;
            color: var(--main-color);
            text-decoration: underline;
            cursor: pointer;
            font-weight: 500;
        }
    }
}

.left-stickers {
    position: absolute;

    .sticker {
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        padding: 18px 12px;

        &.is_available {
            color: #87cf67;
        }
    }
}

.right-sticker {
    position: absolute;

    .stock {
        font-weight: 600;
        font-size: 11px;
        color: white;
        background-color: #ff1a1a;
        text-transform: uppercase;
        padding: 14px 18px;
        border-radius: 3px;
    }
}

.change-tool {
    flex-direction: column;
    display: flex;
    gap: 10px;
    align-items: flex-start;

    .change-tool_row {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;

        input[type='radio'] {
            display: none;

            & ~ .pseudo-radio {
                display: inline-block;
                border: 1px solid rgb(100, 100, 100);
                border-radius: 50px;
                width: 22px;
                min-width: 22px;
                height: 22px;
                position: relative;
            }

            &:checked ~ .pseudo-radio:after {
                display: block;
                position: absolute;
                width: 8px;
                height: 8px;
                content: '';
                background-color: var(--main-color);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50px;
            }
        }
    }
}

input[type='checkbox'] {
    width: 22px;
    height: 22px;
    margin: 0;
    border: none;
}

.product-main-part {
    .price {
        display: flex;
        gap: 30px;

        .prices-rows {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .default-price {
            color: rgb(100, 100, 100);

            .price-label {
                text-decoration: line-through;
            }
        }
    }

    .full-weight-part {
        grid-column: 1 / 3;
    }

    .column {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .pictures-part {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .additions-images-part {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 5px;
            grid-auto-flow: dense;

            img {
                border: 2px solid #f1f0f0;
                border-radius: 5px;
                width: 100%;
                cursor: zoom-in;
            }
        }
    }

    .content {
        display: grid;
        grid-template-columns: min-content 1fr;
        gap: 50px;
        grid-auto-flow: row;

        .main-image-part {
            position: relative;
            border: 2px solid #f1f0f0;
            border-radius: 5px;
            display: flex;

            .main-picture-container {
                display: flex;
                padding: 5px;

                img {
                    object-fit: scale-down;
                    width: 640px;
                }
            }

            .left-stickers {
                top: 3px;
                left: 3px;
            }

            .right-sticker {
                top: 10px;
                right: 10px;
            }

            picture {
                display: flex;

                img {
                    object-position: center;
                    object-fit: scale-down;
                    width: 640px;
                    height: 440px;
                }
            }
        }

        .buy-tools-part {
            .price {
                min-height: 36px;
                font-size: 24px;
                font-weight: 600;
                margin-bottom: 15px;
                flex-wrap: wrap;

                .not-exist-note {
                    font-size: 18px;
                }
            }

            .post-price-note {
                margin-bottom: 35px;
            }

            .variants {
                margin-bottom: 25px;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 15px;
                }
            }

            .options {
                margin-bottom: 25px;
            }

            .buttons {
                display: flex;
                gap: 10px;

                button {
                    cursor: pointer;
                }
            }
        }

        .storages,
        .characteristics {
            .title {
                font-weight: 600;
                font-size: 18px;
                margin-bottom: 25px;
            }
        }

        .storages {
            display: flex;
            flex-direction: column;
            gap: 25px;

            .storage-list {
                display: flex;
                flex-direction: column;
                gap: 3px;
                container-type: inline-size;
                .storage {
                    border-radius: 5px;
                    display: grid;
                    grid-template-columns: 1fr min-content;

                    &.partner-storage {
                        grid-template-columns: 1fr min-content min-content;
                    }

                    font-size: 14px;
                    background-color: #f3f4f5;
                    align-items: center;

                    > * {
                        padding: 22px 18px;
                    }

                    &.storage__head {
                        text-transform: uppercase;
                        background-color: #e8e9e9;
                        font-weight: 600;
                        font-size: 13px;
                        color: var(--text-color);
                    }

                    .button-cell {
                        padding: 10px 18px;
                    }

                    .amount {
                        border-radius: 5px;
                        color: white;
                        text-transform: uppercase;
                        width: 105px;
                        height: 30px;
                        display: flex;
                        font-size: 13px;
                        justify-content: center;
                        align-items: center;

                        &.under-order {
                            background-color: #fa6262;
                        }

                        &.in-stock {
                            background-color: #52ca7f;
                        }
                    }
                }

                @container (max-width: 500px) {
                    .storage.partner-storage {
                        display: grid!important;
                        grid-template-columns: 1fr 1fr;
                        grid-template-rows: 2fr 1fr;
                        gap: 0 10px;
                        .storage-name {
                            grid-column: 1 / 3;
                            padding-top: 0;
                            padding-bottom: 0;
                        }
                        .amount {
                            grid-column: 1 / 1;
                            grid-row: 2 / 3;
                            width: 100%;
                            height: 100%;
                        }
                        .button-cell {
                            grid-column: 2 / 2;
                            grid-row: 2 / 3;
                            text-align: end;
                            padding: unset;
                            height: 100%;
                            .button.type-1 {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }

        .characteristics-list {
            display: flex;
            gap: 3px;
            flex-wrap: wrap;

            > * {
                border: 1px solid #f1f0f0;
                border-radius: 5px;
                padding: 16px 20px;
                flex-grow: 1;
                line-height: 1.5;
            }

            .additional-OEMs {
                width: 100%;
                position: relative;
            }

            .key {
                font-weight: 600;
                font-size: 15px;

                &:after {
                    content: ':';
                }
            }

            .value {
                &:before {
                    content: ' ';
                }
            }
        }

        .tabs-block {
            grid-column: span 2;
        }
    }
}

[data-tabs-block] {
    [data-panes] {
        height: 50px;
        display: flex;
        width: 100%;
        border-top: 1px solid var(--grey-color);
        border-bottom: 1px solid var(--grey-color);
        justify-content: space-around;

        [data-pane] {
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 0 15px;
            text-transform: uppercase;
            color: #585858;
            white-space: nowrap;
            font-size: 15px;
            border-bottom: 1px solid transparent;
            border-top: 1px solid transparent;
            font-weight: 500;

            i {
                margin-right: 10px;
            }

            &.active {
                color: var(--main-color);
            }
        }
    }

    [data-containers] {
        padding-bottom: 45px;

        [data-container] {
            padding-top: 45px;
            max-width: 100%;
            overflow: hidden;

            &:not(.active) {
                display: none !important;
            }
        }
    }
}

.similar-products-section {
    .title {
        font-size: 25px;
        font-weight: 500;
        margin-bottom: 15px;
    }
}

.ss-main .ss-single-selected {
    height: 100%;
}

.categories-tiles-section {
    .categories {
        display: grid;
        grid-template-columns: repeat(auto-fit, 350px);
        gap: 25px;

        .category-tile {
            border: 2px solid #f1f0f0;
            padding: 15px;
            display: grid;
            grid-template-rows: min-content max-content;
            gap: 15px;
            background-color: rgb(255, 255, 255);
            transition-property: background-color, box-shadow;
            transition-duration: 200ms;

            .label {
                font-weight: 600;
                color: black;
                line-height: 1.2;
                text-align: center;
            }

            .image {
                flex-grow: 1;
                text-decoration: none;

                img {
                    width: 100%;
                    height: 218px;
                    object-fit: scale-down;
                    object-position: center;
                }
            }

            &:hover {
                box-shadow: 0 0 5px 3px #f1f0f0;
            }
        }
    }
}

#main-page-h1 {
    font-size: inherit;
    display: inline;
}

.text-content {
    * {
        line-height: 1.4;
    }
}

.head {
    background-color: #2d2d2d;
    color: white;
    font-weight: 500;
    border-radius: 3px;
    font-size: 13px;
    text-transform: uppercase;
    height: 72px;
}

.row {
    display: grid;
    height: 72px;
    align-items: center;

    > div {
        padding: 5px 10px;
    }
}

.listing-table {
    .table-body {
        display: flex;
        flex-direction: column;
        gap: 3px;

        .row {
            background-color: #f3f4f5;
        }

        .change-amount-tool {
            border: 1px solid #eae9ea;
            border-radius: 3px;
        }
    }
}

.rails-components-table {
    .row {
        grid-template-columns: 150px 2fr 1fr 1fr 1fr 1fr 1fr;
    }

    .buy-button {
        height: 57px;
    }

    .to-product-page {
        text-decoration: underline;
        color: var(--text-color);
    }
}

.filter {
    .body {
        display: flex;
        background-color: #f3f4f5;
        flex-direction: column;
        padding: 30px;
        gap: 10px;
    }

    .filer-row {
        display: flex;
        align-items: center;
        gap: 18px;
    }
}

.checkboxes-filter {
    .filer-row {
        cursor: pointer;
    }
}

.characteristics-filter {
    .clear {
        cursor: pointer;
    }

    .body {
        gap: 15px;
    }

    .filer-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .filter.range {
        gap: 15px 10px;

        .noUi-handle {
            cursor: pointer;
        }

        display: grid;
        grid-template-columns: 1fr 1fr;

        .nouislider {
            grid-column: span 2;
        }

        .max-value {
            text-align: right;
        }
    }

    .typing-inputs {
        padding-top: 8px;
        display: flex;
        gap: 5px;
        flex-direction: column;

        .typing-inputs_row {
            display: flex;
            gap: 8px;
            align-items: center;

            label {
                min-width: 30%;
            }

            .input {
                flex-grow: 1;
                background-color: white;
                font-weight: 500;
                padding: 8px;
                min-width: 100px;
            }
        }
    }

    .delimiter {
        display: block;
        height: 1px;
        background-color: #e8e8e8;
    }
}

.rails-components-listing {
    .table-body {
        .name {
            line-height: 1.3;
            text-align: left;
        }
    }
}

.variant-hidden-picture {
    display: none;
}

.event-note {
    display: flex;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    color: #2d3748;
    font-weight: 600;
    transition: opacity 3s;

    &.success {
        background-color: hsl(143, 53%, 86%);
        border-color: hsl(143, 53%, 56%);
    }
}

.damping {
    opacity: 0;
}

.grid-table {
    display: grid;

    .head__cell {
        background-color: #2d2d2d;
        color: white;
        font-weight: 500;
    }

    .cell {
        padding: 15px;
        display: flex;
    }
}

.purchases-list {
    grid-template-columns: min-content 1fr 1fr 2fr min-content .5fr .5fr min-content;
    max-width: var(--content-width);

    .purchases-row {
        display: contents;
    }

    .name {
        align-items: flex-start;
    }

    .body__cell {
        &.article_oem {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        &.storages {
            flex-direction: column;
            gap: 10px;
        }
    }

    .remove-purchase-button {
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        border-radius: 45px;
        cursor: pointer;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.6);

        svg {
            width: 100%;
            height: 100%;
            transform: rotate(45deg);

            path {
                fill: rgba(0, 0, 0, 0.6);
            }
        }

        &:hover {
            border-color: rgba(255, 0, 0, 0.6);

            path {
                fill: rgba(255, 0, 0, 0.6);
            }
        }
    }

    .remove_purchase {
        text-align: center;
        justify-content: center;
    }
}

.cart-order-properties-section {
    .head__cell {
        margin-bottom: 10px;
    }

    .body__cell {
        padding: 0;

        .form__field {
            width: 100%;
        }
    }

    .grid-table {
        gap: 25px;
    }

    .radio-variants .form__field {
        align-items: center;
        display: flex;
        gap: 10px;
    }

    .content {
        display: grid;
        grid-template-columns: .5fr 1fr .5fr;
        gap: 30px;
    }

    .delivery {
        .body__cell {
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: unset;
        }

        .delivery-method {
            padding: 13px 0;
            display: flex;
            flex-direction: column;
            gap: 15px;

            .delivery-method__body {
                line-height: 1.5;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
        }

        .pickup-points {
            li {
                margin-left: 10px;
                line-height: 1.8;
            }
        }

        #delivery-map {
            width: 100%;
            height: 300px;
        }
    }
}

.cart-summary-information-section {
    .content {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 25px;
    }

    .manager-part {
        display: flex;
        gap: 25px;

        .manager-photo {
            width: 300px;
        }

        .description {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .title {
            font-weight: 500;
            font-size: 20px;
        }
    }

    .order-part {
        display: flex;
        flex-direction: column;
        gap: 25px;

        .contract-success {
            align-items: center;
            cursor: pointer;

            input {
                width: 1.2em;
                height: 1.2em;
                margin-right: 7px;
            }
        }

        .send-order-button {
            margin-top: auto;
        }
    }
}

.form-validations-note {
    border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.3);
    padding: 15px;
    border-radius: 5px;

    li {
        line-height: 2;

        &:before {
            content: '! ';
            font-weight: bold;
        }
    }

    .block_title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 2;
    }
}

.empty-cart {
    .content {
        text-align: center;
    }

    .back {
        font-size: 18px;
    }
}



.order-properties {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    gap: 15px;

    .purchases {
        margin-top: 45px;
    }
}

.no-wrap {
    white-space: nowrap;
}

.center {
    text-align: center;
}

.all-results {
    text-align: center;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 10px;
}

input[type='search']::-webkit-search-decoration:hover,
input[type='search']::-webkit-search-cancel-button:hover {
    cursor: pointer;
}

[data-fancybox] {
    cursor: zoom-in;
}

a.to-edit-page {
    display: block;
    position: fixed;
    top: 150px;
    right: 5vw;
    background-color: rgba(255, 0, 0, 0.8);
    font-weight: bold;
    color: white !important;
    border-radius: 5px;
    z-index: 999;
    padding: 15px;
    text-decoration: none;
}

.repair-prices-list.listing-table {
    .row {
        grid-template-columns: 1fr 1fr 1fr 50px 200px;
    }
}

[data-page-type='repair-page'] {
    .prices {
        margin-top: calc(10px + 1vw);
    }
}

.articles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 15px;

    .article {
        position: relative;

        &.big {
            .article-image {
                padding-bottom: 0;
            }
        }

        .article-image {
            width: 100%;
            height: 100%;
            padding-bottom: calc(20px + 2vw);
            object-fit: contain;
        }

        .text-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            min-height: 4vw;
            background-color: rgba(255, 255, 255, 1);
            padding: 10px 0;
            font-size: 14px;
            font-weight: 500;

            .name {
                color: #00171f;
                text-decoration: none;
                position: relative;
                display: inline-block;
                padding-bottom: 5px;
                margin-bottom: 5px;

                &:after {
                    content: '';
                    display: block;
                    height: 1px;
                    width: 100px;
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    background-color: #a1a1a1;
                }
            }

            .make-date {
                color: #a1a1a1;
            }
        }

        &.big {
            grid-column: span 3;
            grid-row: span 2;

            .text-content {
                height: 150px;
                background-color: rgba(53, 53, 53, 0.95);
                color: #e6e6e6;
                font-size: 18px;
                padding: 40px 50px;
                position: absolute;

                .name {
                    padding-bottom: 5px;
                    margin-bottom: 5px;
                    color: white;

                    &:after {
                        content: '';
                        display: block;
                        height: 1px;
                        width: 100px;
                        position: absolute;
                        bottom: -1px;
                        left: 0;
                        background-color: #8f8f8f;
                    }
                }

                .make-date {
                    color: #8f8f8f;
                }
            }
        }
    }
}

.excess-tool-block {
    padding: calc(15px + 1vw);
    display: flex;
    justify-content: center;
}

[data-excess-state='0'] [data-excess-tool] {
    display: none;
}

[data-excess-state='1'] [data-excessed-element='1'] {
    display: none;
}

.readable-text {
    max-width: 1121px;
}

.personal_area_nav {
    font-size: 12px;
    text-transform: uppercase;
    margin: 25px 0;

    ul {
        display: flex;
        gap: 3px;
    }

    li {
        border: #e1e1e1 solid 1px;
        border-radius: 3px;
        background-color: #f6f5f5;
        font-weight: 500;
        display: flex;

        a {
            padding: 18px 35px;
        }

        &.active {
            background-color: var(--main-color);
            color: white;
            border-color: var(--main-color);
        }
    }
}

a.wrapper {
    color: inherit;
    text-decoration: inherit;
}

[data-page-type='product-category'] .description-section {
}

.video-section {
    .title {
        margin-bottom: 10px;
    }
}

[data-page-type='repair-page'] {
    .content-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .text-block {
        background-color: #f3f4f5;

        .inner {
            padding: 130px 100px 130px 0;
            width: calc(var(--content-width) / 2);
            margin-left: auto;
            line-height: 1.5;
        }

        .title {
            font-size: 30px;
            margin-bottom: 1em;
        }
    }

    .video-section .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;

        .title {
            font-size: 30px;
            margin-bottom: 1em;
        }
    }
}

.table-type-2 {
    .table-head {
        background-color: #f3f4f5;
    }

    .table-cell {
        padding: 20px;
    }

    .table-row {
        display: grid;
    }

    .table-standard-row {
        border-bottom: 1px solid #efefef;
    }
}

.orders-table {
    .table-row {
        grid-template-columns: 2fr 1fr 2fr 1fr 5fr;
    }

    .table-standard-row {
    }

    .order-state {
        font-weight: 600;

        &[data-order-state-slug='new'] {
            color: #8ec978;
        }

        &[data-order-state-slug='sobiraetsya'] {
            color: #1e87f0;
        }

        &[data-order-state-slug='v-puti'] {
            color: #1e87f0;
        }

        &[data-order-state-slug='closed'] {
            color: rgb(100, 100, 100);
        }

        &[data-order-state-slug='otmenen'] {
            color: rgb(100, 100, 100);
        }

        &[data-order-state-slug='awaiting-receipt'] {
            color: orangered;
        }
    }

    .order-date {
        font-size: 16px;
        font-family: monospace;
    }

    .order-price {
        font-size: 16px;
        font-family: monospace;
    }

    .order-id {
        font-size: 16px;
        font-family: monospace;
    }

    .order-items {
        display: flex;
        flex-direction: column;
        gap: 5px;
        line-height: 1.2;
    }
}

.personal-area {
    .section:not(personal-area-navigation) {
        margin-top: 0;
    }
}

.send-message-tool {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 70%;

    .message-row {
        display: grid;
        grid-template-columns: 1fr min-content;
    }

    .contact-row {
        font-size: 12px;
        display: flex;
        gap: 15px;
        font-style: italic;

        input {
        }
    }

    .button-place {
        display: flex;
        align-items: flex-end;
    }

    .message-field {
        padding: 13px 0;
        outline: none;
        border-bottom: 1px dashed rgba(150, 150, 150);
        white-space: pre;
    }

    .send-message-button {
        background: url('/images/paper_plane.svg') no-repeat center;
        background-size: 100%;
        border: none;
        border-radius: 500px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
}

.messages {
    height: 300px;
    overflow-y: scroll;
    width: 70%;
    border-radius: 15px;
    margin-bottom: 55px;

    .messages_inner {
        min-height: 300px;
        background-color: rgba(38, 169, 240, 0.7);
        padding: 15px;

        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        box-shadow: inset 0 0 10px 10px hsl(201, 87%, 60%);
    }

    .message {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 10px;
        background-color: white;
        padding: 10px;
        min-width: 10%;

        .message_date {
            text-align: right;
            font-weight: 500;
            color: rgba(150, 150, 150, 0.7);
            font-size: 14px;
        }

        &[data-direction='2'] {
            .message_author {
                color: var(--green-color);
            }
        }

        &[data-direction='1'] {
            .message_author {
                color: var(--main-color);
            }
        }

        .message_author {
            font-weight: bold;
            font-size: 14px;
        }
    }
}

.messages-section {
    overflow: hidden;

    .message_content {
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }
}

.reviews__empty {
    font-size: 22px;
}

.make-review {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .field {
        display: grid;
        grid-template-columns: 200px 600px;
        gap: 30px;

        .field__name {
            font-size: 20px;
            line-height: 24px;
            font-weight: 500;
            white-space: nowrap;
        }

        .textarea {
            min-height: 130px;
        }
    }

    .form__submit {
        width: 100%;
    }

    textarea {
        width: 100%;
    }
}

.rate-stars {
    display: flex;
    grid-gap: 15px;

    .rate-start-icon {
        fill: #e8e8e8;
        cursor: pointer;
    }

    &:not(:hover) {
        .rate-start-icon.active {
            fill: var(--main-color);
        }
    }

    &:hover {
        .rate-start-icon.memory-hovered {
            fill: var(--main-color);
        }
    }
}

.rate-empty-note {
    color: red;
    margin-top: 5px;
    overflow: hidden;
    transition: height 0.5s,
    margin-top 0.5s;

    &[data-active-state='0'] {
        height: 0;
        margin-top: 0;
    }
}

.review-complete {
    .back {
        font-weight: 500;
        margin-top: 15px;
    }
}



.reviews__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.review {
    line-height: 24px;
    font-size: 14px;

    &:not(:last-child) {
        border-bottom: 1px solid var(--grey-color);
        padding-bottom: 20px;
    }

    .metadata {
        display: flex;

        .to-product {
            font-weight: bold;
        }

        .user-name {
            font-weight: bold;
        }

        .make-date {
            margin-left: auto;
            color: rgb(160, 160, 160);
            font-weight: 600;
        }
    }

    .rating {
        display: flex;
        gap: 3px;

        .star svg {
            width: 15px;
            fill: #e8e8e8;

            &.active {
                fill: var(--main-color);
            }
        }
    }
}

dl {
    display: block;

    dt,
    dd {
        display: inline;
    }

    dt {
        font-weight: bold;
    }

    dd {
        margin-left: 8px;
    }
}

.moderate-state {
    .on-moderate {
        color: var(--main-color);
    }

    .access {
        color: var(--green-color);
    }

    .reject {
        color: var(--red-color);
    }
}

[data-page-type='page-404'] {
    .main-section {
        .content {
            padding-top: 100px;
            display: flex;
            gap: 200px;

            .left {
                display: flex;
                flex-direction: column;
                gap: 25px;

                .buttons {
                    display: flex;
                    gap: 10px;

                    .button {
                        padding: 30px 20px;
                        border-radius: 0;

                        &.type-2 {
                            color: black;
                        }
                    }
                }
            }

            .title {
                font-size: 30px;
                color: black;
                margin: 0;
            }

            .description {
                color: #768085;
            }
        }
    }
}

.stocks {
    display: flex;
    flex-direction: column;

    .stock {
        display: grid;
        grid-template-columns: 300px 1fr;
        padding: 20px 0;
        gap: 25px;
        border-bottom: 1px solid hsla(0, 0%, 83.9%, 0.5);

        &:first-of-type {
            border-top: 1px solid hsla(0, 0%, 83.9%, 0.5);
        }

        .about-button {
            float: right;
            padding-top: 10px;
            padding-bottom: 10px;

            .arrow {
                margin-left: 15px;
            }
        }

        .stock__content {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .stock__image img {
            width: 100%;
        }

        .content__title {
            font-size: 26px;
            text-decoration: none;
            font-weight: 500;
        }

        .content__description {
            text-decoration: none;
            line-height: 1.5;
        }

        .content__dates {
            margin-top: auto;
            color: #989ba0;
        }
    }
}

[data-page-type='stock-page'] {
    .main-image {
        padding: 0 25px 25px 0;
        float: left;
    }

    .page-content .dates {
        padding-top: 25px;
        font-style: italic;
        font-weight: 500;
    }
}

.footer-top-block .link {
    text-decoration: underline;
}

.modal__bg {
    background-color: rgba(0, 0, 0, 0.3);
    justify-content: center;
    align-items: center;
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;

    .modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 0 14.7305px rgba(0, 0, 0, 0.25);
        background: #ffffff;
        padding: 20px;
        position: relative;
        transition: width 0.5s;
        max-width: 640px;
        border-radius: 10px;

        .modal__close {
            padding: 5px;
            background-color: white;
            position: absolute;
            top: 10px;
            right: 10px;
            width: 25px;
            height: 25px;
            cursor: pointer;
        }

        .modal__text {
            font-size: 16px;
        }

        .modal__button {
            padding: 12px 38px;
        }
    }
}

.formResponse {
    color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    padding: 30px;
}

.modal-form {
    border-radius: 3px;

    .form__title {
        padding-right: 30px;
    }

    .input {
        width: 100%;
    }

    .input-wrapper {
        display: flex;
        justify-content: center;
    }

    .input-wrapper button {
    }
}

.alert-danger {
    color: red;
}

.show-more-tool-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.note-button-label {
    background-color: #fa6262;
    border-radius: 5px;
    color: white;
    padding: 10px 15px;
    text-transform: uppercase;
    display: inline-flex;
    font-size: 13px;
    justify-content: center;
    align-items: center;
}

.certificates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 320px));
    gap: 1vw;

    .certificate {
        display: block;
    }
}

[data-page-type='contacts-page'] {
    .maps {
        display: flex;
        gap: 20px;
        flex-direction: column;

        .map {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .map__name {
                font-weight: 600;
            }
        }
    }
}

.partners-table {
    margin-top: 15px;

    thead {
        font-weight: bold;

        td {
            text-align: center;
        }
    }

    border-collapse: collapse;

    td {
        padding: 5px;
        border: 1px solid black;
    }
}

.is_success.true {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/images/success.png');
    width: 30px;
    height: 40px;
}

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

    .subdivision {
        line-height: 1.6;

        .subdivision__name {
            font-weight: 500;
        }
    }
}

.additional-info {
    background-image: url('/images/info-circle-svgrepo-com.svg');
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.modal-repair-note {
    max-width: 400px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .repair-note {
        white-space: pre-wrap;
    }
}

.order-user-req-table {
    line-height: 2;
    margin-top: 20px;
}

[data-page-type='personal-area-profile'] {
    .note {
        color: red;
        padding: 15px 0;
        font-weight: 600;

        a {
            text-decoration: underline;
        }
    }
}

.login-page__logo {
    width: 80px;
}

.not-register-note {
    color: red;
    font-weight: 500;

    a {
        text-decoration: underline;
    }
}

.text-content a {
    color: var(--main-color);
    text-decoration: underline;
}

.customer-groups-prices-for-admin {
    padding-top: 25px;
    font-weight: 500;
    gap: 10px;
}

body .shadow-sm {
    box-shadow: 0 0 5px 0 #000000;
}

.slider.news_slides {
    padding: calc(1.5vw + 5px) 0;

    .swiper-slide__inner {
        display: flex;
    //border: 1px solid rgba(38, 169, 240, 0.5);
        box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.2);
        border-radius: 2px;

        .title {
            padding: 5px 10px;
            font-weight: 500;
            flex-grow: 1;
        }

        .image {
            display: flex;

            img {
                width: 180px;
                height: 120px;
                object-fit: cover;
            }
        }
    }

    .swiper-pagination {
        display: flex;
        justify-content: center;
        gap: 3px;
        padding: 15px 0;
        --size: 8px;

        .swiper-pagination-bullet {
            width: var(--size);
            height: var(--size);
            border-radius: 5px;
            border: 1px solid var(--main-color);

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

.header__logo {
    display: grid;
    grid-template-columns: min-content 150px;
    grid-template-rows: min-content 1fr;
    gap: 10px;

    .header-logo__url {
        display: contents;
    }

    .header-logo__image {
        grid-row: span 2;
    }

    .header-logo__title {
        font-weight: 600;
        text-transform: uppercase;
    }

    .header-logo__description {
        font-size: 14px;
        line-height: 1.2em;
    }
}

.change-city-modal {
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;

    .change-city-modal__title {
        font-size: 18px;
        font-weight: 600;
        color: #434343;
    }

    .change-city-list {
        padding: 0 13px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        border-left: 1px solid #CBCBCB;
        font-size: 16px;
    }
}

.yandex-sharing-block {
    padding-top: 25px;
}

.product-description {
    white-space: pre-wrap;
    line-height: 1.4;
}

.form__subtitle {
    &.important {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }
}

.delivery-info .description {
    margin-top: .5em;
    padding: .3em .5em;
    font-style: italic;
    background-color: rgba(150, 150, 150, .2);
    font-size: .9em;
}

@media (max-width: 768px) {
    .banner-section {
        &.banner-one {
            .about-button {
                object-fit: contain;
                .arrow {
                    margin-left: 20px;
                }
            }
        }
    }

    .main-about-us-section {
        .section-title {
            line-height: 1.4;
        }

        .content {
            display: unset;
        }
    }

    .section.cart-summary-information-section{
        .content{
            display: flex;
            flex-direction: column;
        }
    }
}

.category-404 {
    padding-top: 0;

    .content {
        container-type: inline-size;
        display: flex;
        justify-content: space-between;

        .right {
            @container (width < 850px) {
                display: none;
            }
            flex-grow: 1;
            display: flex;
            justify-content: center;
        }
    }

    .description {
        color: #768085;
        padding-bottom: 15px;
    }
}

.products-with-filters-section.table-type {
    padding: 15px;

    .characteristics-filter {
        position: sticky;
        top: 15px;
    }

    .title {
        padding: .75rem .5rem .75rem .5rem;
        background-color: var(--bg-grey-color);
        line-height: 1.75rem;
        color: white;

    }

    table {
        line-height: 1.5rem;
        border-collapse: collapse;

        tbody {
            tr:nth-child(odd) {
                background-color: rgb(229, 231, 235);
            }
        }

        td, th {
            padding: 1px .5rem 1px .5rem;
            border: 1px solid rgb(209, 213, 219);
        }
    }
}

[data-tooltip] {
    position: relative;

    [data-hidden-part] {
        display: none;
    }

    &:hover [data-hidden-part] {
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        border-radius: .5rem;
        z-index: 1;
        box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2);
        display: flex;
    }
}

@media (width < 500px) {
    [data-tooltip]:hover [data-hidden-part] {
        transform: translate(-50%, -50%);
    }
}

.products-with-filters-section.table-type {

    .notify-admission-button {
        border: none;
        background-color: var(--main-color);
        color: white;
        border-radius: 3px;
        padding: 5px 10px;
        cursor: pointer;

        &:hover {
            filter: hue-rotate(-30deg);
        }
    }

    .content {
        width: 100%;
    }

    .products-table {
        width: 100%;
        height: 0;

        tbody {
            filter: blur(0px);
            transition: filter 1s;

            &.blur {
                filter: blur(5px);
            }
        }

        .analog-articles-cell {
            .visible-part {
                display: block;
                cursor: help;
                background-image: url("/images/svg/list-ul-alt-svgrepo-com.svg");
                background-position: center;
                background-size: 34px 34px;
                background-repeat: no-repeat;
                height: 100%;
            }
        }
    }

    .analog-articles-modal {
        width: 50vw;
        padding: .5rem;
    }
}

.image-placeholder {
    background-image: url("/images/camera.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 34px;
}

.to-messenger {
    position: fixed;
    bottom: 80px;
    right: 50px;
    cursor: pointer;
    display: flex;
    gap: 11px;
    align-items: center;
    border-radius: 15px;
    padding: 10px;
    z-index: 100;
    .icon {
        width: 30%;
    }

    .label {
        text-align: center;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 12px;
        padding: 10px;
        background-color: white;
        border: 1px solid var(--main-color);
        border-radius: 15px;
    }
}

[data-device-type="desktop"] .to-messenger {
    .icon {
        background-color: #f3f4f5;
        padding: 15px;
        border-radius: 20px;
    }
}

.pagination-nav {
    position: sticky;
    bottom: 0;
}

.pagination {
    display: flex;
    gap: 10px;
    justify-content: right;
    padding: 25px 0;
    font-weight: bold;
    border-top: 2px solid rgb(209, 213, 219);
    background-color: white;

    li .item {
        padding: .5rem .75rem;
        border-radius: 3px;
        background-color: rgb(209, 213, 219);
    }

    li.active .item {
        background-color: var(--bg-grey-color);
        color: white;
    }
}

.filter-label {
    font-weight: 700;
    .question-icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        cursor: pointer;
        &:after {
            content: ""; /* Обязательно оставляем пустым */
            display: block; /* Или inline-block, чтобы задать размеры */
            width: 100%;
            height: 100%;
            background-image: url(/images/question-icon.png);
            background-size: contain; /* Картинка масштабируется без искажений и полностью помещается */
            background-repeat: no-repeat;
            background-position: center;
        }
    }
}

.sort-tool {
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    select {
        display: none;
    }

    .sort-icon {
        display: block;
        width: 24px;
        height: 24px;

        &[data-selected-value] {
            transition: transform .5s;
        }

        &[data-selected-value="none"] {
            background-image: url("/images/svg/sort-order-none.svg");
        }

        &[data-selected-value="asc"], &[data-selected-value="desc"] {
            background-image: url("/images/svg/sort-order-directed.svg");
        }

        &[data-selected-value="desc"] {
            transform: rotate(180deg);
        }
    }
}

.blur {
    filter: blur(1px);
}

.centring-wrapper {
    display: flex;
    justify-content: center;
}

.cart-purchase-tool {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;

    &[data-amount] {
        background-color: rgb(167, 243, 208);
        transition: background-color .5s;
    }

    &[data-amount="0"] {
        background-color: transparent;
    }

    .change-amount-tool-table-view-category {
        width: 2.5em;
        height: 2.5em;
        display: flex;
        justify-content: center;
        font-weight: 600;
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
        cursor: pointer;
        border: none;

        &.minus {
            background-image: url("/images/svg/minus.svg");
        }

        &.plus {
            background-image: url("/images/svg/plus.svg");
        }
    }

    .amount-input {
        border: none;
        width: 2.5em;
        background-color: transparent;
        text-align: center;
        outline: none;
        font-size: 16px;
    }
}

.checkbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auto-compare-tiles-filter {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 60px;
    @container container (width < 720px) {
        padding: 18px;
        gap: 10px;
    }

    background-color: #F1F0F0;

    &[data-show-tiles-state="show-importance"] {
        .tile:not(.importance) {
            display: none;
        }

        [data-toggle-importance-vision-tool] .show-importance {
            display: none;
        }
    }

    &[data-show-tiles-state="show-all"] {
        [data-toggle-importance-vision-tool] .show-all {
            display: none;
        }
    }

    &[data-show-tiles-state="search"] {
        .tile.hidden-for-search {
            display: none;
        }

        [data-toggle-importance-vision-tool] {
            display: none;
        }
    }

    .filter__head {
        display: flex;
        gap: 15px;
        @container container (width < 720px) {
            flex-direction: column;
            gap: 10px;
        }
        justify-content: space-between;
        align-items: center;

        .back {
            font-weight: 700;
            gap: 10px;
            margin-left: auto;
            display: flex;
            align-items: center;

            svg path {
                fill: var(--main-color) !important;
            }
        }

        .search {
            @container container (width < 720px) {
                width: 100%;
            }
            position: relative;
            display: flex;

            &:after {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 7px;
                background-image: url('/images/32-Search.png');
                content: '';
                display: block;
                width: 32px;
                height: 32px;
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        .search-input {
            width: 100%;
            border: 1px solid #efefef;
            outline: none;
            padding: 16px 16px 16px 40px;
            font-size: 14px;
            border-radius: 4px;
        }

        .title {
            font-size: 22px;
            font-weight: 600;
        }
    }

    .filter__body {
        display: grid;
        grid-template-columns: repeat(auto-fit, 200px);
        flex-wrap: wrap;
        gap: 20px;


        @container container (width < 720px) {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }

        .tile {
            @container container (width < 720px) {
                padding: 3px 7px;
            }
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            min-height: 50px;

            &.hidden {
                display: none;
            }

            .logo {
                width: 40px;
                height: 40px;
                object-fit: contain;
            }

            .name {
                font-size: 16px;
            }

            padding: 5px 10px;
            background-color: white;
        }

        .button {
            width: 100%;
        }
    }
}

.products-with-filters-section {
    .content {
        display: grid;
        grid-template-columns: 350px 1fr;
        grid-template-rows: min-content 1fr;
        gap: 15px;

        .left-panel {
            display: flex;
            flex-direction: column;
            gap: 30px;
            grid-row: span 2;
        }

        .auto-compare-filter {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .product-elements-wrapper {
            grid-column: 2 / 3;
        }
    }

    &.without-left-filter .content {
        display: flex;
        flex-direction: column;
    }
}

.change-amount-tool {
    display: grid;
    grid-template-columns: 4fr 3fr;
    border: 1px solid var(--grey-color);
    border-radius: 3px;
    overflow: hidden;

    .change-amount-input {
        font-size: 18px;
        width: 75px;
        padding: 18px;
        outline: none;
        border: none;
        text-align: center;
    }

    .change-amount-buttons {
        display: grid;
        grid-template-rows: 1fr 1fr;

        button {
            width: 100%;
            border: none;
            cursor: pointer;
        }
    }
}

@container (width < 1000px) {
    .products-table-scroll-wrapper {
        overflow-x: scroll;
    }
}

[data-live-search-form] {
    --border-radius: 3px;
    --border-width: 3px;
    .search-input {
        border: var(--border-width) solid var(--main-color);
        border-radius: var(--border-radius);
    }

    &:has([data-live-results]) .search-input {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}

.live-results {
    position: absolute;
    z-index: 2;
    top: 50px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 0;
    background-color: white;
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-left: var(--border-width) solid var(--main-color);
    border-bottom: var(--border-width) solid var(--main-color);
    border-right: var(--border-width) solid var(--main-color);
    width: 100%;
    line-height: 1.2;

    .live-result {
        padding-left: 10px;
        padding-right: 10px;
    }

    .live-result {
        &:not(:last-child) {
            border-bottom: var(--border-width) solid var(--main-color);
            padding-bottom: 7px;
        }
    }
}

.page-content {
    container-type: inline-size;
}

@container (width < 1200px) {
    .product-main-part .content {
        display: flex;
        flex-direction: column;
    }
}


.cart-pagetitle {
    align-items: center;
    display: flex;
    gap: 10px;
}

.upload-tool {
    display: inline-flex;
    gap: 10px;
    background-color: rgb(229, 231, 235);
    border-radius: 6px;
    padding: 10px 15px;
    align-items: center;
    cursor: pointer;

    .label {
        font-size: 14px;
        text-decoration: underline;
        line-height: 24px;
    }

    .upload-icon {
        width: 24px;
        height: 24px;
        background-image: url("/images/svg/upload-icon.svg");
        display: inline-block;

    }

    [type="file"] {
        display: none;
    }
}

.upload-purchase-block {
    display: flex;
    transition: transform .5s, height .5s;
    transform: scale(1, 0);
    height: 0;
    margin-bottom: 15px;

    .input-block {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    &.active {
        transform: scale(1, 1);
        gap: 15px;
        height: 75px;
    }

    .danger {
        align-self: center;
        font-weight: 700;
        color: rgb(248, 113, 113);
    }
}

body[data-page-type="cart"] {
    .page-title-block {
        gap: 5px;
        margin-bottom: 15px;
    }
}

.product-filter-form {
    margin-bottom: 15px;
}

.change-city-and-new-items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
}

@media (width < 900px) {
    .change-city-and-new-items .new-product {

        display: none;
    }
}

.input-with-arrows {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    height: 45px;

    .number-input {
        border: none;
        text-align: center;
        font-size: 24px;
        font-weight: 500;
    }

    button {
        background-color: var(--main-color);
        border: none;
        border-radius: 3px;
        height: 45px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;

        svg {
            width: 25px;
            height: 25px;

            path {
                fill: white;
            }
        }
    }
}

.page-content {
    .section {
        &:first-of-type {
            margin-top: 0;
            padding-top: 0;
        }
    }
}

.page-content .section.news_slides {
    margin-top: 20px;
}

.partners-map {
    margin-top: 20px;
}

.partners-table .map-icon {
    width: 25px;
    height: 30px;
    cursor: pointer;
}


.map-partner {
    position: relative;
    transform: translate(-50%, -100%);

    .text {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-45%, -110%);
        background-color: white;
        border: 2px solid var(--main-color);
        padding: 3px 6px;
        border-radius: 1px;
        z-index: 1;
    }

    &:hover .text {
        display: block;
    }

    .map-partner_picture {
        cursor: pointer;
    }

    .pointer {
        width: 40px;
        height: 50px;
        background-image: url("/images/svg/map_point.svg");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .logo {
        object-fit: contain;
        border: 2px solid var(--main-color);
        border-radius: 10px;
        background-color: white;
        width: 50px;
        height: 50px;
        padding: 0;
        transition: transform .5s;

        &:hover {
            transform: scale(2.5, 2.5);
        }
    }
}

.button.new-product {
    padding: 18px 8px;
}

.purchases-list {
    .head__cell {
        align-items: center;
        &.image {
            svg {
                width: 33px;
            }
        }
    }

    .image-placeholder {
        width: 50px;
        height: 40px;
    }

    .image {
        justify-content: center;
    }
}

.toggle-dispersion-part {
    cursor: pointer;
}

.additional-OEMs {
    .key, .value, .OEMs-list {
        display: inline;
        .oem {
            display: inline;
        }
    }
}



/* Состояние загрузки кнопки */
.button.is-loading {
    pointer-events: none; /* Блокируем повторные клики */
    color: transparent !important; /* Прячем текст */
    position: relative;
}

/* Создаем спиннер */
.button.is-loading::after {
    content: "";
    position: absolute;

    /* Размеры спиннера */
    width: 16px;
    height: 16px;

    /* Идеальное центрирование внутри кнопки */
    top: 50%;
    left: 50%;
    margin-top: -8px;  /* Половина высоты */
    margin-left: -8px; /* Половина ширины */

    /* Рисуем крутящееся кольцо */
    border: 2px solid rgba(255, 255, 255, 0.2); /* Блеклый задний фон кольца */
    border-top-color: #ffffff;                  /* Яркая крутящаяся часть */
    border-radius: 50%;

    /* Запуск анимации */
    animation: buttonSpinner 0.6s linear infinite;
}

/* Анимация вращения */
@keyframes buttonSpinner {
    to {
        transform: rotate(360deg);
    }
}

.order-comment {
    padding: 10px;
    background-color: var(--grey-color);
    font-style: italic;
}

[data-page-type="main-menu-page"] {
    .page-title-block {
        display: none;
    }
    .page-menu-section {
        .points {
            display: flex;
            flex-direction: column;

            .point {
                padding: 3px 5px;
                font-size: 20px;
                color: var(--main-color);
                text-decoration: underline;
            }
        }
    }
}

[data-page-type="catalog-root-page"] {
    .page-title-block {
        display: none;
    }
}

.change_city {
    display: flex;
    gap: 5px;
    cursor: pointer;
    align-items: center;
    font-size: 20px;
    .icon {
        width: 34px;
        height: 34px;

        stroke: var(--main-color);
    }
}

.mobile-footer-menu {
    display: none;
}

@media (width < 500px) {
    .to-messenger.bottom-icon {
        display: none;
    }
}