/* SERVICE_CATALOG_HEADER_JOIN */

/*
 * Фиолетовая плашка "Каталог" и белый список услуг
 * должны быть одной цельной конструкцией.
 */
body:has(.text-block.service-page)
.breadcrumb-block
.breadcrumb-catalog {
    height: 54px !important;
}

body:has(.text-block.service-page)
.breadcrumb-catalog
.wrapper-catalog-left {
    border-radius: 12px 12px 0 0 !important;
}

body:has(.text-block.service-page)
.breadcrumb-catalog
.top-catalog {
    height: 54px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 18px !important;

    border-radius: 12px 12px 0 0 !important;

    box-shadow:
        0 7px 22px rgba(31, 27, 77, .08) !important;
}

/*
 * Белая часть начинается ровно со следующего пикселя.
 */
body:has(.text-block.service-page)
.page-content.paneled
> .left-panel
> .column-content {
    margin-top: 0 !important;

    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
}


/* ============================================================
   ОБЩИЙ БЛОК ПОД ФИОЛЕТОВЫМ "КАТАЛОГ"
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content {
    position: relative !important;
    top: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #fff !important;

    border: 1px solid #dedde6 !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;

    box-shadow:
        0 10px 24px rgba(31, 27, 77, .045) !important;

    box-sizing: border-box !important;
}


/* ============================================================
   "СПИСОК УСЛУГ"
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
> h4 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    position: relative !important;
    top: 0 !important;

    color: #19181e !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    text-align: left !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #ededf2 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   UL RESET
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    background: #fff !important;

    border: 0 !important;

    box-sizing: border-box !important;
}


.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    background: transparent !important;

    border: 0 !important;

    box-sizing: border-box !important;
}


.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li::marker {
    content: "" !important;
}


/* ============================================================
   ПУНКТ УСЛУГИ
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 45px !important;

    margin: 0 !important;
    padding: 10px 38px 10px 14px !important;

    color: #17171b !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;

    text-align: left !important;
    text-decoration: none !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow:
        inset 0 -1px 0 #ededf2 !important;

    box-sizing: border-box !important;

    transition:
        background-color .16s ease,
        color .16s ease !important;
}


/*
 * Последняя строка без разделителя.
 */
.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li:last-child
> a {
    box-shadow: none !important;
}


/* ============================================================
   СТРЕЛКА СПРАВА
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a::after {
    content: "" !important;

    position: absolute !important;

    right: 15px !important;
    top: 50% !important;

    display: block !important;

    width: 7px !important;
    height: 7px !important;

    margin-top: -4px !important;

    border-top: 1.5px solid #656096 !important;
    border-right: 1.5px solid #656096 !important;

    transform: rotate(45deg) !important;

    transition:
        right .16s ease,
        border-color .16s ease !important;
}


/* ============================================================
   HOVER
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a:hover,

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a:focus-visible {
    color: #393186 !important;

    background: #f6f5fb !important;

    outline: none !important;
}


.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a:hover::after,

.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a:focus-visible::after {
    right: 12px !important;

    border-color: #393186 !important;
}


/* ============================================================
   СТАРЫЕ СТИЛИ НАВИГАЦИИ ОБНУЛЯЕМ
   ============================================================ */

.page-content.paneled
> .left-panel
> .column-content
ul.navigation,

.page-content.paneled
> .left-panel
> .column-content
ul.navigation li,

.page-content.paneled
> .left-panel
> .column-content
ul.navigation li a {
    float: none !important;

    max-width: none !important;

    text-shadow: none !important;

    list-style: none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .page-content.paneled
    > .left-panel
    > .column-content {
        margin-top: 0 !important;
        top: 0 !important;

        border-radius: 0 0 10px 10px !important;
    }


    .page-content.paneled
    > .left-panel
    > .column-content
    > h4 {
        min-height: 46px !important;

        padding-left: 13px !important;
        padding-right: 13px !important;

        font-size: 14px !important;
    }


    .page-content.paneled
    > .left-panel
    > .column-content
    > ul.navigation
    > li
    > a {
        min-height: 44px !important;

        padding:
            9px
            36px
            9px
            13px !important;

        font-size: 14px !important;
    }

}

/* SERVICE_MENU_ALIGN_FIX */

/*
 * Все пункты списка услуг должны начинаться строго
 * с одной вертикальной линии слева, как в каталоге.
 */
body:has(.text-block.service-page)
.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li {
    text-align: left !important;
}

body:has(.text-block.service-page)
.page-content.paneled
> .left-panel
> .column-content
> ul.navigation
> li
> a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    text-align: left !important;

    padding-left: 14px !important;
    padding-right: 38px !important;
}