.mobilemenu {
    position: fixed;
    height: 100dvh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    
    
    
    
    
    

    .mobilemenu__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.40);
    }

    .mobilemenu__container {
        height: 100%;
        width: calc(100% - 80px);
        background-color: #ffffff;
        position: relative;
        margin-left: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        

        .mobilemenu__header {
            .mobilemenu__tabs-header {
                display: flex;
                column-gap: 1px;
                border-top: solid 1px var(--Dark-wine-Main, #45080D);

                .mobilemenu__tab-trigger {
                    background-color: var(--Dark-wine-Main, #45080D);
                    flex: 1;
                    color: #ffffff;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 100%;
                    letter-spacing: 0.42px;
                    min-height: 60px;
                    padding: 4px 8px;
                    text-transform: uppercase;
                    transition: all .3s ease;

                    &.active {
                        background-color: #ffffff;
                        color: var(--Dark-wine-Main, #45080D);
                    }
                }
            }
        }

        .mobilemenu__body {
            padding: 12px 24px;
            height: calc(100% - 61px);
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }
        
    }

    &.visible {
        .mobilemenu__container {
            transform: translateX(0%);
        }
    }
}


.mobilemenu__contacts {

    .mobilemenu__contacts-item {
        padding: 12px 0;

        .mobilemenu__contacts-item--name {
            color: var(--Gray-6, #9A9AA2);
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: 0.12px;
            margin-bottom: 2px;
        }

        .mobilemenu__contacts-item--value a,
        .mobilemenu__contacts-item--address .mobilemenu__contacts-item--value {
            color: var(--Base-Dark, #171717);
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            letter-spacing: 0.16px;
            display: block;
        }

        .mobilemenu__contacts-item--value a {
            transition: color .3s ease;
            
            &:hover {
                color: var(--Dark-wine-2, #770E16);
            }
        }

        &:not(:first-child) {
            border-top: solid 1px var(--Gray-2, #F2F2F2);
        }

        .mobilemenu__contacts-item--opening_hours {
            ul.mobilemenu__contacts-item--value li {
                display: flex;
                column-gap: 10px;
                justify-content: space-between;

                &:not(:first-child) {
                    margin-top: 2px;
                }
            }
        }
    }
}

.mobilemenu__languages {
    padding: 12px 0;

    .mobilemenu__languages-title {
        color: var(--Gray-6, #9A9AA2);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0.12px;
    }

    .mobilemenu__languages-items {
        margin-top: 8px;

        .mobilemenu__language {
            span,
            a {
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 100%;
                letter-spacing: 0.14px;
                display: block;
            }

            span {
                opacity: .4;
            }

            &:not(:last-child) {
                margin-bottom: 10px;
            }
        }
    }
}