.ubtn {
    display: flex;
    height: 48px;
    width: 180px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 16px;
    border-radius: 6px;
    cursor: pointer;
}

.ubtn.red-btn {
    background: #fe0000;
    color: #fff;
}

.ubtn.red-btn:hover {
    background: #b71818;
}

.ubtn.white-border-btn {
    border: 1px solid #fff;
    color: #fff;
}

.ubtn.white-border-btn:hover {
    color: var(--ffj-blue-01);
    background: #fff;
    font-weight: normal;
}

.marb-20 {
    margin-bottom: 20px;
}

.bold-text {
    font-weight: 600;
}

.header-new {
    background: white;
    box-shadow: 0 0 10px #bbb;
    padding: 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* Админ-бар WordPress висит поверх страницы и с top: 0 перекрывал бы шапку
   сверху — залогиненному редактору она уезжала бы под него. Класс admin-bar на
   body ставит body_class() в header.php. Посетителей это не касается. */
.admin-bar .header-new {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .header-new {
        top: 46px;
    }
}

.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1035;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

.whatsapp-float:hover {
    background: #1ebe5d;
    color: #fff;
    transform: scale(1.08);
}

.whatsapp-float i {
    font-size: 32px;
    line-height: 1;
}

.header-new__main {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.header-new__nav {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.header-new__menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.header-new__ic-phone {
    padding-left: 29px;
    background: url(/wp-content/themes/facades/img/phone.png) no-repeat 0 7px;
}

.header-new__ic-mail {
    padding-left: 34px;
    background: url(/wp-content/themes/facades/img/mail.png) no-repeat 0 7px;
}

.header-new__phone,
.header-new__mail {
    font-size: 18px;
    line-height: 1.11;
    color: #1c5371;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.header-new__note {
    font-size: 12px;
    line-height: 1.11;
    color: #1c5371;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2px;
}

.button-callme {
    background: #1c5371;
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    width: 180px;
    text-align: center;
    font-size: 14px;
    color: #e1e1ed;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.33s;
}

.button-callme:hover {
    background: #216285;
    color: #e1e1ed;
}

.header-new__minicart button {
    border: none;
    width: 37px;
    height: 33px;
    background: url(/wp-content/themes/facades/img/cart.png) no-repeat center;
    padding: 0;
    position: relative;
}

.header-new__minicart button::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: -5px;
    content: '';
}

.header-new__minicart .cart-indicator {
    background: red;
    box-shadow: none;
    right: 0;
    top: 0;
    border-radius: 6px;
    white-space: nowrap;
    position: absolute;
    font-size: 10px;
    height: 12px;
    line-height: 13px;
    min-width: 12px;
    padding: 0 3px 0 2.4px;
}

.header-new .navbar-nav>.nav-item {
    padding-bottom: 3px;
}

.header-new .navbar-nav>.nav-item>.nav-link {
    margin-bottom: 0;
    text-align: center;
}

.header-new__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.insta-link,
.header-new__lang {
    align-items: center;
    background: #fff;
    border: 1px solid #cfdbe3;
    border-radius: 5px;
    color: #1c5371;
    display: flex;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    gap: 6px;
    height: 44px;
    justify-content: center;
    line-height: 1;
    min-width: 44px;
    padding: 0 14px;
    transition: border-color 0.33s, color 0.33s;
    white-space: nowrap;
}

.insta-link {
    padding: 0;
}

.insta-link:hover,
.header-new__lang:hover {
    border-color: #1c5371;
    color: #216285;
}

.insta-link i,
.header-new__lang i {
    font-size: 1.5rem;
    line-height: 1;
}

.header-new__lang-code {
    display: none;
}

.child-item-list {
    z-index: 9;
    top: 100%;
    left: 0;
}

.child-item-list>li {
    padding-bottom: 0;
}

.child-item-list .nav-link {
    padding-left: 29px;
    padding-right: 29px;
}

.modal-logo-wrap {
    margin-bottom: 20px;
}

.footer-nav {
    list-style-type: none;
    padding: 0;
    font-size: 15px;
    margin-bottom: 0;
}

.footer-nav .nav-item:last-child a {
    padding-bottom: 0;
}

.footer .small-text {
    font-size: 13px;
}

.footer-nav .nav-item a {
    padding: 0 0 24px;
}

.footer a:hover {
    font-weight: 600;
}

.title-col-foot {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 3px;
    position: relative;
    margin-bottom: 25px;
}

.title-col-foot:before {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fe0000;
}

.foot-item-wrap {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font-size: 16px;
}

.col-item-foot {
    padding: 0 30px;
    width: 33%;
    margin-bottom: 50px;
}

/* Юридические ссылки под реквизитами: Aviso Legal, политика, раздел cookies и
   повторное открытие баннера. */
.foot-legal-links {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.foot-legal-links li + li {
    margin-top: 8px;
}

/* Подпись разработчика под копирайтом. Приглушается вся ссылка, а не цвет
   текста: логотип — картинка, цвет на него не действует, и без этого он
   был бы ярче копирайта клиента. Логотип стоит нижним краем на базовой
   линии текста — у «twofed» нет выносных элементов вниз. Жирное начертание
   при наведении, как у прочих ссылок подвала, сдвигало бы центрированную
   строку, поэтому наведение — только яркостью. */
.foot-credit {
    margin-top: 8px;
}

.footer .foot-credit .foot-credit__link {
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    padding: 4px 0;
    opacity: .75;
    transition: opacity .2s;
}

.footer .foot-credit .foot-credit__link:hover,
.footer .foot-credit .foot-credit__link:focus-visible {
    font-weight: inherit;
    opacity: 1;
}

.foot-credit__logo {
    width: 57px;
    height: 12px;
}

.foot-item-wrap.address-icon:before {
    content: '';
    display: block;
    width: 15px;
    height: 20px;
    background: url(/wp-content/themes/facades/img/geo-icon.svg) no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
}

.foot-item-wrap.mail-icon:before {
    content: '';
    display: block;
    width: 22px;
    height: 20px;
    background: url(/wp-content/themes/facades/img/mail-icon.svg) no-repeat center;
    position: absolute;
    top: 0px;
    left: -3px;
}

.foot-item-wrap.phone-icon:before {
    content: '';
    display: block;
    width: 15px;
    height: 20px;
    background: url(/wp-content/themes/facades/img/phone-icon.svg) no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
}

.wrap-bottom-form,
.wrap-top-form {
    background: linear-gradient(90deg, rgba(212, 233, 252, 1) 0%, rgba(246, 249, 252, 1) 100%);
    overflow: hidden;
}

.wrap-top-form {
    position: relative;
    padding: 40px 0px;
}

.wrap-top-form .title-block {
    font-size: 34px;
    line-height: 36px;
    color: #000;
    font-weight: 600;
    margin-bottom: 35px;
}

.wrap-top-form:before {
    content: '';
    position: absolute;
    background: url(/wp-content/themes/facades/img/top-form-bg.png) no-repeat center right;
    background-size: contain;
    height: 100%;
    width: 200%;
    top: 0;
    right: 0px;
    pointer-events: none;
}

.wrap-preim .item-preim {
    padding-left: 50px;
    position: relative;
    margin-bottom: 10px;
    color: #000;
    font-size: 14px;
    padding-top: 5px;
}

.wrap-preim .item-preim:before {
    content: '';
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    top: 0;
    left: 2px;
}

.wrap-preim .item-preim.item-1:before {
    background: url(/wp-content/themes/facades/img/box-icon.svg) no-repeat center;
}

.wrap-preim .item-preim.item-2:before {
    background: url(/wp-content/themes/facades/img/like-icon.svg) no-repeat center;
}

.wrap-preim .item-preim.item-3:before {
    background: url(/wp-content/themes/facades/img/price-tag-icon.svg) no-repeat center;
}

.wrap-preim .item-preim.item-4:before {
    background: url(/wp-content/themes/facades/img/assortment-icon.svg) no-repeat center;
}

.wrap-consult-form {
    width: 360px;
}

.wrap-top-form .wrap-desc {
    width: calc(100% - 400px);
}

.wrap-top-form form {
    margin-bottom: 0;
    background: #fff;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(28, 83, 113, 0.1);
}

.wrap-top-form form p {
    margin-bottom: 12px;
}

.wrap-top-form form p:last-of-type {
    margin-bottom: 0;
    position: relative;
}

.wrap-top-form form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ffj-blue-02);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.wrap-top-form form .wpcf7-form-control-wrap {
    display: block;
}

.wrap-top-form form input.wpcf7-form-control:not(.wpcf7-submit),
.wrap-top-form form textarea.wpcf7-form-control,
.wrap-top-form form .form-control {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #24262b;
    background-color: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(28, 83, 113, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wrap-top-form form input.wpcf7-form-control:not(.wpcf7-submit) {
    height: 40px;
}

.wrap-top-form form textarea.wpcf7-form-control {
    height: 90px;
    min-height: 90px;
    resize: vertical;
}

.wrap-top-form form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.wrap-top-form form textarea.wpcf7-form-control:focus,
.wrap-top-form form .form-control:focus {
    border-color: var(--ffj-blue-01);
    box-shadow: 0 0 0 3px rgba(28, 83, 113, 0.12);
    outline: none;
}

.wrap-top-form form input.wpcf7-form-control:not(.wpcf7-submit)::placeholder,
.wrap-top-form form textarea.wpcf7-form-control::placeholder {
    color: #9aa3b2;
}

.wrap-top-form form .wpcf7-submit {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    background: var(--ffj-red-01);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px rgba(237, 73, 65, 0.28);
    transition: background-color 0.15s ease;
}

.wrap-top-form form .wpcf7-submit:hover {
    background: var(--ffj-red-02);
}

.wrap-top-form form .wpcf7-not-valid-tip {
    font-size: 12px;
    color: var(--ffj-red-02);
    margin-top: 4px;
}

.wrap-top-form form .wpcf7-response-output {
    margin: 12px 0 0;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
    padding: 10px 14px;
}

.wrap-top-form form .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 991px) {
    .wrap-consult-form {
        width: 100%;
    }

    .wrap-top-form .wrap-desc {
        width: 100%;
        margin-bottom: 28px;
    }
}

.ffj-footer-ux {
    display: flex;
    position: relative;
    padding-top: 60px;
    padding-bottom: 30px;
}

/* На телефоне строка копирайта во всю ширину, и плавающая кнопка WhatsApp
   (56px, 20px от низа) закрывала её конец: подвал — последний блок страницы,
   из-под кнопки его уже не прокрутить. Снизу отводится место под кнопку. */
@media (max-width: 767.98px) {
    .ffj-footer-ux {
        padding-bottom: 96px;
    }
}

.wrap-filter {
    background: var(--ffj-grey-02);
    padding: 20px 30px;
    height: fit-content;
    border-radius: 14px;
}

/* On mobile the filters stack above the product list — add spacing between them */
@media (max-width: 767.98px) {
    .catalog-wrapper .list-wrapper {
        margin-top: 30px;
    }
}

.wrap-filter .list-styled-link {
    font-size: 14px;
}

.wrap-filter .dropdown-toggle::after {
    display: inline-block;
    margin-left: .4em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: .2em solid transparent;
    border-bottom: 0;
    border-left: .2em solid transparent;
}

.wrap-filter .nav-vertical .nav-link {
    font-size: 16px;
    padding-bottom: 15px;
}

.wrap-filter .input-group-append {
    position: absolute;
    right: 0;
    top: 2px;
}

.wrap-filter #button-search {
    border: none;
    background: url(/wp-content/themes/facades/img/search-icon.svg) no-repeat center;
    height: 34px;
    width: 40px;
}

.wrap-filter .input-group>.custom-select:not(:last-child),
.wrap-filter .input-group>.form-control:not(:last-child) {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    font-size: 14px;
    height: 38px;
}

.wrap-filter .input-group>.form-control::placeholder {
    color: #e1e1ed;
}

.wrap-filter .form-inline .custom-select,
.form-inline .input-group {
    width: 100%;
}

.wrap-filter .btn-outline-blue {
    border: none;
    padding: 5px 0;
    text-decoration: underline;
    font-size: 14px;
}

.title-block {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    margin-bottom: 35px;

}

.category-description-bottom .title-block {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: 28px;
}

.category-description-bottom .flex-item {
    text-align: center;
    width: 32%;
}

.category-description-bottom .flex-item img {
    margin: 20px;
}

.category-description-bottom,
.category-description-bottom p {
    font-size: 14px;
    line-height: 22px;
}

.catalog-bottom-text p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.catalog-bottom-text li {
    margin-bottom: .5rem;
    line-height: 1.6;
}

.catalog-bottom-text p:last-child,
.catalog-bottom-text ul:last-child,
.catalog-bottom-text ol:last-child {
    margin-bottom: 0;
}

.main-icon-block .flex-item {
    width: 29%;
    text-align: center;
    margin-bottom: 40px;
}

.main-icon-block .flex-item img {
    margin-bottom: 25px;
}

/*
 * Пункты прижаты к верху: при flex-end заголовки соседних пунктов разной длины
 * стояли на разной высоте.
 */
.flex-item-numb {
    width: 48%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

/*
 * Колонка с цифрой фиксированной ширины. Раньше ширина 165px была только
 * flex-basis, колонка сжималась до ширины цифры, и текст у «1» и «4»
 * начинался с разных x, а круг, привязанный к правому краю цифры, у узкой «1»
 * уезжал за левый край экрана. Теперь и цифра, и круг стоят по центру колонки.
 * line-height: 1 — чтобы верх цифры был у верха пункта, на уровне заголовка.
 * Высота колонки с запасом на круг, который ниже цифры.
 */
.flex-item-numb .numb-wrap {
    position: relative;
    flex: 0 0 90px;
    width: 90px;
    height: 110px;
    font-size: 90px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    margin-right: 20px;
}

.flex-item-numb .numb-wrap span {
    position: relative;
}

.flex-item-numb .numb-wrap:before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background: #fe0000;
    position: absolute;
    border-radius: 40px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

/* Заголовок пункта — на уровне верха цифры. */
.flex-item-numb .desc-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 8px;
}

.wrap-item-faq {
    border: 1px solid #1c5371;
    margin-bottom: 20px;
    border-radius: 40px;
    position: relative;
    padding: 20px 20px 20px 80px;
    transition: all 0.5s;
    cursor: pointer;
}

.wrap-item-faq:before {
    content: '+';
    display: flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    background: #1c5371;
    position: absolute;
    border-radius: 40px;
    top: -1px;
    left: -2px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.5s;
}

.wrap-item-faq:hover:before {
    content: '+';
    background: #fe0000;
}

.wrap-item-faq.open:before {
    content: '-';
    background: #fe0000;
}

.wrap-item-faq .desc-faq {
    display: none;
}

.wrap-item-faq.open .desc-faq {
    display: block;
}

.wrap-item-faq .title-faq {
    font-size: 16px;
    font-weight: 600;
}

.wrap-item-faq.open .title-faq {
    margin-bottom: 25px;
}

/* Необязательная кнопка в ответе. Блок с шириной по содержимому — иначе она
   инлайновая и прилипает к концу последней строки ответа: текст приходит из ACF
   без обёртки в <p>. Отступ сверху задан на ней, а не на тексте: у ответа может
   не быть кнопки, и тогда лишний отступ был бы виден. */
.wrap-item-faq .faq-button {
    display: block;
    margin-top: 15px;
    width: fit-content;
}


.header-new__nav.show-menu {
    display: block;
    width: 320px;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 10;
}

.header-new__nav.show-menu .header-new__menu {
    display: flex;
    flex-direction: column;
}

/* The desktop header row is laid out for the 1140px container, but Bootstrap
   drops to a 960px one between 992px and 1199px: the logo gets squeezed, the
   phone number wraps and the e-mail runs into the actions. Trimming the type
   and collapsing the language button to its code buys back the missing space. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-new__logo {
        flex-shrink: 0;
    }

    .header-new__phone,
    .header-new__mail {
        font-size: 16px;
        white-space: nowrap;
    }

    .header-new__ic-phone {
        padding-left: 24px;
    }

    .header-new__ic-mail {
        padding-left: 28px;
    }

    .header-new__actions {
        gap: 8px;
    }

    .header-new__lang {
        padding: 0 12px;
    }

    .header-new__lang-name {
        display: none;
    }

    .header-new__lang-code {
        display: inline;
    }

    .button-callme {
        white-space: nowrap;
    }
}

@media (max-width: 1090px) {
    .header-new {
        padding: 14px 0 0;
    }

    .wrap-top-form:before {
        content: none;
    }
}

@media (max-width: 991px) {
    .header-new {
        padding: 15px 0 25px;
    }

    .header-new__col-2,
    .header-new__nav {
        display: none;
    }

    .header-new__nav.show-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        max-width: none;
        overflow-y: auto;
        padding: 90px 24px 24px;
    }

    .header-new__nav.show-menu .header-new__menu {
        gap: 8px;
    }

    .button-callme {
        height: 40px;
        width: 160px;
        line-height: 40px;
    }

    .insta-link,
    .header-new__lang {
        height: 40px;
        min-width: 40px;
    }

    .header-new__lang {
        padding: 0 12px;
    }

    .header-new__lang-name {
        display: none;
    }

    .header-new__lang-code {
        display: inline;
    }

    .navbar-nav>.nav-item>.nav-link,
    .child-item-list .nav-link {
        text-align: left;
        display: inline-block;
        padding-left: 0;
        padding-right: 0;
    }

    .child-item-list {
        margin-left: 20px;
    }

    .header-meni-close {
        right: 15px;
        top: 15px;
        position: absolute;
    }

    .header-new__main {
        flex-wrap: wrap;
        position: relative;
        z-index: 20;
    }

    .col-item-foot {
        padding: 0px;
        width: 46%;
    }

    .col-item-foot:last-child {
        width: 100%;
    }

    .wrap-top-form .title-block {
        font-size: 22px;
        line-height: 24px;
    }

    .main-icon-block .flex-item {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .header-new__col-1 {
        display: none;
    }

    .header-new__main {
        flex-wrap: nowrap;
        align-items: center;
    }

    .header-new__logo {
        order: 0;
        width: auto;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 0;
        margin-right: auto;
    }

    .header-new__logo img {
        width: 80px;
        height: auto;
    }

    .header-new__actions {
        order: 1;
        margin-right: 14px;
    }

    .header-new__actions .button-callme {
        display: none;
    }

    .navbar-light {
        order: 2;
    }

    .header-new {
        padding: 16px 0 14px;
    }

    .col-item-foot {
        width: 100%;
        margin-bottom: 40px;
    }

    .category-description-bottom .title-block {
        font-size: 20px;
    }

    .category-description-bottom .flex-item {
        width: 100%;
    }

    .main-icon-block .flex-item {
        width: 100%;
    }

    .flex-item-numb {
        width: 100%;
    }

    /* На телефоне колонка с цифрой уже — тексту остаётся больше места. */
    .flex-item-numb .numb-wrap {
        flex-basis: 70px;
        width: 70px;
        height: 88px;
        font-size: 72px;
        margin-right: 15px;
    }

    .flex-item-numb .numb-wrap:before {
        width: 64px;
        height: 64px;
        border-radius: 32px;
    }

    .flex-item-numb .desc-wrap {
        padding-top: 5px;
    }

    .wrap-input>div {
        width: 100%;
    }

    .header-new__nav.show-menu .header-new__menu .child-item-list .nav-link {
        padding-left: 10px;
    }
}

.why_kmew {
    padding-top: 3.875rem;
    padding-bottom: 3.875rem;
}

.why_kmew .title {
    padding-bottom: 6.875rem;
}

.why_kmew .title h2 {
    text-align: center;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1.75rem;
}

.why_kmew .red_text {
    color: var(--ffj-red-01);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.why_kmew .img_title {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
 * Ряд из трёх видео (templates/why-kmew-videos.php). Ролики разных пропорций —
 * один 4:3 — были разной высоты, и низ с панелями управления шёл лесенкой.
 * Одна рамка 16:9 на всех, ролик вписан в неё целиком; поля и рамка до
 * загрузки — чёрные, а не белые: без постера светлый первый кадр сливался
 * со страницей.
 */
.why-kmew-videos video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

.why_kmew .blue_text {
    color: #1c5371;
    margin-bottom: 1rem;
    font-weight: 700;
}

.why_kmew .bold {
    font-weight: 700;
}

.why_kmew .mt1 {
    margin-top: 1rem;
}

.why_kmew .table_holder {
    border: 1px solid red;
    padding: 8px;
}

.why_kmew .table_holder table {
    width: 100%;
}

.why_kmew .red {
    color: var(--ffj-red-01);
}

.why_kmew .right_small {
    font-size: 0.75rem;
    text-align: right;
    margin-top: 0.25rem;
}

.why_kmew .fs075 {
    font-size: 0.75rem;
}

.why_kmew .fs085 {
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .why_kmew {
        padding-top: 0rem;
        padding-bottom: 3rem;
    }

    .why_kmew .title {
        padding-bottom: 3rem;
    }

    .why_kmew .row {
        gap: 2rem;
    }

    .table_scroll_container {
        overflow: auto;
    }
}

.wrap-bottom-form form {
    padding: 50px 0 55px;
    position: relative;
    margin-bottom: 0;
}

.wrap-bottom-form form:before {
    content: '';
    position: absolute;
    background: url(/wp-content/themes/facades/img/bg-form-new.jpg) no-repeat center right;
    background-size: cover;
    height: 100%;
    width: 85%;
    top: 0;
    right: -250px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 90%, transparent 100%);
}

.modal-body.wrap-bottom-form {
    background: #fff;
    padding: 24px 28px 28px;
}

.modal-body.wrap-bottom-form form {
    padding: 0;
}

.modal-body.wrap-bottom-form form:before {
    display: none;
}

.modal-body.wrap-bottom-form form input.wpcf7-form-control:not(.wpcf7-submit),
.modal-body.wrap-bottom-form form textarea.wpcf7-form-control,
.modal-body.wrap-bottom-form form select.wpcf7-form-control,
.modal-body.wrap-bottom-form form .form-control {
    max-width: 100%;
}

.modal-body.wrap-bottom-form form .wpcf7-submit {
    width: 100%;
}

.modal-body.wrap-bottom-form form .inline-form-head {
    display: none;
}

.modal-body.wrap-bottom-form form p:has(.wpcf7-submit) {
    position: relative;
    margin-bottom: 0;
}

.modal-body.wrap-bottom-form form .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
    pointer-events: none;
}

.wrap-bottom-form form .inline-form-head {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    border-bottom: none;
    color: var(--ffj-blue-02);
}

.wrap-bottom-form form .inline-form-sub-head {
    font-size: 16px;
    margin-bottom: 24px;
    color: #4a5073;
}

.wrap-bottom-form form p {
    margin: 0 0 16px;
}

.wrap-bottom-form form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ffj-blue-02);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.wrap-bottom-form form .wpcf7-form-control-wrap {
    display: block;
}

/*
 * Краткая информация о данных над флажком формы (functions.php, фильтр
 * wpcf7_form_elements). Ширина — как у полей: в общей форме справа лежит
 * картинка, и текст на ней не читался бы. В модальном окне и на маршрутах
 * поля во всю ширину, и уведомление тоже.
 */
.wrap-bottom-form form .form-privacy-notice {
    max-width: 400px;
    margin: 0 0 12px;
    color: #4a5073;
    font-size: 12px;
    line-height: 1.5;
}

.modal-body.wrap-bottom-form form .form-privacy-notice,
.route-form.wrap-bottom-form form .form-privacy-notice {
    max-width: none;
}

.wrap-bottom-form form .form-privacy-notice a,
.wrap-top-form form .form-privacy-notice a {
    color: var(--ffj-blue-01);
    text-decoration: underline;
}

/* Форма консультации на лендинге каталога лежит в .wrap-top-form; колонка
   у неё и так узкая, ширину не ограничиваем. */
.wrap-top-form form .form-privacy-notice {
    margin: 0 0 12px;
    color: #4a5073;
    font-size: 12px;
    line-height: 1.5;
}

.wrap-bottom-form form input.wpcf7-form-control:not(.wpcf7-submit),
.wrap-bottom-form form textarea.wpcf7-form-control,
.wrap-bottom-form form .form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #24262b;
    background-color: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(28, 83, 113, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 400px;
    font-family: inherit;
}

.wrap-bottom-form form textarea.wpcf7-form-control {
    height: auto;
    min-height: 110px;
    resize: vertical;
}

.wrap-bottom-form form select.wpcf7-form-control {
    display: block;
    width: 100%;
    max-width: 400px;
    height: 40px;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: #24262b;
    background-color: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    font-family: inherit;
}

.wrap-bottom-form form input.wpcf7-file.wpcf7-form-control:not(.wpcf7-submit) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #6b7280;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.wrap-bottom-form form input.wpcf7-file.wpcf7-form-control:not(.wpcf7-submit):hover {
    border-color: var(--ffj-blue-01);
    background-color: #f2f7fb;
}

.wrap-bottom-form form input.wpcf7-file.wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--ffj-blue-01);
    box-shadow: 0 0 0 3px rgba(28, 83, 113, 0.12);
    outline: none;
}

.wrap-bottom-form form input.wpcf7-file.wpcf7-form-control::file-selector-button {
    margin-right: 12px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: var(--ffj-blue-01);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wrap-bottom-form form input.wpcf7-file.wpcf7-form-control::file-selector-button:hover {
    background-color: var(--ffj-blue-02);
}

.wrap-bottom-form form .form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #6b7280;
}

.wrap-bottom-form form p:has(> .form-hint) {
    margin-top: -10px;
}

.plans-form form .fields {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 20px;
}

.plans-form form .fields > label {
    margin-bottom: 16px;
}

@media (min-width: 576px) {
    .plans-form form .fields {
        grid-template-columns: 1fr 1fr;
    }

    .plans-form form .fields > p:has(textarea),
    .plans-form form .fields > label:has(textarea),
    .plans-form form .fields > p:has(input[type="file"]),
    .plans-form form .fields > label:has(input[type="file"]),
    .plans-form form .fields > p:has(> .form-hint) {
        grid-column: 1 / -1;
    }

    .plans-form form .fields > .field--full {
        grid-column: 1 / -1;
    }

    /*
     * Правило выше растягивает поле загрузки на всю ширину — оно писалось под
     * форму проектов, где такое поле одно. Там, где полей два (заявка на
     * панель), они встают в ряд, и форма не растёт на пустом месте.
     */
    .plans-form form .fields > label.field--file:has(input[type="file"]) {
        grid-column: auto;
    }

    /*
     * Группа галочек «¿Qué necesita?» тоже во всю ширину. Форма запроса
     * (CF7 1205) не оборачивает её в .field--full, как форма заявки на панель,
     * а кладёт в обычный <p>, и галочки теснились в левой колонке с переносами.
     */
    .plans-form form .fields > p:has(.wpcf7-checkbox) {
        grid-column: 1 / -1;
    }

    /*
     * Колонка не уже самой длинной подписи («Selección de serie / acabado»),
     * иначе в четыре колонки подписи переносятся. Только для этой группы:
     * у заявки на панель (.field--full) четыре коротких варианта и так
     * встают в один ряд.
     */
    .plans-form form .fields > p:has(.wpcf7-checkbox) .wpcf7-checkbox {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

/*
 * Подпись к группе полей, которую нельзя обернуть в <label>: CF7 ставит свой
 * <label> вокруг каждого варианта чекбокса, а вложенные label невалидны.
 * Выглядит как обычная подпись поля. В формах встречаются оба класса:
 * .field-title (заявка на панель) и .form-label (запрос с планами — как в
 * форме маршрутов, routes.css); без стиля .form-label была крупным обычным
 * текстом.
 */
.wrap-bottom-form form .field-title,
.wrap-bottom-form form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ffj-blue-02);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.plans-form form .fields > .field--full {
    margin-bottom: 16px;
}

/* Варианты чекбоксов в колонки: списком в столбик они занимают пол-экрана. */
.wrap-bottom-form form .wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 20px;
}

.wrap-bottom-form form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.wrap-bottom-form form textarea.wpcf7-form-control:focus,
.wrap-bottom-form form .form-control:focus {
    border-color: var(--ffj-blue-01);
    box-shadow: 0 0 0 3px rgba(28, 83, 113, 0.12);
    outline: none;
}

.wrap-bottom-form form input.wpcf7-form-control:not(.wpcf7-submit)::placeholder,
.wrap-bottom-form form textarea.wpcf7-form-control::placeholder {
    color: #9aa3b2;
}

.wrap-bottom-form form .wpcf7-submit {
    display: inline-flex;
    height: 42px;
    min-width: 180px;
    padding: 0 28px;
    margin-top: 8px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    background: var(--ffj-red-01);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px rgba(237, 73, 65, 0.28);
    transition: background-color 0.15s ease;
}

.wrap-bottom-form form .wpcf7-submit:hover {
    background: var(--ffj-red-02);
}

.wrap-bottom-form form .wpcf7-not-valid-tip {
    font-size: 12px;
    color: var(--ffj-red-02);
    margin-top: 4px;
}

.wrap-bottom-form form .wpcf7-response-output {
    margin-top: 16px;
    border-radius: 6px;
    border-width: 1px;
    font-size: 14px;
    padding: 10px 14px;
}

.wrap-bottom-form form .wpcf7-spinner {
    margin-left: 12px;
}

@media (max-width: 768px) {
    .wrap-bottom-form form {
        padding: 35px 0 40px;
    }

    .wrap-bottom-form form:before {
        opacity: 0.35;
    }

    .wrap-bottom-form form .inline-form-head {
        font-size: 26px;
    }

    .wrap-bottom-form form .wpcf7-submit {
        width: 100%;
    }
}

/*
 * Слева -10px компенсирует отступ 10px у кадра (#mygallery .slick-slide в
 * global.css), и первое фото встаёт по краю текста. Справа отрицательный
 * отступ выводил галерею на 10px за край контента.
 */
#mygallery {
    margin-left: -10px;
    margin-right: 0;
}

.project-info-row {
    margin-top: 32px;
    align-items: flex-start;
}

.project-info__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
}

.project-info__text {
    font-size: 16px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .project-info__panels > .row > [class*="col-"] {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .project-info__panels {
        margin-top: 24px;
    }
}

@media (min-width: 768px) {
    .project-panels-slider:not(.slick-initialized) {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow: hidden;
    }
}

.project-panels-slider .slick-track {
    display: -ms-flexbox;
    display: flex;
}

.project-panels-slider .slick-track::before,
.project-panels-slider .slick-track::after {
    display: none;
}

.project-panels-slider .slick-slide {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: none;
    height: auto;
}

.project-panels-slider .slider-prev-next-button {
    top: 120px;
}

.project-panels-slider .slider-button.previous {
    left: 27px;
}

.project-panels-slider .slider-button.next {
    right: 27px;
}

.wpcf7-form .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.5;
}

.wpcf7-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: .125rem 0 0;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.wpcf7-form input[type="checkbox"]:hover {
    border-color: var(--ffj-red-01);
}

.wpcf7-form input[type="checkbox"]:focus-visible {
    outline: 0;
    border-color: var(--ffj-red-01);
    box-shadow: 0 0 0 2px rgba(237, 73, 65, .25);
}

.wpcf7-form input[type="checkbox"]:checked {
    background-color: var(--ffj-red-01);
    border-color: var(--ffj-red-01);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .85rem;
}

.wrap-bottom-form form p:has(.wpcf7-acceptance) {
    margin: 18px 0;
}

.wrap-bottom-form form .wpcf7-acceptance label {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: #4a5073;
}

.wrap-bottom-form form .wpcf7-acceptance label a {
    color: var(--ffj-blue-01);
    text-decoration: underline;
}

.wrap-bottom-form form p:has(.wpcf7-submit) {
    margin-bottom: 0;
}

/* CF7 держит aria-hidden="true" на блоке ответа во всех состояниях, поэтому
   скрытие по этому атрибуту прятало и «Gracias…», и ошибки отправки. До отправки
   блок скрывают стили самого CF7; здесь убирается только пустая рамка. */
.wrap-bottom-form form .wpcf7-response-output:empty {
    display: none;
}

/* Поле-ловушка антиспама (functions.php, ffj_hp). Невидимое и нефокусируемое:
   автозаполнение браузера и менеджеры паролей его не заполнят, а в отправку
   CF7 (FormData) оно всё равно попадает. */
.ffj-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden !important;
}