.menu-header-drop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 320px;
    height: 715px;
    padding: 24px;
    background-color: #fff;
    border-radius: 24px;
}

.menu-header-drop:has(.menu-header-drop__item[data-parent="true"]:hover) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.menu-header-drop__container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-grow: 1;
}

.menu-header-drop__header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 25px;
}

.menu-header-drop__header-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23042c36' viewBox='0 -960 960 960' class='icon-md'%3E%3Cpath d='m418.15-480 162.93 162.92q8.3 8.31 8.5 20.89.19 12.57-8.5 21.27-8.7 8.69-21.08 8.69-12.38 0-21.08-8.69L359.15-454.69q-5.61-5.62-7.92-11.85-2.31-6.23-2.31-13.46t2.31-13.46q2.31-6.23 7.92-11.85l179.77-179.77q8.31-8.3 20.89-8.5 12.57-.19 21.27 8.5 8.69 8.7 8.69 21.08 0 12.38-8.69 21.08L418.15-480Z'%3E%3C/path%3E%3C/svg%3E");
}

.menu-header-drop__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    color: #042C36;
}

.menu-header-drop__items {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
    gap: 16px;
    min-height: 0;
    margin: 0 -24px;
    overflow-y: auto;
}

.menu-header-drop__item {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 24px;
}

.menu-header-drop__link {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #042C36;
}

.menu-header-drop__item-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.39225 13.5944C8.33876 13.5368 8.31202 13.4673 8.31202 13.3858C8.31202 13.3043 8.33876 13.2347 8.39225 13.1772L11.5344 9.78951L8.39225 6.40183C8.34322 6.35388 8.31648 6.29394 8.31202 6.22202C8.30757 6.15009 8.32316 6.08296 8.35882 6.02063L8.39225 5.98466C8.44573 5.92233 8.51147 5.89116 8.58947 5.89116C8.66746 5.89116 8.7332 5.92233 8.78669 5.98466L12.1294 9.58093C12.1829 9.63847 12.2096 9.708 12.2096 9.78951C12.2096 9.87103 12.1829 9.94056 12.1294 9.9981L8.78669 13.5944C8.7332 13.6567 8.66746 13.6879 8.58947 13.6879C8.51147 13.6879 8.44573 13.6567 8.39225 13.5944Z' fill='%23042C36'/%3E%3Cpath d='M8.58957 5.89112C8.51169 5.8912 8.44578 5.92251 8.39236 5.98477L8.35886 6.02056C8.32326 6.08286 8.30796 6.15045 8.31242 6.22233C8.31694 6.29409 8.34343 6.35415 8.39236 6.40202L11.5346 9.78947L8.39236 13.1769C8.35225 13.2201 8.32777 13.2703 8.31775 13.3269L8.31242 13.3856C8.31242 13.467 8.33901 13.5367 8.39236 13.5942C8.44578 13.6564 8.51169 13.6878 8.58957 13.6878C8.66754 13.6878 8.73329 13.6565 8.78677 13.5942L12.1301 9.9981C12.1702 9.95492 12.1947 9.90477 12.2047 9.8481L12.21 9.78947C12.21 9.72845 12.1951 9.67412 12.1651 9.62654L12.1301 9.58085L8.78677 5.98477C8.74665 5.93804 8.69982 5.90889 8.64591 5.89721L8.58957 5.89112ZM8.58957 5.57895C8.75957 5.57895 8.906 5.65161 9.01443 5.77311L9.01519 5.77234L12.3585 9.36842C12.4677 9.486 12.5222 9.63249 12.5222 9.78947C12.5222 9.94646 12.4677 10.0929 12.3585 10.2105L9.01519 13.8066L9.01443 13.8058C8.91995 13.9117 8.79709 13.9805 8.65428 13.9962L8.58957 14L8.52561 13.9962C8.3826 13.9805 8.25926 13.9119 8.16471 13.8058L8.16394 13.8066C8.1632 13.8058 8.16316 13.8044 8.16242 13.8036C8.16046 13.8013 8.15751 13.7997 8.15557 13.7975L8.15709 13.7967C8.05326 13.6807 8.00024 13.5386 8.00024 13.3856C8.00029 13.2286 8.05469 13.082 8.16394 12.9645L8.16471 12.9653L11.109 9.78947L8.16394 6.61369H8.16471C8.06421 6.51045 8.00969 6.38128 8.00101 6.24137L8.00177 6.14314C8.00968 6.04592 8.03909 5.95255 8.08857 5.866L8.10608 5.83478L8.13044 5.80813L8.16394 5.77234L8.16471 5.77311C8.27309 5.65151 8.41955 5.57903 8.58957 5.57895Z' fill='%23042C36'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

.menu-header-drop__submenu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 320px;
    min-height: 0;
    padding: 24px;
    background-color: #fff;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.menu-header-drop__submenu:before {
    content: '';
    display: block;
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: -1px;
    width: 1px;
    background-color: #CFD6D8;
}

.menu-header-drop__submenu-title {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-shrink: 0;
    gap: 8px;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    color: #042C36;
}

@keyframes scrollSubmenu {
    0% {
        opacity: 1;
    }
    99%, 100% {
        opacity: 0;
        pointer-events: none;
    }
}

.menu-header-drop__submenu-items {
    display: flex;
    align-items: start;
    justify-content: stretch;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    scroll-timeline-name: --local-box-scroll;
    scroll-timeline-axis: block;
}

.menu-header-drop__submenu-items:after {
    content: '';
    display: block;
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 0;
    height: 15%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    opacity: 0;
    pointer-events: none;
    animation-name: scrollSubmenu;
    animation-duration: 1ms;
    animation-direction: alternate;
    animation-timeline: --local-box-scroll;
}

.menu-header-drop__link-submenu {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #042C36;
}

.menu-header-drop__buttons {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    width: 100%;
    padding-top: 16px;
}

.menu-header-drop__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background-color: #042C36;
}

.menu-header-drop__button-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
}

.menu-header-drop__button-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8429 10.625H4.375C4.19764 10.625 4.04917 10.5652 3.92958 10.4454C3.80986 10.3259 3.75 10.1774 3.75 10C3.75 9.82267 3.80986 9.67419 3.92958 9.55461C4.04917 9.43489 4.19764 9.37503 4.375 9.37503H13.8429L11.0994 6.63148C10.9755 6.50746 10.9143 6.36239 10.9158 6.19628C10.9175 6.03016 10.9787 5.88246 11.0994 5.75315C11.2287 5.62399 11.3772 5.55725 11.5448 5.55294C11.7126 5.54864 11.8611 5.61114 11.9904 5.74044L15.7227 9.47273C15.8008 9.55079 15.8558 9.63308 15.8877 9.71961C15.9198 9.80614 15.9358 9.89961 15.9358 10C15.9358 10.1004 15.9198 10.1939 15.8877 10.2804C15.8558 10.367 15.8008 10.4493 15.7227 10.5273L11.9904 14.2596C11.8664 14.3835 11.7192 14.4447 11.549 14.4432C11.3785 14.4415 11.2287 14.3761 11.0994 14.2469C10.9787 14.1176 10.9162 13.9712 10.9119 13.8077C10.9076 13.6443 10.9701 13.4979 11.0994 13.3686L13.8429 10.625Z' fill='white'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}

.menu-header-drop__button_transparent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid #042C36;
}

.menu-header-drop__button_transparent .menu-header-drop__button-text {
    color: #042C36;
}

.menu-header-drop__button_transparent .menu-header-drop__button-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8429 10.625H4.375C4.19764 10.625 4.04917 10.5652 3.92958 10.4454C3.80986 10.3259 3.75 10.1774 3.75 10C3.75 9.82267 3.80986 9.67419 3.92958 9.55461C4.04917 9.43489 4.19764 9.37503 4.375 9.37503H13.8429L11.0994 6.63148C10.9755 6.50746 10.9143 6.36239 10.9158 6.19628C10.9175 6.03016 10.9787 5.88246 11.0994 5.75315C11.2287 5.62399 11.3772 5.55725 11.5448 5.55294C11.7126 5.54864 11.8611 5.61114 11.9904 5.74044L15.7227 9.47273C15.8008 9.55079 15.8558 9.63308 15.8877 9.71961C15.9198 9.80614 15.9358 9.89961 15.9358 10C15.9358 10.1004 15.9198 10.1939 15.8877 10.2804C15.8558 10.367 15.8008 10.4493 15.7227 10.5273L11.9904 14.2596C11.8664 14.3835 11.7192 14.4447 11.549 14.4432C11.3785 14.4415 11.2287 14.3761 11.0994 14.2469C10.9787 14.1176 10.9162 13.9712 10.9119 13.8077C10.9076 13.6443 10.9701 13.4979 11.0994 13.3686L13.8429 10.625Z' fill='%23042C36'/%3E%3C/svg%3E%0A");
}

@media (min-width: 961px) {
    .menu-header-drop__item:not(:hover) .menu-header-drop__submenu {
        display: none;
    }

    .menu-header-drop__header-icon {
        display: none;
    }
}

@media (max-width: 960px) {
    .menu-header-drop {
        border-radius: 0;
    }

    .menu-header-drop__submenu {
        width: 400px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        transition: left 0.5s ease-in-out;
        z-index: 1;
    }

    .menu-header-drop__submenu:before {
        display: none;
    }

    .menu-header-drop__buttons:before {
        content: '';
        position: absolute;
        top: 0;
        right: -24px;
        left: -24px;
        border-top: 1px solid #CCD6D8;
    }
}

@media (max-width: 600px) {
    .menu-header-drop__submenu {
        width: 100%;
    }
}