/*
Castomizer Stylesheet
*/

/* 
   << БЛОК ПЕРЕМЕННЫХ 
*/

/* Шрифты - НАСТРАИВАЮТСЯ ОЧЕНЬ ПРОСТО ЧЕРЕЗ theme.JSON (стр.~326 объект - "typography") + Редактор для размеров заголовков и основного текста глобально.
Причем functions.php использовать не нужно */
/*

/* 1) Тени*/
body {
    --owner--box--shadow--normal: 5px 5px 20px rgba(0, 0, 0, 0.13),
        -5px -5px 20px rgba(0, 0, 0, 0.13);
    --owner--box--shadow--small: 2px 2px 10px rgba(0, 0, 0, 0.13),
        -2px -2px 10px rgba(0, 0, 0, 0.13);
}
/* >> КОНЕЦ БЛОКА ПЕРЕМЕННЫХ*/

/*
    ГЛОБАЛЬНЫЕ ЭЛЕМЕНТЫ  + модификаторы + псевдоклассы/элементы (форматы текста, заголовков, медиа, ссылки, списки, кнопки и т.д.)
    ИСПРАВЛЕНИЕ БАГОВ WP
*/

/* 1) достилизация блоков*/
/* 1.1) для некоторых блока колонок (flex) задаем доп.стили justification*/
body .is-layout-flex.owner-content-justification-center {
    justify-content: center;
}
body .is-layout-flex.owner-content-justification-space-between {
    justify-content: space-between;
}
body .is-layout-flex.owner-content-justification-space-around {
    justify-content: space-around;
}
/* 1.2) для блоков с изображениями добавляем класс прижимания img кверху*/
.wp-block-image.owner-vertical-align-top img {
    vertical-align: top;
}
/* 1.3) для некоторых внутренних блоков (например, wp-block-group) добавляем возможность растягиваться на всю ширину родительского блока*/
.owner-block-is-layout-full-size {
    width: 100%;
}
/* 1.4) Абзацы на проекте кроме шапки и подвала */
p:not(:where(footer, header) p) {
    text-align: justify;
}
/* 1.5) Блоки со сложным контентом */
/* ограничение размера, чтобы на больших экранах на растягивало текст */
.owner-complex-content {
    max-width: 1200px;
}
/* Вариант в виде столбцов: картинки и мало текста (также см. настройки для редактора).
настройки в редакторе 2 столбца: 20%/80%, 80%/20% или 50% / 50% */

@media screen and (max-width: 1500px) {
    .owner-complex-content div.wp-block-columns {
        width: 100%;
    }
}
@media screen and (max-width: 782px) {
    .owner-complex-content div.wp-block-columns figure.wp-block-image > img {
        width: 100% !important;
    }
}
/* 1.6) Блоки со сложным контентом: вариант с изображениями внутри текста (к оболочке добавляем класс has-floating-images)*/
.owner-complex-content.has-floating-images figure {
    width: 150px;
    z-index: 10;
}
.owner-complex-content.has-floating-images
    div.wp-block-group:nth-child(even)
    > figure {
    float: right;
    padding: 0 0 0 10px;
    margin: 0;
}
.owner-complex-content.has-floating-images
    div.wp-block-group:nth-child(odd)
    > figure {
    float: left;
    padding: 0 10px 0 0;
    margin: 0;
}
.owner-complex-content.has-floating-images figure + p {
    margin: 0;
}
/* когда в сложный контент включена галлерея изображений */
@media screen and (min-width: 1080px) {
    .owner-complex-content
        div.wp-block-group
        .owner-complex-content__images-gallery {
        float: left;
        padding: 0 10px 0 0;
    }
}
/* 1.7) Ограниченный по ширине контент*/
section.owner-wrapper-limited-width-content {
    width: 80%;
    max-width: 1500px;
}
/* 1.8) Маркеры списков */
ul.wp-block-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
ul.wp-block-list > li {
    position: relative;
}
ul.wp-block-list > li::before {
    content: "\2713";
    position: absolute;
    margin-left: -15px;
}

/* 2) Ссылки */
/* 2.1) Убираем линию обводки при фокусировании на линк*/
.wp-site-blocks *:focus {
    outline: none;
}
/* 2.2) содержимое ссылок делаем - так чтобы в дальнейшем работало свойство width без переноса для гармоничной отрисовки */
a:not(
        :where(
                .wp-block-latest-posts,
                .wp-block-social-links,
                :where(ol.wp-block-list, ul.wp-block-list, ol, ul) > li
            )
            a,
        p a
    ) {
    display: inline-block;
}
:where(header.wp-block-template-part, footer.wp-block-template-part)
    a:not(p.wp-block-site-title > a, .is-breaking-link, :where(header, footer) figure.wp-block-image > a) {
    width: max-content;
}
/* 2.3) убираем подчеркивание ссылки по умолчанию (т.к. тэг <p> обрамляяет тэг <a> */
p a {
    text-decoration: none;
}
/* 3) тени*/
/* 3.1) небольшая тень*/
.owner-box-shadow-small {
    box-shadow: var(--owner--box--shadow--small);
}
/* 3.2) нормальная тень*/
.owner-box-shadow-normal {
    box-shadow: var(--owner--box--shadow--normal);
}
/* 3.3) большая тень*/

/* 4) вводим новый класс для изменения позиционирование некоторых wp-block-group в шаблонах Домашняя страница, Страницы и др., чтобы устранить невозможность изменить z-index для корректной отрисовки меню и сразу устанавливаем z-index */
.wp-block-group.owner-lowered-z-index {
    position: relative;
    z-index: 0;
}

/* 5) Исправление багов WP */
/* 5.1) Глюки блока поиск. 
/* 5.1.1) Устраняем рассогласование радиусов блока form и оболочки в которой input и предустановленный бордер у оболочки кнопки и всего блока.
Настройка блока Поиска делаем глобально, тогда в шаблонах не нужно настраивать.Убираем отступ margin-block-start установленный для потомков is-layout-flow по всему сайту. До этого проекта проблем не было :)) */
.owner-header-form-search .wp-block-search__inside-wrapper {
    border-radius: inherit !important;
    border: none !important;
    margin-block-start: 0;
}
/* 5.1.2) Убираем отступ margin-block-start установленный для потомков is-layout-flow по всему сайту. До этого проекта проблем не было :)) */
.owner-header-form-search .wp-block-search__label {
    display: none;
}

/* 7) Вывод списка постов */
ul.wp-block-post-template
    > li.wp-block-post
    .wp-block-post-featured-image
    img.wp-post-image {
    box-shadow: var(--owner--box--shadow--normal);
}
/* 7.1) Вывод поста */
/* Голова: изображение записи и поля (автор, дата и т.д.) , если выводятся в строку (если колонки, то перенос на мобильных автоматический) используем доп.класс owner-post-head.is-layout-flex */
/*МЕДИА-ЗАПРОСЫ*/
@media screen and (max-width: 400px) {
    .owner-post-head.is-layout-flex {
        flex-wrap: wrap;
    }
}
/* 7.2) Стили для вывода описаний элементов таксономий (см. Произвольные типы публикаций. В админке, во вкладке Код элемента таксономии добавить оболочку section с id='idDescTaxElement' */
/* Для вывода описания элемента таксономии (выводится через get_term(id) перед списком записей или подкатегорий) */
#idDescTaxElement ul {
    list-style: none;
    padding: 0;
}
@media screen and (max-width: 500px) {
    #idDescTaxElement figure.wp-block-image {
        width: 100% !important;
    }
}

/* 8) Скрытые элементы */
.displayed-none {
    display: none !important;
}
.h1-visibiliy-hidden {
    visibility: hidden;
    height: 0;
}

/* 9) Строки с телефонами при наведении */
.owner-phones-string:hover i.fa {
    color: var(--wp--preset--color--active-link);
}

/* 10) Стили для динамического изменения элементов при фокусировке, наведении и т.д.*/
.owner-style-scale {
    transition: all 0.2s;
}
.owner-style-scale:where(:hover, :focus) {
    transform: scale(1.05);
    transition: all 0.2s;
}

/* 11) пагинация*/
.wp-block-query-pagination-numbers .page-numbers.current {
    border-radius: 100%;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    background-color: var(--wp--preset--color--active-link);
    color: var(--wp--preset--color--base);
    vertical-align: middle;
    box-shadow: 0 0 15px #000000a1;
}
/* 11.1) пагинация для kama_pagenavi*/
.wp-pagenavi {
    margin: 2em auto;
    text-align: center;
}
.wp-pagenavi > * {
    display: inline-block;
    padding: 0em 0.5em;
    margin: 0.1em;
    border: 1px solid #93a8bc;
    border-radius: 3px;
    color: #465366;
}
.wp-pagenavi a,
.wp-pagenavi a:hover {
    text-decoration: none;
}
.wp-pagenavi a {
    background-color: #ffffff;
}
.wp-pagenavi a:hover {
    border-color: #7d95ac;
}
.wp-pagenavi .pages {
}
.wp-pagenavi .current {
    border-color: #465366;
    color: #465366;
}
.wp-pagenavi .extend {
    color: #465366;
}
.wp-pagenavi .first {
}
.wp-pagenavi .last {
}
.wp-pagenavi .prev {
    border-color: rgba(0, 0, 0, 0);
}
.wp-pagenavi .next {
    border-color: rgba(0, 0, 0, 0);
}

/* 12) Социальные сети*/
header .wp-block-social-link.messenger-max-icon {
    width: 36px;
}
footer .wp-block-social-link.messenger-max-icon {
    width: 24px;
}

/* >> КОНЕЦ ГЛОБАЛЬНЫХ ЭЛЕМЕНТОВ */

/* 
    << HEADER/FOOTER 
*/
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}
/* Общие */
/* О.1) вводим спец класс для блокировки переноса текстового контента (абзацы и т.д....)*/
:where(header, footer) .owner-block-details p {
    width: max-content;
}

/* 1) Header*/

/* 1.1) Позиционирование блока с меню и информацией вверху шапки только (!) для ДС*/
#idOwnerHeaderWrapper #idOwnerHeaderContent {
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
}
/* 1.2) вредный отступ 1.2rem из настроек, но везде убирать опасно...*/
#idOwnerHeaderWrapper:not(.owner-wrapper-header) {
    top: -1.2rem;
}
/* 1.3) удаляем breadcrumbs на главной*/
body.home .yoast-breadcrumbs {
    display: none;
}
/* 1.3) кликающий палец появляется только после брейк-поинта...
и выстраиваем отображение мобильной версии */
@media screen and (min-width: 1220px) {
    .owner-main-flex-container .owner-clicking-finger {
        display: none;
    }
}
@media screen and (max-width: 1220px) {
    .wp-block-columns.owner-main-flex-container {
        flex-direction: column;
    }
    .wp-block-columns.owner-main-flex-container > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* 2) Footer */
/* 2.1) Переводим колоночную схему установленную в редакторе на отзывчивую грид-схему. Учитываем, что ширина секции 95%, т.к. гриды игнорируют этот параметр (почему - х.з.?)*/
#idOwnerMainFooterContainer .owner-footer-grid-wrapper {
    display: grid;
    /*grid-template-columns: 10% 20% 20% 25% 20%;*/
    grid-template-columns: repeat(4, 1fr);
}
/* подгоняем размер заголовков - поменьше */
@media screen and (max-width: 1485px) {
    #idOwnerMainFooterContainer .owner-footer-grid-wrapper h3.wp-block-heading {
        font-size: var(--wp--preset--font-size--normal-plus);
    }
}
/* переход на 3-х колоночную систему при начальной - 5-колоночной*
@media screen and (max-width: 1240px) {
    #idOwnerMainFooterContainer .owner-footer-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}*/
/* переход на 2-х колоночную систему*/
@media screen and (max-width: 980px) {
    #idOwnerMainFooterContainer .owner-footer-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        width: 80%; /*для более гармоничной отрисовки*/
    }
}
/* 2.2) МЕДИА-ЗАПРОСЫ на выравнивание по центру контента в колонках футера на мобильных экранах */
@media screen and (max-width: 782px) {
    /* Для центрального контейнера*/
    #idOwnerMainFooterContainer .owner-footer-grid-wrapper {
        grid-template-columns: 1fr;
        width: auto; /*обратная подстройка под ширину секции*/
    }
    #idOwnerMainFooterContainer
        .owner-footer-grid-wrapper
        > .wp-block-column
        .wp-block-group-is-layout-flex.is-vertical {
        flex-direction: column;
        align-items: center !important;
    }
    #idOwnerMainFooterContainer
        .owner-footer-grid-wrapper
        > .wp-block-column
        .wp-block-group-is-layout-flex.is-vertical
        > * {
        text-align: center;
    }
    /*Для нижнего контейнера*/
    #idOwnerBelowFooterContainer .wp-block-group.is-layout-flex {
        flex-direction: column;
        align-items: center;
    }
    #idOwnerBelowFooterContainer
        .wp-block-group.is-layout-flex
        .wp-block-group-is-layout-flex.is-vertical {
        flex-direction: column;
        align-items: center !important;
    }
}
/* 2.x) Сепаратор в футере позиционируем слева на больших экранах*/
@media screen and (min-width: 782px) {
    footer.wp-block-template-part hr.wp-block-separator {
        margin-left: 0;
    }
}
/* НА БУДУЩЕЕ ...*/
/* 3) Стили для секции c Contact Form (контактная форма с вкладками) */
/* 3.1) Задаем класс display и первоначально скрываем все блоки с контентом */
#idSectionTabs
    .owner-container-contents-block
    > .owner-container-contents-block__item {
    display: none;
}
/* 3.2) Перестилизуем кнопки против установок темы и общих */
#idSectionTabs
    .owner-container-buttons-block
    > .owner-container-buttons-block__item
    > a.wp-block-button__link {
    color: var(--wp--preset--color--base);
    background-color: transparent;
    box-shadow: none;
}
#idSectionTabs
    .owner-container-buttons-block
    > .owner-container-buttons-block__item
    > a.wp-block-button__link:hover {
    color: var(--wp--preset--color--base);
    border: solid 1px;
}
/* 3.3) Размеры */
#idSectionTabs .owner-container-contents-block {
    width: 50%;
}
@media screen and (max-width: 900px) {
    #idSectionTabs .owner-container-contents-block {
        width: 80%;
    }
}
/* 3.4) Стилизация для кнопок внутри контента */
#idSectionTabs
    .owner-container-contents-block
    .block-buttons-into-content__button
    > a.wp-block-button__link {
    border-radius: 0;
    color: var(--wp--preset--color--base);
    background-color: transparent;
    border: solid 1px;
    padding: 10px 30px;
    box-shadow: var(--owner--box--shadow--normal);
}
#idSectionTabs
    .owner-container-contents-block
    .block-buttons-into-content__button
    > a.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--base);
}

/* >> КОНЕЦ header/footer */

/*
    << НАСТРОЙКА СТИЛЕЙ ПЛАГИНОВ
*/

/* 1) Contact Form 7*/
/* 1.1) Меняем установки браузеров*/
/* 1.1.1) Плейсхолдер для формы в футере */
footer ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--body);
}
footer :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--body);
}
footer ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--body);
}
footer :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--body);
}

/* 1.1.2) Плейсхолдер для форм в всплыв. окнах */
div.pum ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: var(--wp--preset--color--contrast-2);
    font-family: var(--wp--preset--font-family--body);
}
div.pum :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--wp--preset--color--contrast-2);
    font-family: var(--wp--preset--font-family--body);
}
div.pum ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--wp--preset--color--contrast-2);
    font-family: var(--wp--preset--font-family--body);
}
div.pum :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: var(--wp--preset--color--contrast-2);
    font-family: var(--wp--preset--font-family--body);
}

/* 1.2) Общая стилизация элементов Контакт-форм в футере*/
/* 1.2.1) Общие стили для форм */
footer .wpcf7 {
    --cf7--height-unit: var(--wp--preset--font-size--normal-plus);
}
footer .wpcf7 .owner-cf7-header {
    color: var(--wp--preset--color--base);
    text-align: center;
    font-size: var(--wp--preset--font-size--large);
}
footer .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox) {
    border: none;
    color: var(--wp--preset--color--base);
    font-size: var(--cf7--height-unit);
    background-color: transparent;
    padding: 10px 5px;
    font-family: var(--wp--preset--font-family--body);
}
footer .wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
    font-size: var(--cf7--height-unit);
    color: var(--wp--preset--color--base);
}
footer .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox, .wpcf7-submit) {
    border-bottom: solid 1px;
}
footer
    .wpcf7
    .wpcf7-form-control:not(.wpcf7-checkbox):where(
        :hover,
        :active,
        :focus,
        :focus-visible
    ) {
    outline: none;
}

/* 1.2.2) Стили для контейнера с флекс-элементами в строку */
footer .wpcf7 .owner-cf7-flex-row-wrapper > p {
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 480px) {
    footer .wpcf7 .owner-cf7-flex-row-wrapper > p {
        flex-wrap: wrap;
    }
}
/* 1.2.2.1) Ширина элементов в контейнере */
footer
    .wpcf7
    .owner-cf7-flex-row-wrapper
    .wpcf7-form-control:not(.wpcf7-checkbox) {
    width: 90%;
}
@media screen and (max-width: 480px) {
    footer
        .wpcf7
        .owner-cf7-flex-row-wrapper
        .wpcf7-form-control:not(.wpcf7-checkbox) {
        width: 97%;
    }
}
/* 1.2.2.3) Прижимаем блок с телефоном к правому краю*/
footer .wpcf7 .owner-cf7-flex-row-wrapper .wpcf7-form-control.wpcf7-mask {
    display: block;
    margin-left: auto;
}
@media screen and (max-width: 480px) {
    footer .wpcf7 .owner-cf7-flex-row-wrapper .wpcf7-form-control.wpcf7-mask {
        margin-left: 0;
    }
}
/* 1.2.3) подгоняем отступы для отдельных блоков*/
footer .wpcf7 form > div {
    margin-bottom: inherit;
}
/* 1.2.4) в контактной форме убираем верхний отступ*/
footer .wp-block-contact-form-7-contact-form-selector {
    margin-top: 0 !important;
}
/* 1.2.5) textarea: фиксируем размер и родит.семейство шрифтов, задаем ширину и высоту относительно родителя*/
footer .wpcf7 .wpcf7-textarea {
    resize: none;
    font-family: inherit;
    width: 99%;
    height: calc(3 * var(--cf7--height-unit));
}
@media screen and (max-width: 1200px) {
    footer .wpcf7 .wpcf7-textarea {
        width: 98%;
    }
}
@media screen and (max-width: 630px) {
    footer .wpcf7 .wpcf7-textarea {
        width: 97.5%;
    }
}
@media screen and (max-width: 530px) {
    footer .wpcf7 .wpcf7-textarea {
        width: 97%;
    }
}
/* 1.2.6) спец.класс для сокрытия некоторых служебных полей формы*/
footer .wpcf7 .owner-cf7-field-none-displayed {
    display: none;
}
/* 1.2.7) Кнопка Отправить*/
footer .wpcf7 .wpcf7-form-control.wpcf7-submit {
    display: block;
    border: solid 1px;
    margin: 30px auto 0 auto;
    padding: 10px 30px;
    box-shadow: var(--owner--box--shadow--normal);
    cursor: pointer;
}
footer .wpcf7 .wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--base);
}

/* 1.3) Cтилизация Контакт-форм в всплыв.окнах*/
/* 1.3.1) Общие стили для форм */
@media screen and (max-width: 1200px) {
    div.pum .pum-container {
        width: 60% !important;
    }
}
@media screen and (max-width: 800px) {
    div.pum .pum-container {
        width: 95% !important;
    }
}
div.pum .wpcf7 {
    --cf7--height-unit: var(--wp--preset--font-size--medium);
}
div.pum .wpcf7 p {
    text-align: center;
}
div.pum .wpcf7 .owner-cf7-header {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--large-plus);
    font-weight: 700;
}
div.pum .wpcf7 label {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
}
div.pum .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox) {
    border: none;
    color: var(--wp--preset--color--contrast);
    font-size: var(--cf7--height-unit);
    background-color: transparent;
    padding: 10px 5px;
    font-family: var(--wp--preset--font-family--body);
}
div.pum .wpcf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
    font-size: var(--cf7--height-unit);
    color: var(--wp--preset--color--contrast);
}
div.pum .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox, .wpcf7-submit) {
    border-bottom: solid 1px;
}
div.pum
    .wpcf7
    .wpcf7-form-control:not(.wpcf7-checkbox):where(
        :hover,
        :active,
        :focus,
        :focus-visible
    ) {
    outline: none;
}
/* 1.3.2) Ширина элементов в контейнере */
div.pum .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox, .wpcf7-submit) {
    width: 90%;
}
@media screen and (max-width: 480px) {
    div.pum .wpcf7 .wpcf7-form-control:not(.wpcf7-checkbox, .wpcf7-submit) {
        width: 97%;
    }
}
/* 1.3.3) подгоняем отступы для отдельных блоков*/
div.pum .wpcf7 form > div {
    margin-bottom: inherit;
}
/* 1.3.4) в контактной форме убираем верхний отступ*/
div.pum .wp-block-contact-form-7-contact-form-selector {
    margin-top: 0 !important;
}
/* 1.3.5) textarea: фиксируем размер и родит.семейство шрифтов, задаем ширину и высоту относительно родителя*/
div.pum .wpcf7 .wpcf7-textarea {
    resize: none;
    font-family: inherit;
    width: 99%;
    height: calc(3 * var(--cf7--height-unit));
}
@media screen and (max-width: 1200px) {
    div.pum .wpcf7 .wpcf7-textarea {
        width: 98%;
    }
}
@media screen and (max-width: 630px) {
    div.pum .wpcf7 .wpcf7-textarea {
        width: 97.5%;
    }
}
@media screen and (max-width: 530px) {
    div.pum .wpcf7 .wpcf7-textarea {
        width: 97%;
    }
}

/* 1.3.6) Кнопка Отправить*/
div.pum .wpcf7 .wpcf7-form-control.wpcf7-submit {
    display: block;
    background-color: var(--wp--preset--color--passive-button);
    color: var(--wp--preset--color--base);
    border-radius: 5px;
    margin: 30px auto 0 auto;
    padding: 10px 30px;
    box-shadow: var(--owner--box--shadow--normal);
    cursor: pointer;
}
div.pum .wpcf7 .wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--wp--preset--color--active-button);
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--active-button);
}

/* 2) Popup Maker */

/* 3) СЛАЙДЕРЫ */
/* 3.1) SS3 */
#idSectionTopHomeSlider .n2-section-smartslider {
    width: 80%;
    margin: 0 !important;
}
/* */
@media screen and (max-width: 900px) {
    #idSectionTopHomeSlider .n2-section-smartslider {
        width: 90%;
        margin: 0 auto !important;
    }
}

/* 3.2) Carousel Slider Block */
#idSectionBottomHomeSlider {
    /*Навигация*/
    --wp--custom--carousel-block--navigation-size: 22px;
    --wp--custom--carousel-block--navigation-sides-offset: 50px;
    --wp--custom--carousel-block--navigation-color: var(
        --wp--preset--color--passive-link
    );
    --swiper-navigation-color: var(--wp--preset--color--passive-link);

    /*Пагинация*/
    --wp--custom--carousel-block--pagination-bullet-size: 10px;
    --wp--custom--carousel-block--pagination-top: auto;
    --swiper-pagination-top: auto;
    --swiper-pagination-bottom: 80px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    /*кастомные параметры*/
    --wp--custom--carousel-block--pagination-bullet-horizontal-gap: 4px;
    --wp--custom--carousel-block--pagination-bullet-color: #999;
    --wp--custom--carousel-block--pagination-bullet-opacity: 0.5;
    --wp--custom--carousel-block--pagination-bullet-active-opacity: 1;
    --wp--custom--carousel-block--pagination-bullet-active-color: var(
        --wp--preset--color--active-link
    );
}

/*Навигация активная*/
#idSectionBottomHomeSlider
    :where(.swiper-button-next, .swiper-button-prev):not(
        .swiper-button-disabled
    ):where(:hover, :active) {
    color: var(--wp--preset--color--active-link);
}
#idSectionBottomHomeSlider .swiper-wrapper {
    align-items: center;
}
/* медиа-запросы для навигации */
/* @media screen and (max-width: 900px) {
    #idSectionBottomHomeSlider {
        --wp--custom--carousel-block--navigation-sides-offset: 5px;
    }
} */
@media screen and (max-width: 700px) {
    #idSectionBottomHomeSlider {
        --wp--custom--carousel-block--navigation-sides-offset: 2px;
    }
}
/* переключение с десктопа на мобильный */
#idSectionBottomHomeSlider.owner-mobile-screen {
    display: none;
}
@media screen and (max-width: 780px) {
    #idSectionBottomHomeSlider.owner-desktop-screen {
        display: none;
    }
    #idSectionBottomHomeSlider.owner-mobile-screen {
        display: block;
    }
}

/* убираем навигацию на мобильном. должно совпадать с настройками брейк-поинта в редакторе*/
@media screen and (max-width: 400px) {
    #idSectionBottomHomeSlider
        :where(.swiper-button-next, .swiper-button-prev, .swiper-pagination) {
        display: none;
    }
}

/* 4) Lazy Blocks */
/* 4.1) Блок - Вывод изображений рубрик (и записей в отсуствие рубрик) */
section.owner-layout-category-output {
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}
section.owner-layout-category-output > a.owner-layout-category-output__item {
    /*display: flex;
    flex-direction: column;
    /* align-items: center; */
    box-shadow: var(--owner--box--shadow--normal);
    border-radius: 5px;
    width: 160px;
}
section.owner-layout-category-output
    > a.owner-layout-category-output__item
    > img {
    display: block;
    width: 100%;
    border-radius: 5px;
}
section.owner-layout-category-output
    > a.owner-layout-category-output__item
    > p {
    margin: 0;
    padding: 5px;
    font-weight: bolder;
    text-align: center;
}

/* 4.1.1) Вывод записей (когда закончились рубрики)*/
#idSectionPostsOutput .wp-block-post-template-is-layout-grid {
    display: grid;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--30);
    list-style: none;
}
#idSectionPostsOutput div.is-vertical.is-layout-flex {
    flex-wrap: nowrap;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
}
#idSectionPostsOutput
    :is(a.wp-block-post-author-name__link, .wp-block-post-excerpt > p) {
    margin: 0;
}
#idSectionPostsOutput figure.wp-block-post-featured-image :is(a, img) {
    /*width: 100%;
    height: 100%;*/
    border-radius: 10px;
}

/* #idSectionPostsOutput .owner-is-post-title-container > div.wp-block-group {
    margin-top: var(--wp--preset--spacing--20);
} */
/*МЕДИА-ЗАПРОСЫ*/
@media screen and (max-width: 1600px) {
    #idSectionPostsOutput .wp-block-post-template-is-layout-grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--10);
    }
}

/* 4.2) Блок - Изображение записи*/
.wp-block-lazyblock-izobrazhenie-zapisi-s-alt img {
    /*width: auto;
    height: 100%;*/
    border-radius: var(--wp--preset--spacing--10-px);
}

/* 5) Календарь*/
/*размеры календаря*/
#idSectionTopHomeSlider .fc-calendar-container {
    height: 320px;
}
/*цветовая гамма*/
#idSectionTopHomeSlider
    :is(
        .custom-header,
        .fc-calendar :is(.fc-head, .fc-row > div.fc-today),
        .custom-content-reveal :is(h4, p.TotalSoftcalEvent_Title)
    ) {
    background: var(--wp--preset--color--passive-link) !important;
}
#idSectionTopHomeSlider :is(.custom-content-reveal, .fc-calendar .fc-body) {
    border: 1px solid var(--wp--preset--color--passive-link);
}
#idSectionTopHomeSlider :is(.fc-calendar .fc-row, .custom-content-reveal h4) {
    border-bottom: 1px solid var(--wp--preset--color--passive-link);
}
#idSectionTopHomeSlider .fc-calendar .fc-row > div {
    border-right: 1px solid var(--wp--preset--color--passive-link);
}

#idSectionTopHomeSlider .custom-header .custom-month:is(h3, h4, h5) {
    color: white !important;
}
#idSectionTopHomeSlider .custom-header nav i:hover:before {
    color: var(--wp--preset--color--active-brown);
}
#idSectionTopHomeSlider .fc-calendar .fc-row > div.fc-content:hover:after {
    color: var(--wp--preset--color--active-brown);
}
#idSectionTopHomeSlider
    .fc-calendar
    .fc-row
    > :is(div.fc-content, div.fc-today):hover
    span.fc-date {
    color: var(--wp--preset--color--active-brown);
}
#idSectionTopHomeSlider
    .fc-calendar
    .fc-row
    > :is(div.fc-content, div.fc-today):hover
    span.fc-date {
    color: var(--wp--preset--color--active-brown);
}
#idSectionTopHomeSlider .custom-content-reveal i.custom-content-close:hover {
    color: var(--wp--preset--color--active-brown);
}
/* отступы */
#idSectionTopHomeSlider .custom-content-reveal h4 {
    margin: 0 0 10px 0 !important;
}
#idSectionTopHomeSlider
    :is(
        .container.tscalcontainer,
        .container.tscalcontainer :is(section.main, .custom-calendar-wrap)
    ) {
    margin: 0;
}
#idSectionTopHomeSlider
    .custom-content-reveal
    p:not(p.TotalSoftcalEvent_Title) {
    padding: 5px 10px;
}
/* убираем лишнее...*/
#idSectionTopHomeSlider .custom-inner:before {
    height: 0px;
}
#idSectionTopHomeSlider .custom-inner:after {
    height: 0px;
}
/* открываем место для событий */
#idSectionTopHomeSlider .custom-calendar-wrap {
    overflow: visible;
}
/* увеличиваем ленту событий (было внутри обёртки custom-calendar-wrap)*/
#idSectionTopHomeSlider .custom-content-reveal {
    height: 90vh;
}

/* 6) Site Reviews */
/* вывод в гридах достилизовываем по 3 столбца */
div.glsr-reviews-wrap {
    grid-template-columns: 1fr;
}
div.glsr-reviews-wrap > .glsr-reviews {
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 850px) {
    div.glsr-reviews-wrap > .glsr-reviews {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 560px) {
    div.glsr-reviews-wrap > .glsr-reviews {
        grid-template-columns: 1fr;
    }
}
div.glsr-reviews-wrap > .glsr-reviews > .glsr-review {
        flex-direction: column;
}
div.glsr-reviews-wrap > .glsr-reviews > .glsr-review * {
        flex-grow: 0;
}
div.glsr-reviews-wrap > .glsr-reviews > .glsr-review > .glsr-review-rating {
        justify-content: flex-start;
}

/* >> КОНЕЦ НАСТРОЙКИ СТИЛЕЙ ПЛАГИНОВ*/

/*
    << СТРАНИЦЫ
*/

/*
    <<СТРАНИЦЫ, ОБЩИЕ НАСТРОЙКИ
*/
/* 1) Настройка галлереи для страниц Услуг и Натяжных потолков*/
#idSectionGallery .owner-gallery-image {
    max-width: 200px;
}
@media screen and (max-width: 430px) {
    #idSectionGallery .owner-gallery-image {
        max-width: 100%;
    }
}
#idSectionGallery .owner-gallery-image-is-vertical {
    max-width: 100px;
}
@media screen and (max-width: 358px) {
    #idSectionGallery .owner-gallery-image-is-vertical {
        max-width: 100%;
    }
}
/* 4) Отключение бокового сайдбара с меню на малых экранах */
@media screen and (max-width: 870px) {
    main.owner-with-sidemenu-page-wrapper
        .wp-block-columns
        > .wp-block-column:first-child {
        flex-basis: 100% !important;
    }
    main.owner-with-sidemenu-page-wrapper
        .wp-block-columns
        > .wp-block-column:last-child {
        display: none;
    }
}
/* 5) Общее для страниц записей (рубрика Отзывы, например, или результаты Поиска)*/
@media screen and (max-width: 1250px) {
    ul.wp-block-post-template-is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 850px) {
    ul.wp-block-post-template-is-layout-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* >> КОНЕЦ СТРАНИЦЫ ОБЩИЕ НАСТРОЙКИ*/

/* << ГЛАВНАЯ */
/* 1) Секция с карточками каталог, потолки, услуги */
/* 1.1) Резиноый размер и стилизация */
.owner-types-of-service-list .owner-type-of-service-card {
    position: relative;
    width: clamp(290px, 20vw, 400px);
    cursor: pointer;
}
.owner-types-of-service-list .owner-type-of-service-card img {
    border-radius: 10px;
    box-shadow: var(--owner--box--shadow--normal);
}
/* 1.2) Позиционирование наименования карточки*/
.owner-types-of-service-list
    .owner-type-of-service-card
    > .owner-type-of-service-card__name {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
    backdrop-filter: blur(4px); /* Размываем фон под блоком*/
}
/* 1.3) Минимальная высота карточки */
.owner-types-of-service-list .owner-type-of-service-card {
    min-height: 250px;
}

/* >> КОНЕЦ ГЛАВНАЯ*/

/* << КОНТАКТЫ*/

/* >> КОНЕЦ КОНТАКТЫ*/

/* << Новости (посты из ВК) */
.owner-wrapper-vkpost-images {
    margin: var(--wp--preset--spacing--30) 0 !important;
}
.owner-vkpost-figure-size {
    width: clamp(250px, 20vw, 450px);
}
.owner-vkpost-image {
    width: 100%;
}
/* >> Конец Посты из ВК*/

/* >> КОНЕЦ НАСТРОЙКИ СТРАНИЦ*/