/*
Theme Name: propulsion
Author: paluba
Author URI: https://paluba.media
Description: Тема для сайта msc-propulsion.ru
*/
@font-face {
    font-family: kelsonsans;
    src: url("kelsonsans.woff2") format("woff2"), url("kelsonsans.otf") format("opentype");
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

/* Картинки не шире своего блока — в том числе вставленные в текст без класса wp-image-N и миниатюры галерей.
   При сужении сохраняются пропорции из атрибутов width и height; одиночный height не трогаем */
img {
    max-width: 100%;
}

img[width][height] {
    height: auto;
}

video,
embed,
object {
    max-width: 100%;
}

video[width][height] {
    height: auto;
}

.row {
    --bs-gutter-x: 60px;
}

@media (max-width: 771px) {
    .row {
        --bs-gutter-y: 30px;
		--bs-gutter-x: 1.5rem;
    }
}

/* Ряды с отступом колонок 60px выходят за контейнер на 18px с каждой стороны. Если поле окна уже
   (992–995px, а с обычной полосой прокрутки Windows — до ~1012px), появлялась прокрутка вбок */
@media (min-width: 772px) and (max-width: 991.98px) {
    .site_main > .container,
    header > .container,
    footer > .container,
    .background_block > .container,
    .cookie_banner > .container {
        max-width: min(720px, calc(100% - 36px));
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site_main > .container,
    header > .container,
    footer > .container,
    .background_block > .container,
    .cookie_banner > .container {
        max-width: min(960px, calc(100% - 36px));
    }
}

body {
    font-family: 'kelsonsans', sans-serif;
}

/* Подвал прижат к низу окна, даже если содержимого мало: body — колонка во всю высоту окна,
   а <main> между шапкой и подвалом (header.php, footer.php) занимает свободное место. Внутри <main> обычный поток,
   поэтому отступы блоков, как и раньше, схлопываются. Панель WordPress у вошедших сдвигает страницу вниз — её высоту вычитаем */
body:not(.front_page) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.site_main {
    flex-grow: 1;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt45 {
    margin-top: 45px;
}

.mt70 {
    margin-top: 70px;
}

.pb30 {
    padding-bottom: 30px;
}

body.front_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    max-height: -webkit-fill-available;
    color: white;
    background-image: url('https://msc-propulsion.ru/wp-content/uploads/2023/09/group-3-2-1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #223440;
}

body.front_page::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 40%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -2;
    background: linear-gradient(180deg, #223440 0%, rgba(34, 52, 64, 0.00) 100%);
}

body.front_page::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 40%;
    bottom: 0%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -2;
    background: linear-gradient(180deg, rgba(34, 52, 64, 0.00) 0%, #223440 100%);
}

.front_page .logo {
    margin-top: 60px;
    display: flex;
    align-items: baseline;
    max-width: 80vw;
}

.front_page .logo svg {
    margin-right: 10px;
    height: auto;
}

.front_page .logo svg + svg {
    margin-left: 10px;
    margin-right: 6px;
}

.front_page .links {
    width: 100%;
    height: 100%;
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
}

.front_page .links a {
    display: flex;
    flex: 1 50%;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    position: relative;
}

.front_page .links a:hover::before {
    background: radial-gradient(50% 50.00% at 50% 50.00%, #36A9E1 0%, rgba(54, 169, 225, 0.00) 100%);
    content: ' ';
    display: block;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}

.front_page .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    gap: 25px;
    margin-bottom: 50px;
}

footer .contacts a,
.front_page .footer a {
    color: white;
    text-decoration: none;
    display: flex;
    gap: 10px;
    align-items: center;
}

footer .contacts a:hover,
.front_page .footer a:hover {
    text-decoration: underline;
}

footer .contacts span,
.front_page .footer span {
    text-align: center;
}

.rotate {
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg);  
    -o-transform: rotate(360deg);  
    transform: rotate(360deg);  
    -moz-animation-name: rotate;
    -moz-animation-duration: 8s;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 8s;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.gap_60_0 {
    gap: 60px 0;
}

@media screen and (max-width: 1300px) {
    .front_page .logo {
        margin-top: 40px;   
    }
	
	.front_page .footer {
		margin-bottom: 40px;
		gap: 10px;
	}
}

@media screen and (max-width: 900px) {
    .front_page .links a {
        font-size: 26px;
    }
}

@media screen and (max-width: 700px) {
    body.front_page {
        height: 100vh;
        background-size: 100% !important;
		background: #223440;
		background-image: url('/wp-content/themes/propulsion/back.png');
		background-repeat: repeat;
    }
    
    .front_page h1 {
        font-size: 40px;
        line-height: 50px;
    }
    
    .front_page h2 {
        font-size: 18px;
        line-height: 22px;
    }
    
    .front_page .links {
        flex-direction: column;
		margin: 40px 0;
    }
}

@media screen and (max-width: 500px) {
    .front_page h1 {
        font-size: 20px;
        line-height: 30px;
    }
    
    .front_page h2 {
        font-size: 16px;
        line-height: 22px;
    }
}

@media (min-width: 1500px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1424px;
    }
}

header {
    background: #223440;
    border-bottom: 9px solid #D0D0D0;
}

.header_contacts {
	margin-top: 0;
}

.header_contacts > section {
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 120px;
}

nav a {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
	text-wrap: wrap;
}

nav a:hover {
    text-decoration: underline;
}

.current-menu-item a,
footer .footer_menu .current-menu-item a,
.header_menu .current-menu-ancestor > a {
	color: #36A9E1;
}

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}

header button {
    display: none;
}

header .contacts {
    display: flex;
    flex-direction: column;
    gap: 15px;
	white-space: nowrap;
}

header .contacts a {
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    gap: 10px;
    width: 100%;
    text-decoration: none;
}

header .contacts a:hover {
    text-decoration: underline;
}

.header_menu .sub-menu {
    display: none;
    position: absolute;
    background: #223440;
    list-style: none;
    padding: 30px;
    margin-left: -30px;
    z-index: 999999;
    white-space: nowrap;
    left: -170%;
	width: 300px;
}

.header_menu .sub-menu li:first-child {
    padding-top: 30px;
}

.header_menu .menu-item-has-children {
    position: relative;
}

/* Подменю открывается наведением мыши, а на сенсорных экранах и с клавиатуры — нажатием (js/main.js).
   В мобильном меню (≤771px) только нажатием: пункт там во всю ширину, и подменю раскрывалось бы под курсором */
@media (hover: hover) and (min-width: 771.02px) {
    .header_menu .menu-item-has-children:hover .sub-menu {
        display: block;
    }
}

.header_menu .menu-item-has-children.open .sub-menu {
    display: block;
}

.collapse:not(.show) {
    display: block;
}

@media (max-width: 771px) {
    .collapse:not(.show) {
        display: none;
    }
    
    header button {
        display: block;
    }
}

h1 {
    color: var(--dark, #223440);
    font-size: 48px;
    font-size: min(48px, 11vw); /* на телефонах уже 437px длинные слова («ФИКСИРОВАННОГО») не помещались */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

h2,
.h2 {
    color: var(--dark, #223440);
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

p {
    color: var(--dark, #223440);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.big_numbers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 80px;
    color: var(--dark, #223440);
    text-align: center;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    justify-content: center;
}

.big_numbers span {
    font-size: 86px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.big_numbers div {
    max-width: 150px;
}

/* Колонка здесь 438–528px, а с отступами 80px блоку нужно 610px: цифры вылезали за её края */
@media (min-width: 992px) and (max-width: 1399px) {
    .big_numbers {
        gap: 24px;
    }
}

/* В шрифте нет жирного начертания: Safari рисует его синтетически и цифры шире,
   поэтому в самой узкой колонке (438px) кегль уменьшен */
@media (min-width: 992px) and (max-width: 1199px) {
    .big_numbers span {
        font-size: 76px;
    }
}

@media (max-width: 771px) {
    .big_numbers {
        gap: 30px;
        font-size: 16px;
    }
    
    .big_numbers span {
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}

/* Кнопки — сетка колонок равной ширины: при 2–4 файлах из ACF ряд переносится и не шире колонки */
.buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr)); /* «Сервисное обслуживание» — в одну строку */
    gap: 15px 20px;
}

.buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 5px;
    background: #36A9E1;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere; /* длинное название файла без пробелов не раздвигает страницу */
}

.buttons a:hover {
    background: #223440;
}

@media (max-width: 575.98px) {
    .buttons {
        grid-template-columns: 1fr;
    }
}

.production_block {
    position: relative;
    padding: 40px;
}

.product_item::before,
.production_block::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    background-image: url(/wp-content/themes/propulsion/back.png);
    background-repeat: repeat;
    background-size: 50%;
    pointer-events: none;
    z-index: -1;
}

.production_block h2 + div {
    color: var(--dark, #223440);
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}

/* Колонки с цифрами на 772–1399px узкие для кегля 70px: кегль считается от ширины колонки,
   пункты переносятся, только если иначе не помещаются, число не отрывается от единицы */
.blue_numbers {
    color: var(--d-gray, #949494);
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    container-type: inline-size;
}

.blue_numbers > div {
    flex: 1 1 0;
    max-width: max-content;
}

.blue_numbers .big {
    color: var(--light, #36A9E1);
    font-size: 40px; /* для браузеров без контейнерных единиц */
    font-size: clamp(30px, 11cqi, 70px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

.blue_numbers .big span {
    font-size: .57em;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (min-width: 1400px) {
    .blue_numbers {
        column-gap: 80px;
    }

    .blue_numbers .big {
        font-size: 70px;
    }
}

@media (max-width: 771px) {
    .production_block {
        padding: 20px;
    }

    .blue_numbers {
        gap: 20px 30px;
    }

    .blue_numbers .big {
        font-size: 30px;
    }

    .blue_numbers .big span {
        font-size: 20px;
    }
}

/* На экранах уже 360px блоки цифр встают друг под друга: в строку они помещаются только с подписями в 3–4 строки */
@media (max-width: 359px) {
    .big_numbers {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .blue_numbers > div {
        flex-basis: 100%;
        max-width: none;
    }
}

footer {
    background: #223440;
    background-image: url(/wp-content/themes/propulsion/back.png);
    background-repeat: repeat;
    background-size: 50%;
    padding: 60px 0;
    margin-top: 60px;
}

footer .contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    color: white;
    padding-top: 20px; /* сверху колонки — отступ ряда из Bootstrap, когда колонки стоят друг под другом */
}

/* Логотип в подвале сжимается по колонке; до 992px он стоит отдельной строкой (footer.php) */
footer .footer_logo {
    display: block;
    max-width: 396px;
}

footer .footer_logo svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    footer .footer_logo {
        max-width: 280px;
        margin: 0 auto 30px;
    }
}

@media (max-width: 771px) {
    footer .footer_logo {
        margin-bottom: 0;
    }
}

footer .contacts span {
    max-width: 300px;
}

footer .footer_menu {
    list-style: none;
    margin-top: 20px;
}

footer .footer_menu li {
    margin-bottom: 15px;
    text-align: center;
}

footer .footer_menu a {
    color: #FFF;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

footer .footer_menu a:hover {
    text-decoration: underline;
}

/* Документы о персональных данных: ссылки остаются и после того, как баннер закрыт (на всех страницах, кроме главной — там нет подвала) */
footer .legal_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 30px;
    margin-bottom: 30px;
}

footer .legal_links a {
    padding: 4px 0;
    color: #F2F2F2;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    text-wrap: balance; /* на 320px «данных» не остаётся одно на строке */
}

/* Чуть светлее фирменного #36A9E1: на светлых полосах узора подвала тот даёт 4,4:1 при норме 4,5:1 */
footer .legal_links a[aria-current],
footer .legal_links a:hover {
    color: #3CAEE4;
}

footer .legal_links a:hover {
    text-decoration: underline;
}

footer .legal_links a:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: 2px;
}

footer .paluba {
    color: #F2F2F2;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer .paluba a {
    color: #F2F2F2;
}

footer .paluba a:hover {
    color: #36A9E1;
}

footer ul {
    padding-left: 0;
}

@media (max-width: 771px) {
    footer {
        padding: 30px 0;
        margin-top: 30px;
    }
    
    footer .contacts {
        gap: 20px;
    }
    
    footer .mt70 {
        margin-top: 20px;
    }

    footer .legal_links {
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    footer .legal_links a {
        font-size: 14px;
        line-height: 20px;
    }
    
    footer .footer_menu a {
        font-size: 16px;
    }
}

.projects_slide img {
    max-width: 100%;
}

.projects_slider > div {
    margin-left: -20px;
    margin-right: -20px;
}

.projects_slide {
    margin: 0 20px;
}

.slick-arrow::before {
    display: none;
}

/* Стрелки — круглые кнопки 44×44 поверх фото. «Назад» стоит в DOM перед лентой (.slick-list)
   и без z-index оказывается под ней: нажатия перехватывала лента. Медиазапроса нет: slick
   включает стрелки по ширине окна без полосы прокрутки (js/main.js), и он с ней не совпадает */
.projects_slider .slick-arrow {
    z-index: 1;
    width: 44px;
    height: 44px;
    top: calc(50% - 28px); /* центр фото: подпись под фото (10px + 46px) смещает центр слайда */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.projects_slider .slick-prev {
    left: 4px;
}

.projects_slider .slick-next {
    right: 4px;
}

.projects_slider .slick-arrow:focus-visible {
    outline: 2px solid #223440;
    outline-offset: 2px;
}

/* slick прячет ненужные стрелки классом .slick-hidden — display: flex выше его перебивал бы */
.projects_slider .slick-arrow.slick-hidden {
    display: none;
}

@media (max-width: 771px) {
    .projects_slider > div {
        margin-left: -12px;
        margin-right: -12px;
    }

    .projects_slide {
        margin: 0 12px;
    }
}

.projects_slide .title {
    color: var(--dark, #223440);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
}

.projects_slide .description {
    color: var(--d-gray, #949494);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.lig {
    color: var(--d-gray, #949494);
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
}

.product_item {
    display: flex;
    gap: 24px;
    position: relative;
    padding: 25px;
    text-decoration: none;
}

.product_item .description p {
    color: #727272;
}

.product_item .props {
    color: var(--dark, #223440);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product_item .image {
	flex-grow: 0;
    flex-shrink: 0;
    max-width: 300px;
}

.product_item .image img {
	width: 100%;
}

/* Заголовок карточки (35px заглавными) шире узкой колонки: на ≤1199px картинка над текстом,
   на 1200–1499px картинка уже, кегль заголовка подстраивается под ширину текстовой колонки */
.product_item .holder {
    flex: 1 1 0;
    min-width: 0;
    container-type: inline-size;
}

.product_item .holder .title {
    font-size: min(35px, 12cqi);
    overflow-wrap: break-word;
}

@media (max-width: 1499px) {
    .product_item .image {
        flex-basis: 42%;
    }
}

@media (max-width: 1199px) {
    .product_item {
        flex-direction: column;
    }

    .product_item .image {
        flex-basis: auto;
    }
}

.product_item:hover::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #223440;
    z-index: -2;
}

.product_item:hover::before {
    opacity: 1;
}

.product_item:hover .h2,
.product_item:hover .description p,
.product_item:hover .props {
    color: #FFF;
}

iframe {
    max-width: 100%;
}

/* Медиа из редактора. Подпись к фото: WordPress пишет style="width:(N+10)px" — ограничиваем колонкой.
   Пропорции видео при сужении сохраняет js/main.js */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}

.wp-caption img {
    display: block;
}

.wp-caption-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.contacts_block {
    display: flex;
    flex-direction: column;
    gap: 45px;
    overflow-wrap: anywhere; /* длинное слово или e-mail не вылезет из колонки */
}

.contacts_block div {
    display: flex;
    gap: 20px;
}

.contacts_block div,
.contacts_block div a {
    color: #555;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    max-width: 300px;
}

.contacts_block div a:hover {
    text-decoration: underline;
}

.contacts_block svg {
    flex-grow: 0;
    flex-shrink: 0;
}

/* До 992px контакты и карта стоят друг под другом */
@media (max-width: 991.98px) {
    .contacts_row {
        --bs-gutter-y: 30px;
    }
}

.map_holder {
    position: relative;
    display: flex;
}

.map_holder iframe {
    padding-right: 30px;
}

.map_holder::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 30px;
    right: 0;
    top: 30px;
    bottom: -30px;
    background-image: url(/wp-content/themes/propulsion/back.png);
    background-repeat: repeat;
    background-size: 50%;
    pointer-events: none;
    z-index: -1;
}

.background_block {
    background-image: url('/wp-content/uploads/2023/08/group-17-min.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    margin-top: -9px;
}

.background_block h1 {
    color: #F6F6F6;
    margin-bottom: 30px;
}

.background_block .col-md-12 {
    display: flex;
    align-items: end;
}

.background_block .row,
.background_block .container {
    height: 100%;
}

.production_block ul {
    list-style: none;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 80px 1fr 80px 1fr 80px 1fr 80px 1fr;
    /* колонок столько, сколько помещается (в блоке «Сервисное обслуживание» на ≥1400px — 5, как в макете);
       170px — не меньше самого длинного слова «Компенсационные» */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 45px 80px;
}

.production_block ul li {
    position: relative;
    color: #646464;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.production_block ul li::before {
    content: '';
    background: #36A9E1;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    position: absolute;
    left: -30px;
    top: 0px;
}

/* На всю колонку растягиваются только картинки шаблона, а не картинки из текста товара */
.production_block .col-md-5 > img,
.production_block .col-lg-6 > img {
    width: 100%;
}

.map_holder img {
    width: 100%;
    padding-right: 30px;
}

.table_block .table_holder {
    overflow: auto;
}

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

.table_block .table_holder table th {
    color: #969696;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    padding: 10.5px 12px;
}

.table_block .table_holder table td {
    padding: 10.5px 12px;
}

.table_block .table_holder table tbody tr:nth-child(2n + 1) {
    background: #EFEFEF;
}

/* Цвет значений в таблице «Модельный ряд»: раньше задавался встроенным стилем ячеек, его вырезает wp_kses_post */
.table_block .table_holder table td .left-parameter {
    color: #445B6A;
}

.table_block .table_holder table tbody tr:hover {
    background: rgba(26, 81, 119, 0.30);
}

/* «Модельный ряд»: значения через дефис или дробь («YDFT-80», «1500-2100», «об/мин») js/main.js
   оборачивает в .nobr — они не рвутся. Таблица из 3+ колонок, которая не помещается даже с переносами
   по пробелам, не переносится совсем (.is-nowrap) и прокручивается; название модели всегда в одну строку */
.table_block .table_holder .nobr,
.table_block .table_holder table.table_wide.is-nowrap td,
.table_block .table_holder table.table_wide td:first-child {
    white-space: nowrap; /* название модели — всегда в одну строку */
}

/* Прокручиваемые таблицы («Модельный ряд» и таблицы из редактора): подсказка и тень у правого края —
   только когда таблица действительно шире блока (классы ставит js/main.js) */
.table_hint {
    display: none;
    margin: 0 0 8px;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.4;
}

.is-scrollable > .table_hint {
    display: block;
}

.table_scroll {
    position: relative;
}

.table_scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    background: linear-gradient(to left, rgba(34, 52, 64, .25), rgba(34, 52, 64, 0));
}

.is-scrollable:not(.is-scrolled-end) > .table_scroll::after {
    opacity: 1;
}

.table_holder:focus-visible {
    outline: 2px solid #223440;
    outline-offset: 2px;
}

/* Колонка «Модель» закреплена, если она не шире 40% блока; разделитель отделяет её от уходящих под неё колонок */
.table_block.has-sticky .table_holder th:first-child,
.table_block.has-sticky .table_holder td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: inset -1px 0 0 #d0d0d0;
}

/* тень справа от закреплённой колонки, когда под неё ушли другие колонки */
.table_block.has-sticky .table_holder th:first-child::after,
.table_block.has-sticky .table_holder td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    background: linear-gradient(to right, rgba(34, 52, 64, .2), rgba(34, 52, 64, 0));
}

.table_block.has-sticky.is-scrolled .table_holder th:first-child::after,
.table_block.has-sticky.is-scrolled .table_holder td:first-child::after {
    opacity: 1;
}

.table_block.has-sticky .table_holder tbody tr:nth-child(2n + 1) td:first-child {
    background-color: #EFEFEF;
}

/* закреплённая ячейка подсвечивается вместе со строкой */
.table_block.has-sticky .table_holder tbody tr:hover td:first-child {
    background-color: #fff;
    background-image: linear-gradient(rgba(26, 81, 119, .3), rgba(26, 81, 119, .3));
}

/* На планшетах и телефонах поля ячеек уже: больше колонок видно без прокрутки */
@media (max-width: 991.98px) {
    .table_block .table_holder table th,
    .table_block .table_holder table td {
        padding: 10px 6px;
    }
}

@media screen and (max-width: 1400px) {
	.header_contacts > section {
		gap: 80px;
	}
}

@media screen and (max-width: 1200px) {
	.header_contacts > section {
		gap: 40px;
	}
}

/* 772–991: пять пунктов меню не помещаются между логотипом и контактами и рассыпались на 3 ряда.
   Логотип и контакты — первой строкой, меню — второй строкой в один ряд */
@media (min-width: 771.02px) and (max-width: 991.98px) {
	.header_contacts > section {
		flex-wrap: wrap;
		gap: 6px 24px;
	}

	.header_contacts > section > .header_menu {
		order: 3;
		flex: 1 0 100%;
	}

	.header_contacts > section > .header_menu > .container {
		max-width: none;
		padding: 0;
	}

	.header_menu .navbar-nav {
		flex-wrap: nowrap;
	}
}

/* 992–1199: одна строка, как на ≥1200, но плотнее — иначе «Контакты» уходил во второй ряд */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header_contacts > section {
		gap: 24px;
	}

	header nav a {
		font-size: 16px;
	}

	.header_menu > .container {
		padding-left: 0;
		padding-right: 0;
	}

	.header_menu > .container > .row {
		--bs-gutter-x: 0;
	}
}

/* Сенсорные экраны с десктопной шапкой: зона нажатия пунктов верхнего уровня выше, раскладка не сдвигается;
   пункт подменю — строка во всю ширину панели */
@media (min-width: 771.02px) and (pointer: coarse) {
	header .header_menu .navbar-nav > li > a {
		display: inline-block;
		padding: 12px 0;
		margin: -12px 0;
	}

	header .header_menu .sub-menu {
		padding: 20px 30px;
	}

	header .header_menu .sub-menu li:first-child {
		padding-top: 20px;
	}

	header .header_menu .sub-menu a {
		display: block;
		padding: 10px 0;
		line-height: 24px;
		text-align: left;
	}
}

@media screen and (max-width: 771px) {
	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		max-width: 100vw; /* мобильный браузер расширяет окно по широкому содержимому — шапка и кнопка меню остаются в экране */
		z-index: 99999;
	}
	
	header .contacts a {
		font-size: 0;
	}
	
	header .header_menu + div {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	
	header .contacts svg {
		width: 26px;
		height: 26px;
	}
	
	header .contacts svg path {
		stroke: white;
	}
	
	header .contacts a + a {
		display: none;
	}
	
	.gap_60_0 {
		gap: 30px 0;
	}
	
	header .header_menu {
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: #223440;
		/* меню не выше остатка окна: на низких экранах (ландшафт) нижние пункты иначе недоступны */
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
	}

	/* прокрутка только у раскрытого меню: во время анимации (.collapsing) полоса прокрутки не мигает */
	header .header_menu.show {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* пункты во всю ширину и высотой 44px — удобно попадать пальцем */
	.navbar-nav {
		flex-direction: column;
		align-items: stretch;
	}

	header .header_menu nav li {
		width: 100%;
	}

	header .header_menu nav a {
		display: block;
		padding: 10px 0;
		line-height: 24px;
		text-align: left;
	}

	.production_block ul {
		display: block;
	}
	
	.production_block ul li {
		margin-bottom: 8px;
	}
	
	header section > a svg {
		height: 40px;
    	width: auto;
	}
	
	/* Подменю раскрывается внутри списка и сдвигает следующие пункты, а не перекрывает их */
	.header_menu .sub-menu {
		position: static;
		width: auto;
		margin-left: 0;
		padding: 0 0 0 15px;
		white-space: normal; /* длинный пункт переносится и в браузерах без text-wrap */
	}
	
	.header_menu .sub-menu li:first-child {
		padding-top: 0;
	}
	
	body:not(.front_page) {
		padding-top: 60px;
	}
}

/* Текстовые страницы (page.php): политика, документы; страница 404 */
.page_title {
    overflow-wrap: break-word; /* без переносов по слогам: в названиях документов все слова помещаются и на 320px */
}

.page_content {
    max-width: 900px;
}

.page_content h2,
.page_content h3 {
    margin: 30px 0 15px;
    text-transform: none;
}

.page_content h2 {
    font-size: 26px;
}

.page_content h3 {
    font-size: 20px;
}

.page_content ul,
.page_content ol {
    padding-left: 25px;
}

.page_content li {
    color: var(--dark, #223440);
    font-size: 16px;
    line-height: 26px;
}

.page_content li + li {
    margin-top: 6px;
}

/* Пропуски «____» в бланках и длинные адреса переносятся, а не растягивают страницу вбок */
.page_content > p,
.page_content li {
    overflow-wrap: break-word;
}

.page_content a {
    color: #1977a8;
}

.page_content a[href^="mailto:"] {
    white-space: nowrap;
}

/* Бланк заявления: адресат и заявитель — в правой половине, как в документе */
.page_content .form_to {
    margin-left: 50%;
}

/* Таблицы из редактора (обёртку добавляет фильтр the_content в functions.php):
   прокручивается таблица, а не вся страница */
.content_table {
    margin-bottom: 1rem;
}

.content_table .table_holder {
    overflow-x: auto;
}

.content_table table {
    width: 100%;
    border-collapse: collapse;
}

.content_table th,
.content_table td {
    padding: 8px 12px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #e3e3e3;
}

.content_table th {
    color: var(--dark, #223440);
    font-weight: 600;
}

/* Таблица «раздел — подпись строки — значение» (цели обработки в политике): строка-раздел выделена фоном,
   абзацы в ячейках — <div> (абзацы <p> в ячейках ломает сохранение из вкладки «Визуально») */
.content_table th[colspan] {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #EEF3F6;
    font-size: 17px;
    line-height: 24px;
}

.content_table th[scope="row"] {
    width: 28%;
}

.content_table td {
    color: var(--dark, #223440);
    line-height: 26px;
}

.content_table td > * + * {
    margin-top: 8px;
}

.content_table td > :last-child {
    margin-bottom: 0;
}

@media (max-width: 771px) {
    .content_table th,
    .content_table td {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (max-width: 575.98px) {
    .content_table th,
    .content_table td {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* на телефоне подпись строки — над значением, значение на всю ширину */
    .content_table .table_stack,
    .content_table .table_stack tbody,
    .content_table .table_stack tr,
    .content_table .table_stack th,
    .content_table .table_stack td {
        display: block;
        width: auto;
    }

    .content_table .table_stack th[scope="row"] {
        padding-bottom: 0;
        border-bottom: 0;
        color: #5B6770;
        font-size: 14px;
        line-height: 20px;
    }

    .content_table .table_stack td {
        padding-bottom: 12px;
    }
}

@media (max-width: 771px) {
    .page_title {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    .page_content h2 {
        font-size: 22px;
    }

    .page_content h3 {
        font-size: 18px;
    }

    .page_content .form_to {
        margin-left: 0;
    }
}

/* Баннер cookies (functions.php). Пока он открыт, у страницы отступ снизу по его высоте — подвал не закрыт,
   а элемент в фокусе браузер прокручивает выше баннера */
.cookie_banner_open {
    scroll-padding-bottom: calc(var(--cookie-banner-height, 0px) + 8px);
}

/* ...и ниже мобильной шапки (73px): на низком окне с баннером элемент в фокусе иначе попадал под неё. На главной шапки нет */
@media (max-width: 771px) {
    .cookie_banner_open:has(> body > header) {
        scroll-padding-top: 81px;
    }
}

.cookie_banner_open body {
    padding-bottom: var(--cookie-banner-height, 0px);
}

/* Главная занимает ровно экран, и на низких экранах баннер закрыл бы контакты внизу — пока он открыт, она прокручивается.
   Ссылки по-прежнему делят свободное место: от их высоты зависит подсветка при наведении */
.cookie_banner_open body.front_page {
    height: auto;
    min-height: 100vh;
    max-height: none;
}

.cookie_banner_open body.front_page .links {
    flex: 1 0 auto;
}

/* Не выше половины окна (горизонтальный телефон, крупный масштаб): остальное прокручивается внутри баннера.
   Вид без JavaScript — в functions.php (propulsion_cookie_banner_noscript) */
.cookie_banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999; /* ниже мобильной шапки (99999): открытое меню перекрывает баннер, а не он меню */
    max-height: 50vh;
    max-height: 50dvh;
    overflow-y: auto;
    padding: 20px 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: #223440;
    border-top: 3px solid #36A9E1;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.cookie_banner .container {
    display: flex;
    align-items: center;
    gap: 16px 40px;
}

.cookie_banner p {
    flex: 1;
    margin: 0;
    color: #FFF;
    font-size: 15px;
    line-height: 22px;
}

.cookie_banner a {
    color: #36A9E1;
    text-decoration: underline;
}

.cookie_banner a:hover {
    color: #FFF;
}

.cookie_banner .nobr {
    white-space: nowrap;
}

/* Тёмный текст: белый на голубом (#36A9E1) слишком бледный — контраст 2,6:1 при норме 4,5:1.
   Прозрачная рамка видна в режиме высокой контрастности Windows, иначе кнопку не отличить от текста */
.cookie_banner button {
    flex: none;
    min-width: 160px;
    min-height: 44px;
    padding: 6px 22px;
    border: 2px solid transparent;
    border-radius: 5px;
    background: #36A9E1;
    color: #223440;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
}

.cookie_banner button:hover {
    background: #FFF;
}

.cookie_banner a:focus-visible,
.cookie_banner button:focus-visible {
    outline: 2px solid #FFF;
    outline-offset: 2px;
}

/* Когда текст прокручивается внутри баннера, элемент в фокусе не прижимается к краю — рамка фокуса не срезана */
.cookie_banner a,
.cookie_banner button {
    scroll-margin-block: 6px;
}

@media (max-width: 575.98px) {
    .cookie_banner {
        padding-top: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .cookie_banner .container {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie_banner p {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-height: 500px) {
    .cookie_banner {
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .cookie_banner .container {
        gap: 10px 20px;
    }

    .cookie_banner p {
        font-size: 13px;
        line-height: 18px;
    }

    .cookie_banner button {
        min-width: 0;
        padding: 6px 14px;
        font-size: 16px;
    }
}

@media print {
    .cookie_banner {
        display: none;
    }

    .cookie_banner_open body {
        padding-bottom: 0;
    }
}