.sidebar-menu.dealer {
    --menu-width: calc(300px + 2 * clamp(32px, 2.75vw + 23px, 76px));
    --slide-padding: clamp(48px, 3vw + 38px, 96px) clamp(32px, 2.75vw + 23px, 76px) 0;
    --ease-standard: cubic-bezier(.25, .1, .25, 1);
    --font-porsche: 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;
    background-color: unset;
    inline-size: 67.5%;

    .close {
        position: relative;
        top: unset;
        width: 3.5rem;
        height: 3.5rem;
        margin-top: clamp(8px, .5vw + 6px, 16px);
        margin-left: clamp(16px, 1.25vw + 12px, 36px);
        flex-shrink: 0;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: rgba(36, 36, 40, 0.2);
        padding: calc(28px * (1 - 0.64285714) + 6px);
        color: light-dark(#010205, #fafbff);
        transition: background-color .25s var(--ease-standard), border-color .25s var(--ease-standard), color .25s var(--ease-standard);

        &:hover {
            background-color: rgba(36, 36, 40, 0.4);
        }
    }

    .leftMenu,
    .rightMenu {
        width: var(--menu-width);
    }

    .leftMenu {
        padding: var(--slide-padding);

        .leftMenu-lists {
            gap: unset;

            .active {
                background-color: light-dark(#afafb626, #6b6b703a);
            }

            > li > a > img {
                width: 23px;
                height: 23px;
            }
        }

        .leftMenu-models {
            height: unset;

            > li {
                padding-right: 10px;
            }

                > li.active {
                    background-color: light-dark(#afafb626, #6b6b703a);
                }
        }

        .leftMenu-back-wrapper {
            margin-bottom: clamp(16px, 12px + 1.25vw, 36px);
        }

        .leftMenu-back {
            margin: 0;
            width: 100%;

            > img {
                transform: rotate(180deg);
            }
        }

        .swiper-slide {
            padding-block: unset;
        }
    }

    .rightMenu {
        .swiper-slide {
            padding: var(--slide-padding);

            &:first-child,
            &:has(.dealer-contact-list) {
                padding-top: clamp(48px, 3vw + 38px, 96px);
            }
        }

        .rightMenu-lists {
            padding-inline: unset;

            li:first-child {
                margin-bottom: 16px;
                padding-right: 0;
            }

            > li:not(:last-child) > a {
                margin-bottom: 0;
            }
        }
    }

    .leftMenu-lists > li,
    .rightMenu-lists > li:not(.dealer-contact-address):not(.dealer-contact-name),
    .rightMenu-models.vehicle-models > li,
    .rightMenu-modelTypes.vehicle-models .rightMenu-modelTypes-inner,
    .leftMenu-models > li,
    .leftMenu-back-wrapper {
        margin: 0 0 8px;
        padding-left: 2px;
        padding-right: 18px;
        border-radius: 8px;
        aspect-ratio: unset;
        transition: background-color .25s var(--ease-standard);

        &:hover {
            -webkit-backdrop-filter: blur(32px);
            backdrop-filter: blur(32px);
            background-color: light-dark(#6465733c, #9c9ca04d);
        }
    }

    .leftMenu .leftMenu-lists .active:hover {
        -webkit-backdrop-filter: blur(32px);
        backdrop-filter: blur(32px);
        background-color: light-dark(#6465733c, #9c9ca04d);
    }

    :is(.leftMenu-lists > li, .rightMenu-lists > li, .dealer-contact-row) > a,
    .vehicle-models .vehicle-models-item,
    .leftMenu-models-signature,
    .leftMenu-back {
        padding: 16px 0 16px 10px;
        width: 100%;
    }

    .leftMenu-models-signature {
        margin: 0;
    }

        .rightMenu-lists > li a:hover,
        .vehicle-models .vehicle-models-item,
        .leftMenu-models-signature:hover,
        .leftMenu-back:hover {
            background-color: unset;
            backdrop-filter: none;
        }

            :is(.leftMenu-lists > li > a, .rightMenu-lists > li a) span,
            .vehicle-models .vehicle-models-item .vehicle-models-name {
                display: block;
                width: 100%;
                color: light-dark(#010205, #fafbff);
                font: 400 1rem / calc(6px + 2.125ex) var(--font-porsche);
                overflow-wrap: break-word;
            }

    .dealer-contact-list {
        .dealer-contact-name {
            font: 400 clamp(1.13rem, 1.08rem + 0.21vw, 1.33rem) / calc(2.125ex + 6px) var(--font-porsche);
        }

        .dealer-contact-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            padding: 0 18px 0 2px;

            img {
                align-self: unset;
            }
        }
    }

    .vehicle-models {
        margin: 0;
        gap: 0;

        .vehicle-models-title-group:not(.last)::after {
            content: "";
            background: url('/img/arrow-head-right.svg') no-repeat center / contain;
            width: 23px;
            height: 23px;
        }
    }
}


@media (max-width: 767px) {
    .hamburger-menu-wrapper.dealer {
        --menu-pad-y: clamp(8px, 6px + 0.5vw, 16px);
        --menu-pad-x: clamp(32px, 23px + 2.75vw, 76px);
        --menu-header-pad: clamp(16px, 12px + 1.25vw, 36px);
        --font-porsche-menu: normal normal 400 1rem / calc(6px + 2.125ex) 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;
        --menu-transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        background-color: #fff !important;
        overflow: hidden !important;
        transform: translate3d(-100%, 0, 0);
        transition: var(--menu-transition);

        &.active {
            transform: translate3d(0, 0, 0) !important;
        }

        .m-menu__checkbox {
            position: absolute !important;
            opacity: 0 !important;
            pointer-events: none !important;
            margin: 0 !important;
        }

        .m-menu__header {
            padding: var(--menu-header-pad);
            height: unset;

            span,
            .m-menu__header-back {
                padding: var(--menu-pad-y) !important;
            }

            span {
                font: var(--font-porsche-menu);
            }
        }

        .m-menu__toggle {
            border-radius: 0;
            background-color: unset;
            width: auto;
            height: auto;
            padding: var(--menu-pad-y);
        }

        .m-menu {
            > ul {
                height: auto;
                padding: var(--menu-pad-y) var(--menu-pad-x) var(--menu-pad-x);
                margin: 0 !important;
                list-style: none;

                > li:not(.m-menu__content) {
                    padding: 16px 8px 16px 10px;
                    margin: 8px 0;

                    & > label {
                        padding: 0;
                    }
                }

                > li.m-menu__content {
                    padding-bottom: 0;
                }
            }

            &.m-menu-inner {
                position: relative !important;
                width: 100% !important;
                height: 100% !important;
                overflow: hidden !important;

                > ul {
                    position: relative !important;
                    overflow-y: auto !important;
                }
            }

            &.item > ul li:not(:last-child) {
                margin-bottom: 0;
            }

            .m-menu .m-menu {
                z-index: 60 !important;
            }
        }

        li > .m-menu {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100dvh !important;
            background-color: #fff !important;
            z-index: 50 !important;
            overflow-y: auto !important;
            box-sizing: border-box;
            transform: translate3d(100%, 0, 0) !important;
            transition: var(--menu-transition) !important;
            will-change: transform;
        }

        .m-menu__checkbox:checked ~ .m-menu {
            transform: translate3d(0, 0, 0) !important;
        }

        .m-menu__modelTypes > li {
            padding: 16px 8px 16px 10px;
            margin: 8px 0;

            > a {
                width: 100%;
                background-color: unset;
                padding: 0;

                &:not(:last-child) {
                    margin-bottom: 0 !important;
                }
            }
        }

        :is(.m-menu > ul > li > label, .m-menu > ul > li > a, .sublist, .models-name, .vehicle-models-mobile-title-group) {
            display: flex;
            font: var(--font-porsche-menu);
            margin-bottom: 0;
            transition: var(--menu-transition), opacity 0.25s ease !important;
            will-change: transform;
            font-size: 1rem !important;
            font-weight: unset !important;
        }

        .m-menu:has(.m-menu__checkbox:checked) > ul > li > :is(label, a) {
            transform: translate3d(-100%, 0, 0) !important;
            opacity: 0 !important;
        }

        .m-menu > ul li .sublist.models {
            padding: 0;
            flex-direction: unset;
            align-items: center;
            justify-content: space-between;
            background-color: unset;
            width: 100%;

            &::after {
                content: '';
                background: url('/img/arrow-head-right.svg') no-repeat center / contain;
                width: 24px;
                height: 24px;
            }
        }
    }
}