/* Start:/bitrix/templates/adaptive/css/tokens.css?17926557437594*/
/* Токены оформления. Значения из переменных Figma; имена - по роли, не по краске.
Тёмная тема - второй набор ниже, через [data-theme="dark"]. Блок с классом pf-light
остаётся светлым и в тёмной теме: плашки на фото, форма брони - так в тёмном макете. */
:root,
[data-theme="dark"] .pf-light {
    --pf-font-base: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;

    --pf-color-bg: #FFFFFF;                    /* Белый */
    --pf-color-surface: #F4F4F4;               /* Серая плашка */
    --pf-color-surface-accent: #F6F9FF;        /* Голубая плашка */
    --pf-color-surface-accent-hover: #DEE6FF;  /* Голуб пл hover */
    --pf-color-raised: #FFFFFF;                /* белая плашка на фоне: счётчики, тарифы */
    --pf-color-raised-2: #FFFFFF;              /* белая плашка внутри плашки: «О нас», поле рассылки */

    --pf-color-text: #171725;                  /* Текст */
    --pf-color-text-muted: #5B5B5B;            /* Текст второстепенный */
    --pf-color-text-accent: #6992BE;           /* Текст фиолетовый - по факту синий */
    --pf-color-fill-accent: #6992BE;           /* тот же синий - заливки: в тёмной теме не меняется */
    --pf-color-on-accent: #FFFFFF;             /* текст на синем, оранжевом и на фото */
    --pf-color-raised-in: #FFFFFF;             /* белая карточка внутри плашки: «Преимущества», координаты */
    --pf-color-fill-active: #6992BE;           /* выбранный таб, страница, кнопка по наведению */
    --pf-color-on-active: #FFFFFF;
    --pf-color-surface-brand: #6992BE;         /* большой синий блок: рассылка, шапка раздела услуг */
    --pf-color-link: #6992BE;                  /* ссылка в тексте статьи */
    --pf-color-overlay: rgba(23, 23, 37, 0.37); /* подложка под попапом */
    --pf-color-photo-shade: rgba(10, 14, 38, 0.73); /* «Затемнение» - градиент на фото */
    --pf-color-header-border: transparent;
    --pf-color-cta: #FA8741;                   /* кнопка брони - оранжевая */
    --pf-color-on-cta: #FFFFFF;

    --pf-color-surface-tab: #ECF2FF;           /* Фон табов */
    --pf-color-surface-club: #E5EBFF;          /* Плашка клубного тарифа */

    --pf-color-accent: #FA8741;                /* Оранжевый */
    --pf-color-success: #72BF01;               /* Зеленый */

    /* Ошибки формы: в переменных макета их нет, сняты с состояния «Ошибка» */
    --pf-color-surface-error: #FFF2F2;
    --pf-color-text-error: #FF5C5C;

    --pf-color-border-field: #E2E2E2;          /* Обводка полей формы */
    --pf-color-input: #B3B3BA;                 /* Input - плейсхолдер */

    --pf-h1-size: 56px;
    --pf-h1-lh: 69px;
    --pf-h1-weight: 700;

    /* На мобильном H1 и H2 в макете сведены к одному кеглю */
    --pf-h-mobile-size: 28px;
    --pf-h3-mobile-size: 22px;
    --pf-h2-size: 46px;
    --pf-h2-lh: 1;
    --pf-h2-weight: 700;

    --pf-h3-size: 26px;
    --pf-h3-lh: 1;
    --pf-h3-weight: 700;

    --pf-text-lg: 18px;
    --pf-text-md: 16px;
    --pf-text-sm: 14px;
    --pf-text-xs: 12px;
    --pf-text-lh: 1;                           /* как в макете, сверить с дизайнером в E1 */
    --pf-text-weight: 400;

    --pf-btn-size: 18px;
    --pf-btn-weight: 600;
    --pf-menu-mobile-size: 20px;
    --pf-menu-mobile-weight: 500;

    --pf-radius-pill: 100px;
    --pf-radius-btn: 30px;
    --pf-shadow-header: 0 4px 7.5px rgba(0, 0, 0, 0.08);
    --pf-shadow-pill: 0 4px 14px rgba(0, 0, 0, 0.13);

    --pf-gap-lg: 40px;

    --pf-container: 1520px;                    /* контент 1520 при поле 200 на 1920 */
    --pf-gutter: 20px;
}

/* Тёмная тема: переменные «Тем. тема …» из тёмного макета. Акценты - синий и
   оранжевый - общие. data-theme ставит скрипт в <head>, см. header.php */
:root[data-theme="dark"] {
    color-scheme: dark;

    --pf-color-bg: #151515;                    /* Тем. тема фон */
    --pf-color-surface: #353535;               /* Тем. тема Плашка */
    --pf-color-surface-accent: #353535;        /* Тем. тема Плашка */
    --pf-color-surface-accent-hover: #4F4F4F;  /* Тем. тема плашка hover */
    --pf-color-raised: #353535;                /* Тем. тема Плашка */
    --pf-color-raised-2: #272727;              /* Тем. тема плашка 2 уровень */

    --pf-color-text: #FFFFFF;                  /* Белый */
    --pf-color-text-muted: #B8B8B8;            /* Тем. тема текст второстепенный */
    --pf-color-text-accent: #FFFFFF;           /* синий текст и ссылки в тёмном макете белые */

    --pf-color-surface-tab: #353535;
    --pf-color-surface-club: #4F4F4F;

    --pf-color-surface-error: #3A2626;

    --pf-color-border-field: #4F4F4F;          /* Тем. тема обводка форм */
    --pf-color-input: #A8A8A8;                 /* Тем. тема input */

    /* Роли, которых в светлой теме не видно: там они совпадают с соседними */
    --pf-color-raised-in: #4F4F4F;             /* Тем. тема плашка hover - карточка внутри плашки */
    --pf-color-fill-active: #FFFFFF;           /* цветные кнопки и выбранное - белые */
    --pf-color-on-active: #151515;
    --pf-color-surface-brand: #353535;         /* синие блоки - плашкой */
    --pf-color-link: #5099E7;                  /* Тем. тема синий - ссылки в тексте статей */
    --pf-color-overlay: rgba(0, 0, 0, 0.7);
    --pf-color-photo-shade: rgba(33, 33, 33, 0.73);
    --pf-color-header-border: #3D3D3D;         /* в переменных макета нет */
    --pf-color-cta: #FFFFFF;                   /* цветные кнопки в тёмном макете белые */
    --pf-color-on-cta: #151515;
}

/* Островок светлой темы (форма брони, плашки на фото и на карточках аэропортов).
   Фон и текст светлые, а синий и оранжевый в тёмном макете на них - почти чёрные,
   голубые плашки - серые. Цвет текста наследуется от body - возвращаем светлый */
[data-theme="dark"] .pf-light {
    color-scheme: light;
    color: var(--pf-color-text);

    --pf-color-text: #151515;
    --pf-color-text-accent: #151515;
    --pf-color-fill-accent: #151515;
    --pf-color-fill-active: #FFFFFF;
    --pf-color-on-active: #151515;
    --pf-color-cta: #151515;
    --pf-color-on-cta: #FFFFFF;
    --pf-color-accent: #151515;
    --pf-color-surface-accent: #F4F4F4;
    --pf-color-surface-accent-hover: #E2E2E2;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/fonts.css?17926557431706*/
/* Inter с Google Fonts:
   https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap
   Взяты наборы latin, latin-ext и cyrillic, блоки ниже - оттуда без правок,
   кроме пути к файлу. Браузер качает файл, только если символы из его
   unicode-range есть на странице: latin-ext нужен ради знака ₽.
   Символы вне наборов рисует запасной шрифт из --pf-font-base.
   Пути latin и cyrillic совпадают с preload в header.php - меняются вместе. */

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/bitrix/templates/adaptive/css/../fonts/inter/latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/vendor/modern-normalize.css?17926557433338*/
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/reset.css?17926557431117*/
/*
Наш сброс, идёт после vendor/modern-normalize.css и не дублирует его:
normalize выравнивает браузеры, здесь - решения проекта.
*/

html {
    text-size-adjust: 100%;
}

/* Переходы по якорям на странице («Забронировать» → #bron) - плавной прокруткой.
   Кто просил систему убрать анимацию, получает обычный прыжок */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

:focus-visible {
    outline: 2px solid var(--pf-color-text-accent);
    outline-offset: 2px;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/base.css?17926557434952*/
/* Типографика, каркас, сетка, утилиты.
   Слои: tokens → fonts → vendor/modern-normalize → reset → base, порядок задан
   в header.php. template_styles.css и styles.css не заводим: ядро цепляет их само
   и всегда в конец набора (Asset::addTemplateCss), в этот порядок не встроить.
   Соглашения: БЭМ с префиксом pf-, цвета и размеры только через var(--pf-*),
   медиазапросы только min-width, селекторы плоские (без вложенности и :has() -
   держим Safari 15 / Chrome 100), без !important и id, без *.min.css. */

/* Типографика */

.pf-body {
    background-color: var(--pf-color-bg);
    color: var(--pf-color-text);
    font-family: var(--pf-font-base);
    font-optical-sizing: none;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-text-weight);
    line-height: var(--pf-text-lh);
}

h1,
.pf-h1 {
    font-size: var(--pf-h1-size);
    font-weight: var(--pf-h1-weight);
    line-height: var(--pf-h1-lh);
}

h2,
.pf-h2 {
    font-size: var(--pf-h2-size);
    font-weight: var(--pf-h2-weight);
    line-height: var(--pf-h2-lh);
}

h3,
.pf-h3 {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: var(--pf-h3-lh);
}

.pf-text-lg {
    font-size: var(--pf-text-lg);
}

.pf-text-sm {
    font-size: var(--pf-text-sm);
}

.pf-text-xs {
    font-size: var(--pf-text-xs);
}

.pf-text-muted {
    color: var(--pf-color-text-muted);
}

.pf-text-accent {
    color: var(--pf-color-text-accent);
}

/* Каркас страницы */

.pf-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.pf-main {
    flex: 1 1 auto;
}

.pf-container {
    width: 100%;
    max-width: calc(var(--pf-container) + var(--pf-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pf-gutter);
    padding-right: var(--pf-gutter);
}

.pf-container--flush {
    max-width: var(--pf-container);
    padding-left: 0;
    padding-right: 0;
}

/* Сетка. Колонки задаются модификатором или --pf-grid-cols на блоке */

.pf-grid {
    display: grid;
    grid-template-columns: repeat(var(--pf-grid-cols, 1), minmax(0, 1fr));
    gap: var(--pf-grid-gap, var(--pf-gutter));
}

.pf-grid--gap-lg {
    --pf-grid-gap: var(--pf-gap-lg);
}

/* Утилиты */

.pf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pf-hidden {
    display: none;
}

.pf-surface {
    background-color: var(--pf-color-surface);
}

.pf-surface-accent {
    background-color: var(--pf-color-surface-accent);
}

/* Брейкпоинты: 1200 - десктопное меню, ниже бургер */

/* Мобильный макет нарисован на 440: на 360-375 поля 20 съедают лишнее */
@media (max-width: 439px) {
    :root {
        --pf-gutter: 6px;
        /* поля карточек: в макете 20-30, на узком экране одинаковые и меньше */
        --pf-card-pad: 16px;
        /* промежуток между карточками в списках */
        --pf-card-gap: 12px;
    }
}

@media (min-width: 768px) {
    :root {
        --pf-gutter: 32px;
    }

    .pf-grid--2 {
        --pf-grid-cols: 2;
    }
}

@media (min-width: 1024px) {
    :root {
        --pf-gutter: 40px;
    }

    .pf-grid--3 {
        --pf-grid-cols: 3;
    }
}

@media (min-width: 1200px) {
    .pf-grid--4 {
        --pf-grid-cols: 4;
    }
}

@media (min-width: 1920px) {
    :root {
        --pf-gutter: 200px;
    }
}

/* Значок соцсети (include/social_icon.php): круг - акцентом, знак - цветом фона,
   в тёмной теме они меняются местами */
.pf-social-icon__circle {
    fill: var(--pf-color-text-accent);
}

.pf-social-icon__glyph {
    fill: var(--pf-color-bg);
}

/* Тёмная тема: иллюстрации в карточках в тёмном макете серые - обесцвечиваем
   те же картинки, отдельных тёмных файлов нет. Фото и картинки новостей - цветные */
[data-theme="dark"] :is(.pf-feature__icon, .pf-park-feature__icon, .pf-work__pic, .pf-services__pic) {
    filter: grayscale(1);
}

/* у карточки под курсором картинка в тёмном макете снова цветная */
[data-theme="dark"] :is(.pf-feature:hover .pf-feature__icon, .pf-park-feature:hover .pf-park-feature__icon, .pf-work__card:hover .pf-work__pic) {
    filter: none;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/controls.css?17926557434269*/
/* Базовые элементы управления: кнопка, поле, чекбокс.
   Подключается до блоков, которые их используют. */

/* Кнопка */

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--pf-radius-btn);
    font-size: var(--pf-btn-size);
    font-weight: var(--pf-btn-weight);
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
}

.pf-btn--primary {
    background-color: var(--pf-color-cta);
    color: var(--pf-color-on-cta);
}

/* Зелёная: в макете «Подписаться» */
.pf-btn--success {
    background-color: var(--pf-color-success);
    color: var(--pf-color-on-accent);
}

/* В тёмном макете и зелёная кнопка белая, как оранжевая */
[data-theme="dark"] .pf-btn--success {
    background-color: var(--pf-color-cta);
    color: var(--pf-color-on-cta);
}

.pf-btn--secondary {
    background-color: var(--pf-color-surface);
    color: var(--pf-color-text);
}

/* Контурная: в макете «Посмотреть маршрут» */
.pf-btn--outline {
    background-color: transparent;
    border: 2px solid var(--pf-color-accent);
    color: var(--pf-color-accent);
}

/* Крупная кнопка во всю ширину - в формах */
.pf-btn--block {
    width: 100%;
    height: 62px;
    border-radius: 15px;
}

/* Поле ввода и селект */

.pf-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.pf-field__control {
    width: 100%;
    height: 47px;
    padding: 0 13px;
    background-color: transparent;
    border: 1px solid var(--pf-color-border-field);
    border-radius: 15px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text);
    appearance: none;
}

.pf-field__control::placeholder {
    color: var(--pf-color-input);
}

/* Пустой select красим как placeholder: у него самого его нет */
.pf-field__control:invalid,
.pf-field__control:placeholder-shown {
    color: var(--pf-color-input);
}

/* Место под иконку освобождаем только там, где она есть */
.pf-field--icon .pf-field__control {
    padding-right: 40px;
}

.pf-field__icon {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Поле, на которое указала проверка формы */

.pf-field--error .pf-field__control {
    border-color: var(--pf-color-text-error);
}

.pf-check--error .pf-check__frame {
    stroke: var(--pf-color-text-error);
}

/* Чекбокс: системный прячем, показываем свою галочку */

/* галочка по центру текста в любую высоту; прозрачный input встаёт туда же,
   статичная позиция абсолютного ребёнка во flex тоже центруется */
.pf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* прозрачный input лежит поверх рамки: без своего курсора он вернёт стрелку */
.pf-check__input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pf-check__box {
    flex-shrink: 0;
}

.pf-check__frame {
    stroke: var(--pf-color-border-field);
}

.pf-check__tick {
    stroke: var(--pf-color-text);
}

/* Снят - остаётся пустая рамка */
.pf-check__input:not(:checked) + .pf-check__box .pf-check__tick {
    display: none;
}

.pf-check__input:focus-visible + .pf-check__box {
    outline: 2px solid var(--pf-color-text-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Десктопные размеры полей и кнопки: на мобильном макет мельче */
@media (min-width: 1200px) {
    .pf-field__control {
        height: 49px;
        font-size: var(--pf-text-md);
        line-height: 19px;
    }

    .pf-btn--block {
        height: 70px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/select.css?17926557433115*/
/* Свой список вместо системного: option в браузерах не стилизуется.
   Строится в js/select.js поверх обычного select. */

.pf-select__native {
    display: none;
}

.pf-select__button {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.pf-select__button--empty {
    color: var(--pf-color-input);
}

/* Открытый список - продолжение поля: общая рамка, без линии между ними */

.pf-select--open .pf-select__button {
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pf-select--open .pf-field__icon--chevron {
    transform: translateY(-50%) rotate(180deg);
}

.pf-select__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 30;
    /* пять строк, дальше прокрутка: времени в списке 48 */
    max-height: 245px;
    overflow-y: auto;
    /* минус пиксель накрывает прозрачную рамку поля: в макете панель 4 ряда по 49 */
    margin: -1px 0 0;
    padding: 0;
    list-style: none;
    background-color: var(--pf-color-bg);
    border: 1px solid var(--pf-color-border-field);
    border-top: 0;
    border-radius: 0 0 15px 15px;
}

/* Поле с ошибкой: панель приклеена к нему, рамка должна быть одного цвета */

.pf-field--error .pf-select__list {
    border-color: var(--pf-color-text-error);
}

.pf-select__option {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 0 13px;
    font-size: var(--pf-text-md);
    line-height: 19px;
    color: var(--pf-color-text-muted);
    cursor: pointer;
}

/* Наведение и выбранный пункт макет не показывает - берём плашки календаря */

.pf-select__option:hover,
.pf-select__option--active {
    background-color: var(--pf-color-surface-accent);
}

.pf-select__option--current {
    background-color: var(--pf-color-surface-accent-hover);
    color: var(--pf-color-text);
}

/* На телефоне - окно по центру экрана поверх затемнения, как у календаря */

.pf-select--modal.pf-select--open .pf-select__button {
    border-bottom-color: var(--pf-color-border-field);
    border-radius: 15px;
}

.pf-select__list--modal {
    position: fixed;
    top: 50%;
    right: auto;
    left: 50%;
    z-index: 100;
    width: min(320px, calc(100% - 32px));
    max-height: min(343px, calc(100% - 32px));
    margin: 0;
    border: 0;
    border-radius: 14px;
    transform: translate(-50%, -50%);
}

.pf-select__overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
}

.pf-select__overlay--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/header.css?179265574311730*/
/* Шапка. База - мобильная, десктоп от 1200 в медиазапросе внизу файла. */

/* Каркас. Шапка прилипает к верху окна и на мобильном, и на десктопе */

/* Якоря (#bron и др.) не уходят под прилипшую шапку: отступ = её высота, 88 = 20 + ряд 48 + 20 */
html {
    scroll-padding-top: 88px;
}

.pf-header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--pf-color-bg);
    box-shadow: 0 4px 6.4px rgba(0, 0, 0, 0.1);
}

/* Поля страницы ниже 440 ужаты (base.css), шапке и меню под бургером - прежние 20 */
@media (max-width: 439px) {
    .pf-header,
    .pf-menu {
        --pf-gutter: 20px;
    }
}

.pf-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    height: 48px;
}

/* Логотип */

.pf-logo {
    display: flex;
    flex-direction: column;
    color: var(--pf-color-text-accent);
}

.pf-logo__tagline {
    font-size: 12px;
    line-height: 14px;
}

.pf-logo__name {
    font-size: 21px;
    font-weight: 800;
    line-height: 25px;
    text-transform: uppercase;
}

/* Счётчики: на мобильном две строки, на десктопе две плашки.
   Мобильные стоят по центру между логотипом и плашкой (space-between строки) */

.pf-header__counters-mobile {
    color: var(--pf-color-text-accent);
    font-size: var(--pf-text-sm);
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.pf-header__counters-mobile b {
    font-weight: 800;
}

.pf-header__counters {
    display: none;
    align-items: center;
    gap: 20px;
}

.pf-counter {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background-color: var(--pf-color-raised);
    box-shadow: var(--pf-shadow-pill);
    border-radius: var(--pf-radius-pill);
    color: var(--pf-color-text-accent);
    line-height: 24px;
    white-space: nowrap;
}

.pf-counter__value {
    font-size: 20px;
    font-weight: 700;
}

/* Пробел из макета: во флекс-элементе он схлопнется без pre */
.pf-counter__space {
    font-size: 18px;
    white-space: pre;
}

.pf-counter__label {
    font-size: var(--pf-text-sm);
}

/* Плашка с иконками входа и меню - только мобильная */

.pf-header__pill {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 48px;
    padding: 0 20px;
    background-color: var(--pf-color-surface);
    border-radius: var(--pf-radius-pill);
}

/* Ниже 420 композиция макета не влезает: счётчики - УТП, клиентка просит их везде.
   Счётчики и плашка с иконками своего размера не меняют, уступает логотип: шрифт
   тянется за шириной экрана - 21 к 390, около 15 на 360. */
@media (max-width: 419px) {
    .pf-header__top {
        gap: 10px;
    }

    .pf-header__counters-mobile,
    .pf-header__pill {
        flex-shrink: 0;
    }

    .pf-header__counters-mobile {
        font-size: 12px;
        line-height: 15px;
    }

    .pf-logo__tagline {
        font-size: clamp(10px, (100vw - 280px) * 0.11, 12px);
        line-height: 1.2;
    }

    .pf-logo__name {
        font-size: clamp(14px, (100vw - 280px) * 0.19, 21px);
        line-height: 1.2;
    }
}

.pf-header__icon {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
}

/* Вошедшему значок кабинета - акцентный. Цвет в SVG зашит, поэтому перекрашиваем маской:
   сам img прячем (место он держит), маска рисует тот же значок акцентным цветом */
.pf-header__icon--auth {
    position: relative;
}

.pf-header__icon--auth img {
    visibility: hidden;
}

.pf-header__icon--auth::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--pf-color-accent);
    -webkit-mask: url("/bitrix/templates/adaptive/css/blocks/../../images/icon-login.svg") no-repeat center / contain;
    mask: url("/bitrix/templates/adaptive/css/blocks/../../images/icon-login.svg") no-repeat center / contain;
}

/* Панель меню под бургером - только мобильная */

/* Оверлей со своей прокруткой: в потоке низ панели был бы недосягаем */
.pf-menu {
    position: fixed;
    top: 88px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    overflow-y: auto;
    /* снизу - высота нижнего бара (tabbar.css): он выше меню и накрывал бы конец списка.
       Поднятая кнопка брони выступает над баром на 20px, в запас 40px она помещается */
    padding: 20px var(--pf-gutter) calc(40px + 69px + env(safe-area-inset-bottom, 0px));
    background-color: var(--pf-color-bg);
}

.pf-menu__theme {
    position: absolute;
    top: 20px;
    right: var(--pf-gutter);
}

.pf-menu__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-menu__link {
    display: block;
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

/* логотип, 30 и строки контактов - ~317 px: на 320 телефон и почта уходят под логотип */
.pf-menu__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 30px;
    margin-top: 25px;
}

.pf-menu__lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--pf-color-text-accent);
    font-size: var(--pf-menu-mobile-size);
    font-weight: var(--pf-menu-mobile-weight);
    line-height: 24px;
}

.pf-menu__social {
    display: flex;
    gap: 18px;
    margin-top: 32px;
}

.pf-menu__note {
    margin-top: 44px;
    font-size: var(--pf-text-xs);
    font-weight: 600;
    line-height: 15px;
}

/* Бургер превращается в крестик при открытом меню */

.pf-burger__close,
.pf-header--menu-open .pf-burger__open {
    display: none;
}

.pf-header--menu-open .pf-burger__close {
    display: block;
}

/* Страница под открытым меню не прокручивается */

.pf-body--locked {
    overflow: hidden;
}

/* Тема, телефон, вход - только десктоп. Прячем контейнер: пустой флекс съедал бы gap */

.pf-header__actions {
    display: none;
    align-items: center;
    gap: 20px;
}

.pf-theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
}

/* Переключатель темы (include/theme_toggle.php): в светлой кружок синий под
   солнцем, в тёмной - тёмный под луной, рамка заливается белым */
.pf-theme-toggle__frame {
    stroke: var(--pf-color-text);
}

.pf-theme-toggle__knob {
    fill: var(--pf-color-fill-accent);
}

.pf-theme-toggle__moon {
    fill: #151515;
}

.pf-theme-toggle__sun {
    fill: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__frame {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__knob {
    fill: #151515;
    transform: translateX(-35px);
}

[data-theme="dark"] .pf-theme-toggle__moon {
    fill: #FFFFFF;
}

[data-theme="dark"] .pf-theme-toggle__sun {
    fill: #151515;
}

.pf-phone {
    display: flex;
    flex-direction: column;
    width: 224px;
}

.pf-phone__number {
    font-size: 25px;
    font-weight: 800;
    line-height: 27px;
    white-space: nowrap;
}

.pf-phone__note {
    font-size: var(--pf-text-xs);
    line-height: 13px;
}

/* Вошедший в кабинет: имя (из старого шаблона, в макете его нет) и «Выйти».
   Шрифт имени как у "Выйти". Длинное имя обрезаем - иначе на 1200-1400 шапке не хватит ширины */

.pf-user {
    max-width: 160px;
    overflow: hidden;
    font-size: var(--pf-btn-size);
    font-weight: var(--pf-btn-weight);
    line-height: 22px;
    color: var(--pf-color-text-accent);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Выйти» в макете голубая, в отличие от серой «Войти» */
.pf-login--out {
    background-color: var(--pf-color-surface-club);
    color: var(--pf-color-text-accent);
}

/* Кнопка брони появляется только в компактном состоянии */

.pf-book {
    display: none;
}

/* Меню разделов - только десктоп */

.pf-nav {
    display: none;
}

.pf-nav__list {
    display: flex;
    justify-content: space-between;
    max-width: 1508px;
}

.pf-nav__link {
    display: block;
    height: 40px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
}

.pf-nav__item--active .pf-nav__link {
    position: relative;
    font-weight: 700;
}

.pf-nav__item--active .pf-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 25px;
    background-color: var(--pf-color-fill-accent);
}

/* Десктоп: 126 = 15 + ряд 51 + отступ 20 + меню 40 */

@media (min-width: 1200px) {
    html {
        scroll-padding-top: 126px;
    }

    .pf-header {
        padding-top: 15px;
        padding-bottom: 0;
        box-shadow: var(--pf-shadow-header);
    }

    .pf-header__top {
        gap: 0;
        height: 51px;
    }

    .pf-logo__tagline {
        font-size: 15px;
        line-height: 19px;
    }

    .pf-logo__name {
        font-size: 27px;
        line-height: 32px;
    }

    .pf-header__counters-mobile,
    .pf-header__pill,
    .pf-menu {
        display: none;
    }

    .pf-header__actions {
        display: flex;
    }

    .pf-nav {
        display: block;
        margin-top: 20px;
    }

    /* Компактное: только кнопка и цвет подписи. Геометрию не трогаем -
       в макете она другая, но на пороге прокрутки это дёргалось */
    .pf-header--compact .pf-book {
        display: inline-flex;
    }

    .pf-header--compact .pf-phone__note {
        color: var(--pf-color-text-accent);
    }
}

/* Счётчики от 1400: ниже компактной шапке не хватает ширины из-за кнопки брони.
   В обоих состояниях, иначе пропадали бы при прокрутке */

@media (min-width: 1400px) {
    .pf-header__counters {
        display: flex;
    }
}

/* Тёмная тема: логотип в меню и значок «Войти» - белые, как в макете */
[data-theme="dark"] :is(.pf-menu__logo, .pf-login__icon, .pf-header__icon img) {
    filter: brightness(0) invert(1);
}

/* Тёмная тема: вместо тени шапку отделяет полоса (в мобильном макете 1px, в десктопном 2px).
   Тенью, а не рамкой - чтобы не менять высоту шапки */
[data-theme="dark"] .pf-header {
    box-shadow: 0 1px 0 var(--pf-color-header-border);
}

@media (min-width: 1200px) {
    [data-theme="dark"] .pf-header {
        box-shadow: 0 2px 0 var(--pf-color-header-border);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/footer.css?17926557436253*/
/* Подвал. База - мобильная, десктоп от 1200 внизу файла.
   Верхний блок на grid: порядок в разметке и на экране разный. */

.pf-footer {
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
    padding-top: 35px;
    padding-bottom: 30px;
}

.pf-footer .pf-container {
    padding-left: 26px;
    padding-right: 26px;
}

.pf-footer__top {
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
}

/* Размеры по видимой части: в макете у логотипа прозрачные поля по краям.
   Обе стороны явно - иначе max-width из reset сплющивает пропорцию. */
.pf-footer__logo {
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
    width: 110px;
    height: 67px;
    max-width: none;
}

.pf-footer__contacts {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    color: var(--pf-color-text-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}

/* На мобильном колонки идут одним столбцом - шаг как между пунктами */
.pf-footer__cols {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}

.pf-footer__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pf-footer__link {
    font-size: var(--pf-menu-mobile-size);
    font-weight: var(--pf-menu-mobile-weight);
    line-height: 25px;
}

.pf-footer__social {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: 20px;
    margin-top: 47px;
}

.pf-footer__social .pf-social-icon {
    width: 47px;
    height: 46px;
}

.pf-footer__bar {
    margin-top: 32px;
    color: var(--pf-color-text-muted);
    font-size: var(--pf-text-xs);
    line-height: 15px;
}

.pf-footer__bar-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* Ниже 420 логотип и контакты на макетных размерах в строку не помещаются -
   макет нарисован на 440. Оставляем их в строке: поля как у карточек, контакты
   и логотип ужимаются вместе с экраном (на 360 контакты 20 px, на 320 - 18) */
/* поля подвала-плашки сверху и снизу ниже 440 - под стать карточкам */
@media (max-width: 439px) {
    .pf-footer {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (max-width: 419px) {
    .pf-footer .pf-container {
        padding-left: var(--pf-card-pad);
        padding-right: var(--pf-card-pad);
    }

    .pf-footer__top {
        justify-content: space-between;
        column-gap: 12px;
    }

    .pf-footer__logo {
        width: clamp(88px, 30vw, 110px);
        height: auto;
        aspect-ratio: 110 / 67;
    }

    .pf-footer__contacts {
        font-size: clamp(16px, 5.5vw, 22px);
        line-height: 1.3;
    }
}

/* Десктоп: логотип, три колонки, справа контакты, внизу полоса */

@media (min-width: 1200px) {
    .pf-footer {
        border-radius: 0;
        padding-top: 0;
        padding-bottom: 0;
        background-color: var(--pf-color-surface-accent-hover);
    }

    .pf-footer .pf-container {
        padding-left: var(--pf-gutter);
        padding-right: var(--pf-gutter);
    }

    .pf-footer__top {
        grid-template-columns: auto auto 1fr;
        padding-top: 34px;
        padding-bottom: 33px;
    }

    .pf-footer__logo {
        grid-row: 1 / span 2;
        width: 198px;
        height: 120px;
        margin-top: 26px;
        /* добираем прозрачное поле снизу, чтобы полоса легла на 218 */
        margin-bottom: 5px;
    }

    .pf-footer__cols {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: row;
        gap: 24px;
        margin-top: 26px;
        margin-left: 24px;
    }

    .pf-footer__list {
        gap: 25px;
    }

    /* Первая колонка - парковки, они выделены начертанием */
    .pf-footer__list:first-child .pf-footer__link {
        color: var(--pf-color-text);
        font-weight: 600;
    }

    .pf-footer__link {
        font-size: var(--pf-text-lg);
        font-weight: 400;
        line-height: 20px;
        color: var(--pf-color-text-muted);
    }

    .pf-footer__social {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 18px;
    }

    .pf-footer__social .pf-social-icon {
        width: 35px;
        height: 35px;
    }

    .pf-footer__contacts {
        grid-column: 3;
        grid-row: 2;
        gap: 6px;
        margin-top: 23px;
        font-size: 25px;
        font-weight: 500;
        line-height: 34px;
    }

    .pf-footer__bar {
        margin-top: 0;
        padding: 20px 0 22px;
        background-color: var(--pf-color-fill-accent);
        color: var(--pf-color-on-accent);
        font-size: var(--pf-text-lg);
        line-height: 24px;
    }
}

/* Шаг колонок в макете неравный, содержимым не задать. Ниже 1400 не влезает */

@media (min-width: 1400px) {
    .pf-footer__cols {
        gap: 0;
        margin-left: 59px;
    }

    .pf-footer__list:first-child {
        flex: 0 0 360px;
    }

    .pf-footer__list:nth-child(2) {
        flex: 0 0 259px;
    }
}

/* Тёмная тема: подвал - плашкой, нижняя полоса светлее, логотип белый */
[data-theme="dark"] .pf-footer {
    background-color: var(--pf-color-raised);
}

[data-theme="dark"] .pf-footer__logo {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .pf-footer__contacts {
    color: var(--pf-color-text-muted);
}

@media (min-width: 1200px) {
    [data-theme="dark"] .pf-footer__bar {
        background-color: var(--pf-color-surface-accent-hover);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/tabbar.css?17926557433831*/
/* Нижняя навигация. Только до 1200, на десктопе скрыта. */

.pf-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    height: 69px;
    /* на iPhone под баром живёт индикатор жестов */
    padding-bottom: env(safe-area-inset-bottom, 0);
    background-color: var(--pf-color-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -5.8px 9.3px rgba(188, 188, 201, 0.2);
}

/* Иконки разной высоты, но выровнены по общей полосе 27px */
.pf-tabbar__item {
    flex: 1 1 0;
    display: grid;
    grid-template-rows: 27px auto;
    align-content: start;
    justify-items: center;
    align-items: center;
    gap: 1px;
    padding-top: 16px;
    color: #1c1c1c;
    font-size: var(--pf-text-xs);
    line-height: 15px;
    text-align: center;
}

.pf-tabbar__item--active {
    color: var(--pf-color-text-accent);
}

/* Кнопка брони поднята над баром: белый ореол, синий круг, знак парковки */

.pf-tabbar__item--book {
    position: relative;
    grid-template-rows: auto;
    align-content: end;
    padding-top: 0;
    padding-bottom: 11px;
}

/* left/right явно: без них Safari ставит абсолютный элемент грида
   к левому краю ячейки, а не по justify-items */
.pf-tabbar__disc {
    position: absolute;
    right: 0;
    bottom: 31px;
    left: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--pf-color-fill-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--pf-color-bg);
}

/* Место под бар, чтобы он не накрывал конец страницы */

@media (max-width: 1199px) {
    .pf-layout {
        padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
    }

    /* Докрутка (scrollIntoView, якоря) не прячет низ под бар: бар 69px
       и кнопка брони, поднятая над ним ещё на 28px */
    html {
        scroll-padding-bottom: calc(69px + 28px + env(safe-area-inset-bottom, 0px));
    }
}

/* Кнопка чата Jivo стоит в правом нижнем углу и накрывает «Контакты» -
   поднимаем её над баром. __jivoMobileButton - единственный нехешированный
   класс кнопки. Свой отступ снизу Jivo ставит правилом из двух хешированных
   классов, поэтому класс повторён для веса и !important */

@media (max-width: 1199px) {
    .__jivoMobileButton.__jivoMobileButton.__jivoMobileButton {
        /* высота бара и 16px зазора */
        margin-bottom: calc(69px + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 1200px) {
    .pf-tabbar {
        display: none;
    }
}

/* Тёмная тема: бар в макете светлее плашки - цветом «Тем. тема плашка hover»,
   без тени; кольцо вокруг центральной кнопки - в цвет бара */
[data-theme="dark"] .pf-tabbar {
    background-color: var(--pf-color-surface-accent-hover);
    box-shadow: none;
}

[data-theme="dark"] .pf-tabbar__item {
    color: var(--pf-color-text);
}

[data-theme="dark"] .pf-tabbar__disc {
    box-shadow: 0 0 0 8px var(--pf-color-surface-accent-hover);
}

/* значки нарисованы синим, в тёмном макете они белые */
[data-theme="dark"] .pf-tabbar__item > img {
    filter: brightness(0) invert(1);
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/booking.css?17926557439673*/
/* Форма брони, дефолтное состояние. Ширина резиновая, в макете 480. */

.pf-booking {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    background-color: var(--pf-color-bg);
    border-radius: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    /* «Забронировать» ведёт сюда якорем #bron: форма встаёт с зазором от края окна */
    scroll-margin-top: 20px;
}

/* Мобильный макет на 440: на 360-375 поля 25 съедают ширину полей ввода */
@media (max-width: 439px) {
    .pf-booking {
        padding: var(--pf-card-pad);
    }
}

.pf-booking__title {
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: 27px;
    color: var(--pf-color-text);
}

.pf-booking__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-booking__label {
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

.pf-booking__row {
    display: flex;
    gap: 19px;
}

/* Пары полей везде в ряд и поровну, как в макете. До 500 поля ввода компактнее:
   шрифт 13, поля по бокам 10, поля формы 16 - так в одну строку влезают подсказка
   маски телефона "+7 (XXX) XXX-XX-XX" и "Выберите парковку (аэропорт вылета)".
   На 440-499 у формы десктопные поля 25, и половине строки не хватало под маску */
@media (max-width: 499px) {
    .pf-booking {
        padding: var(--pf-card-pad, 16px);
    }

    .pf-booking__row--contacts,
    .pf-booking__row--dates {
        gap: 10px;
    }

    .pf-booking .pf-field__control {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 13px;
    }

    .pf-booking .pf-field--icon .pf-field__control {
        padding-right: 34px;
    }
}

/* Ниже 375 подсказке маски в половине строки не хватает 7 px - имя и телефон мельче */
@media (max-width: 374px) {
    .pf-booking .pf-field--phone .pf-field__control,
    .pf-booking .pf-field:has(+ .pf-field--phone) .pf-field__control {
        font-size: 12px;
    }
}

.pf-booking__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    /* высоту держит min-height: в макете бокс на две строки текста */
    min-height: 53px;
    padding: 0 13px;
    background-color: var(--pf-color-surface);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
    text-align: center;
}

/* Стоимость: считается по мере заполнения полей */

.pf-booking__price {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 15px;
    color: var(--pf-color-text-accent);
}

.pf-booking__sum {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
}

.pf-booking__sum,
.pf-booking__base {
    white-space: nowrap;
}

.pf-booking__cur {
    font-size: 0.6em;
}

.pf-booking__days {
    padding: 6px 10px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 100px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    white-space: nowrap;
}

@media (max-width: 439px) {
    .pf-booking__price {
        gap: 8px;
        padding: var(--pf-card-pad, 16px);
    }
}

@media (max-width: 439px), (min-width: 1366px) and (max-width: 1599px) {
    .pf-booking__days {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Ошибка на месте той же плашки */

.pf-booking__error {
    padding: 10px 20px;
    background-color: var(--pf-color-surface-error);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-error);
    text-align: center;
}

/* display у блоков задан ниже по каскаду, чем [hidden] в браузере - гасим сами */

.pf-booking[hidden],
.pf-booking__hint[hidden],
.pf-booking__price[hidden] {
    display: none;
}

/* Согласие */

.pf-booking__policy {
    font-size: var(--pf-text-xs);
    line-height: 15px;
    color: var(--pf-color-input);
}

.pf-booking__policy a {
    color: var(--pf-color-text-muted);
}

/* Состояние после брони: занимает место формы */

.pf-booking__done {
    align-items: center;
}

.pf-booking__done-title {
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
    color: var(--pf-color-text);
    text-align: center;
}

.pf-booking__number {
    width: 100%;
    padding: 10px 20px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 10px;
    font-size: var(--pf-h3-size);
    font-weight: var(--pf-h3-weight);
    line-height: 31px;
    color: var(--pf-color-text-accent);
    text-align: center;
}

/* Две цены и калькулятор в правом нижнем углу */

.pf-booking__total {
    /* калькулятор прячется по ширине самой плашки: форма стоит и во всю ширину
       экрана, и в узкой колонке, поэтому ширина окна тут ничего не говорит */
    container: pf-total / inline-size;
    position: relative;
    width: 100%;
    padding: 20px 25px 25px;
    overflow: hidden;
    background-color: var(--pf-color-surface-accent);
    border-radius: 15px;
}

.pf-booking__total-main {
    color: var(--pf-color-text-accent);
}

.pf-booking__total-full {
    margin-top: 15px;
    color: var(--pf-color-input);
}

.pf-booking__total-main b,
.pf-booking__total-full b {
    display: block;
    margin-bottom: 7px;
    font-weight: var(--pf-h3-weight);
    line-height: normal;
}

.pf-booking__total-main b {
    font-size: 38px;
}

.pf-booking__total-full b {
    font-size: var(--pf-h3-size);
}

.pf-booking__total-main > span,
.pf-booking__total-full > span {
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

.pf-booking__calc {
    position: absolute;
    /* рамка из макета: 177x185 от left 289 на плашке 420 - вылезающий край режет плашка */
    right: -46px;
    bottom: 0;
    width: 177px;
    height: 185px;
    pointer-events: none;
}

/* Рамка рассчитана на плашку 420: на плашке уже калькулятор наезжает на суммы.
   Убираем, как в мобильном макете калькулятора на странице парковки.
   Запрос меряет контент без полей: 420 - 25 - 25 = 370 */
@container pf-total (max-width: 369px) {
    .pf-booking__calc {
        display: none;
    }
}

.pf-booking__note {
    width: 100%;
    padding: 10px 25px;
    background-color: var(--pf-color-surface);
    border-radius: 10px;
    font-size: var(--pf-text-lg);
    line-height: 22px;
    color: var(--pf-color-text);
    text-align: center;
}

/* Ниже 440 на макетных кеглях заголовок брони занимал пять строк,
   номер брони и сумма переносились, подсказка - девять строк */
@media (max-width: 439px) {
    .pf-booking__done-title,
    .pf-booking__number {
        font-size: 24px;
        line-height: 29px;
    }

    .pf-booking__total {
        padding: var(--pf-card-pad);
    }

    .pf-booking__total-main b {
        font-size: 30px;
    }

    .pf-booking__note {
        padding: 10px 15px;
        font-size: var(--pf-text-md);
        line-height: 20px;
    }
}

/* Десктопный макет формы крупнее мобильного: свои кегли и поля */

@media (min-width: 1200px) {
    /* шапка тут прилипает к верху, 126px (header.css) - форма встаёт под ней */
    .pf-booking {
        padding: 25px 30px;
        scroll-margin-top: 146px;
    }

    .pf-booking__title {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-booking__label {
        font-size: var(--pf-text-xs);
        line-height: 15px;
    }

    .pf-booking__hint {
        min-height: 35px;
        padding: 0 10px;
        font-size: var(--pf-text-xs);
        line-height: 15px;
    }
}

/* Невысокие экраны ноутбуков (1536x695 - 1920x1080 с масштабом 125% за вычетом
   панелей браузера): форма из макета в 617 не влезает в первый экран под шапкой.
   Ужимаем промежутки и кнопку - так она занимает 537 */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-booking {
        gap: 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .pf-booking .pf-btn--block {
        height: 56px;
    }
}

/* Временный контейнер первого экрана: в E2.1 его заменит баннер с формой */

.pf-firstscreen {
    max-width: 480px;
    margin: 40px 0;
}

/* в тёмном макете калькулятор на плашке с суммой серый */
[data-theme="dark"] .pf-booking__calc {
    filter: grayscale(1);
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/breadcrumbs.css?1792655743572*/
/* Хлебные крошки: строка ссылок акцентного цвета с уголками между ними */

.pf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-accent);
}

.pf-crumbs__link {
    color: inherit;
    text-decoration: none;
}

.pf-crumbs__link:hover {
    text-decoration: underline;
}

/* Уголок из макета, цвет берёт от текста */

.pf-crumbs__sep {
    flex-shrink: 0;
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/layout.css?17926557433822*/
/* Раскладка внутренних страниц: контент и форма брони справа от него. */

.pf-side {
    margin: 25px 0 90px;
}

/* крошки вынесены над колонками: свой отступ сверху им уже не нужен */
.pf-side__crumbs {
    margin-top: 25px;
}

/* под крошками колонки начинаются вместе: баннер вровень с формой */
.pf-side--under-crumbs {
    margin-top: 25px;
}

.pf-side__title {
    margin: 12px 0 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

/* В мобильном макете формы на внутренних страницах нет */
.pf-side__aside {
    display: none;
}

@media (min-width: 1200px) {
    .pf-side {
        margin: 56px 0 140px;
    }

    .pf-side__crumbs {
        margin-top: 56px;
    }

    .pf-side--under-crumbs {
        margin-top: 30px;
    }

    /* у страницы услуг нижний отступ до подвала свой */
    .pf-side--services {
        margin-bottom: 120px;
    }

    .pf-side__title {
        margin-top: 14px;
        font-size: var(--pf-h2-size);
        line-height: 56px;
    }
}

/* Форма справа - с 1366, как на странице парковки (parking.css): колонки делят
   ширину в пропорции макета, и уже форма сжимается до 350-400. Ниже формы нет,
   как в мобильном макете: «Забронировать» в шапке ведёт к форме главной */

@media (min-width: 1366px) {
    /* колонка контента из макета - 1000, форма 480, между ними 40 */
    .pf-side {
        display: grid;
        grid-template-columns: 1000fr 480fr;
        column-gap: 40px;
        align-items: start;
    }

    .pf-side__main {
        min-width: 0;
    }

    /* форма перекрывает контент: на странице услуги под неё уходит фото.
       При прокрутке колонка едет вниз под шапкой 126 с зазором 20. Форма выше
       окна прилипает низом, иначе кнопку не увидеть до конца страницы:
       высоту в --pf-sticky-height пишет js/header.js. Так же на странице парковки */
    .pf-side__aside {
        position: sticky;
        top: min(146px, calc(100vh - var(--pf-sticky-height, 0px) - 20px));
        z-index: 1;
        display: block;
        margin-top: -2px;
    }

    /* когда крошки вынесены наверх, поправка на их строку не нужна */
    .pf-side--under-crumbs .pf-side__aside {
        margin-top: 0;
    }
}

/* Невысокие экраны ноутбуков (1536x695), как первый экран главной (hero.css):
   крошки ближе к шапке, а форма страницы услуги поднимается к их строке - тогда
   она стоит, как на главной, на 20 под шапкой и влезает в окно целиком.
   Баннер под крошками дотягивается до её низа (service-page.css) */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-side__crumbs {
        margin-top: 20px;
    }

    .pf-side--under-crumbs {
        margin-top: 20px;
    }
}

@media (min-width: 1366px) and (max-height: 800px) {
    /* строка крошек 17 и отступ под ней 20 */
    .pf-side--under-crumbs .pf-side__aside {
        margin-top: -37px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/popup.css?17926557437563*/
/* Попапы: промо-новость, клубная карта и выбор схемы проезда. Это <dialog>, открытый через showModal():
   браузер сам ставит его по центру поверх страницы и держит фокус внутри. */

.pf-popup {
    /* поля до края экрана - как у мобильного макета; не --pf-gutter: на десктопе он 200 */
    flex-direction: column;
    gap: 20px;
    width: min(400px, 100% - 40px);
    max-width: none;
    max-height: calc(100% - 40px);
    padding: 25px;
    overflow-y: auto;
    /* белое окно на странице: в тёмной теме - плашка */
    background-color: var(--pf-color-raised);
    border: 0;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    color: var(--pf-color-text);
}

/* фокус браузер ставит на само окно при открытии - рамка вокруг попапа не нужна */
.pf-popup:focus {
    outline: none;
}

/* затемнение - «Текст» с прозрачностью 37%, как в макете */
.pf-popup::backdrop {
    background-color: var(--pf-color-overlay);
}

/* страница под открытым попапом не прокручивается */
.pf-body:has(.pf-popup[open]) {
    overflow: hidden;
}

/* закрытый dialog прячет сам браузер, открытому нужна своя раскладка */
.pf-popup[open] {
    display: flex;
}

.pf-popup__title {
    margin: 0;
    font-weight: var(--pf-h2-weight);
    line-height: normal;
}

.pf-popup p {
    margin: 0;
}

.pf-popup__button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 30px;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

@media (hover: hover) {
    .pf-popup__button:hover {
        background-color: var(--pf-color-fill-active);
        color: var(--pf-color-on-active);
    }
}

.pf-popup__close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pf-color-text-accent);
    cursor: pointer;
}

.pf-popup__close svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Промо: картинка, заголовок, текст и кнопка на статью */

.pf-popup__pic {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 218px;
    object-fit: cover;
    border-radius: 20px;
}

.pf-popup__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-popup__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--pf-text-sm);
    line-height: normal;
}

.pf-popup--promo .pf-popup__title {
    font-size: var(--pf-h-mobile-size);
}

.pf-popup__text a {
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

/* крестик промо - в голубом круге поверх картинки */
.pf-popup--promo .pf-popup__close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 15px;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 50%;
}

/* Клубная карта: список условий, кнопка на /club/ и карты, срезанные низом попапа */

.pf-popup--club {
    align-items: stretch;
    padding: 30px 30px 0;
}

.pf-popup--club .pf-popup__title,
.pf-popup--schemes .pf-popup__title {
    padding-right: 40px;
    font-size: var(--pf-h3-mobile-size);
}

.pf-popup__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--pf-text-sm);
    line-height: normal;
}

.pf-popup__list li {
    position: relative;
    min-height: 23px;
    padding-left: 33px;
}

.pf-popup__list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height: 23px;
    background: url("/bitrix/templates/adaptive/css/blocks/../../images/club/check.svg") no-repeat center / contain;
}

.pf-popup__note {
    padding: 10px 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 8px;
    font-size: var(--pf-text-sm);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-accent);
}

.pf-popup__caption {
    font-size: var(--pf-text-sm);
    line-height: normal;
    text-align: center;
    color: var(--pf-color-text-muted);
}

.pf-popup__cards {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: 298px;
    max-width: 100%;
    height: auto;
}

.pf-popup--club .pf-popup__close,
.pf-popup--schemes .pf-popup__close {
    top: 25px;
    right: 25px;
    width: 22px;
    height: 22px;
}

/* Выбор схемы проезда (страница парковки): заголовок и крестик как у клубной карты,
   под ними по кнопке на направление */

.pf-popup--schemes {
    align-items: stretch;
    padding: 30px;
}

@media (min-width: 768px) {
    .pf-popup {
        border-radius: 40px;
    }

    .pf-popup--promo {
        width: 657px;
        gap: 30px;
        padding: 30px;
    }

    .pf-popup--promo .pf-popup__pic {
        height: 316px;
    }

    .pf-popup__text {
        gap: 15px;
        font-size: 20px;
    }

    .pf-popup--promo .pf-popup__title {
        font-size: var(--pf-h2-size);
    }

    /* в десктопном макете кнопка промо крупнее и жирнее, чем у клубной карты */
    .pf-popup--promo .pf-popup__button {
        font-size: 20px;
        font-weight: 700;
    }

    .pf-popup--promo .pf-popup__close {
        width: 64px;
        height: 64px;
        padding: 20px;
    }

    .pf-popup--club {
        width: 514px;
    }

    .pf-popup--club .pf-popup__title,
    .pf-popup--schemes .pf-popup__title {
        font-size: var(--pf-h3-size);
    }

    .pf-popup--club :is(.pf-popup__list, .pf-popup__note, .pf-popup__caption) {
        font-size: var(--pf-text-lg);
    }

    .pf-popup--club .pf-popup__button,
    .pf-popup--schemes .pf-popup__button {
        font-size: var(--pf-btn-size);
    }

    .pf-popup__cards {
        width: 394px;
        margin-top: -5px;
    }
}

/* Тёмная тема: голубая плашка в окне - светлее окна, иначе сольётся с ним */
[data-theme="dark"] .pf-popup__note {
    background-color: var(--pf-color-surface-accent-hover);
}

/* галочки нарисованы синим, в тёмном макете они белые */
[data-theme="dark"] .pf-popup__list li::before {
    filter: brightness(0) invert(1);
}

/* поля карточек ниже 440 - одни на весь сайт, --pf-card-pad (base.css) */
@media (max-width: 439px) {
    .pf-popup {
        padding: var(--pf-card-pad);
    }
}

/* "Стоимость парковки без карты: 430 р/сут." в 14 на 360 шире попапа на 6 px -
   ниже 375 мельче, чтобы шла одной строкой */
@media (max-width: 374px) {
    .pf-popup__caption {
        font-size: 13px;
    }
}

/* End */


/* Start:/bitrix/components/niges/cookiesaccept/templates/.default/style.css?17377545583526*/
.nca-cookiesaccept-line {
    font-size: inherit;
    font-family: inherit;
    line-height: 1;
    padding: 10px;
}

.nca-cookiesaccept-line-button {
//	width: 100%;
 //   padding-left: 5%;
 //   padding-right: 0 !important;
}

.nca-cookiesaccept-line-button button
{
    background-color: #00b956;
    height: 52px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    outline: none;
    overflow: hidden;
    padding: 0 32px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color .3s, color .3s;
    transition: background-color .3s, color .3s;
    vertical-align: top;
}



.nca-cookiesaccept-line.style-1 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-3 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-5 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-7 .nca-cookiesaccept-line-text {
    color:#111;
}
.nca-cookiesaccept-line.style-2 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-4 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-6 .nca-cookiesaccept-line-text,
.nca-cookiesaccept-line.style-8 .nca-cookiesaccept-line-text {
    color:#eee;
}

.nca-cookiesaccept-line.style-1 {
    /* background-position: center;
    background-repeat: repeat-x;
	background-image: url(/bitrix/components/niges/cookiesaccept/templates/.default/images/style-1-2.svg);
    background-size: contain; */
    background-color: rgb(61, 168, 255); 
}

.nca-cookiesaccept-line.style-2 {
    background-color: rgb(13, 62, 102);
}


.nca-cookiesaccept-line.style-3 {
    background-color: rgb(197, 197, 197);
}

.nca-cookiesaccept-line.style-4 {
    background-color: rgb(71, 71, 71);
}

.nca-cookiesaccept-line.style-5 {
    background-color: rgb(61, 255, 158);
}

.nca-cookiesaccept-line.style-6 {
    background-color: rgb(9, 92, 50);
}

.nca-cookiesaccept-line.style-7 {
    background-color: rgb(84, 255, 61);
}

.nca-cookiesaccept-line.style-8 {
    background-color: rgb(92, 5, 5);
}

.nca-cookiesaccept-line.style-9 {
    background-color: rgb(203, 255, 61);
}

.nca-cookiesaccept-line.style-10 {
    background-color: rgb(70, 94, 4);
}

.nca-cookiesaccept-line.style-11 {
    background-color: rgb(255, 148, 61);
}

.nca-cookiesaccept-line.style-12 {
    background-color: rgb(138, 70, 14);
}

.nca-cookiesaccept-line.style-13 {
    background-color: rgb(255, 61, 61);
}

.nca-cookiesaccept-line.style-14 {
    background-color: rgb(119, 22, 22);
}

.nca-cookiesaccept-line.style-15 {
    background-color: rgb(255, 61, 152);
}

.nca-cookiesaccept-line.style-16 {
    background-color: rgb(85, 10, 45);
}

.nca-cookiesaccept-line.style-17 {
    background-color: rgb(83, 129, 255);
}

.nca-cookiesaccept-line.style-18 {
    background-color: rgb(6, 37, 122);
}

 
.nca-cookiesaccept-line.style-19 {
    background-color: rgb(255, 255, 255);
}

.nca-cookiesaccept-line.style-20 {
    background-color: rgb(0, 0, 0);
}
 

@media screen and (min-width:767.01px) {
	.nca-hidden-pc {display: none !important;}
}
@media screen and (max-width:767px) {
	.nca-hidden-mobile {display: none !important;}
}
/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/parking.css?179265574370921*/
/* Страница парковки. Первый экран: фотографии парковки и форма брони,
   которая на десктопе наезжает на правый край снимка - как в макете. */

/* обёртка страницы держит микроразметку Product; с 1366 она же сетка страницы с формой, см. ниже */
.pf-park-product {
    display: contents;
}

.pf-park-hero {
    display: grid;
    /* minmax нужен: иначе форма шириной 480 растянет колонку и порвёт мобильную */
    grid-template-columns: minmax(0, 1fr);
    margin: 26px 0 98px;
}

.pf-park-hero__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 400 / 374;
    border-radius: 30px;
    /* фон - цветом страницы: под сглаженным краем скругления подложка просвечивает,
       и контрастный цвет даёт ободок. Белый текст до загрузки фото держит затемнение */
    background-color: var(--pf-color-bg);
    /* горизонтальный свайп листает кадры (js/banner.js), а не уводит браузер
       жестом "назад"; прокрутка страницы и масштаб остаются */
    touch-action: pan-y pinch-zoom;
}

/* Кадры лежат стопкой, видимый проявляется поверх остальных */

.pf-park-hero__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.pf-park-hero__slide--active {
    opacity: 1;
}

/* Затемнение под заголовком: две трети высоты снимка */
.pf-park-hero__shade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64.3%;
    background-image: linear-gradient(to top, var(--pf-color-photo-shade) 19.5%, transparent 82.8%);
}

.pf-park-hero__chips {
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-park-hero__chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: var(--pf-color-bg);
    border-radius: var(--pf-radius-pill);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-btn-weight);
    line-height: 15px;
    color: var(--pf-color-text-accent);
    /* тексты плашек у парковок свои, длинный на узком экране переносится внутри плашки */
    max-width: 100%;
}

.pf-park-hero__chip img {
    flex-shrink: 0;
    width: 10px;
    height: auto;
}

/* Заголовок и плашка с ценой стоят в ряд по нижнему краю снимка, по высоте
   по центру друг друга. Длинному заголовку цена уступает место и переносится
   над ним: wrap-reverse кладёт второй ряд сверху */

.pf-park-hero__caption {
    position: absolute;
    right: 20px;
    bottom: 74px;
    left: 20px;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 15px;
}

/* в макете заголовок в две строки: «Парковка» и название, плашка с ценой вплотную.
   Название переносится, только если не влезает и во всю ширину снимка */
.pf-park-hero__title {
    flex-shrink: 0;
    max-width: 100%;
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h1-weight);
    line-height: 34px;
    color: var(--pf-color-on-accent);
}

/* заголовок всегда в две строки: "Парковка" и название, название не переносится */
.pf-park-hero__title-rest {
    display: block;
    white-space: nowrap;
}

.pf-park-hero__price {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 10px 17px 12px 12px;
    background-color: var(--pf-color-bg);
    border-radius: 10px;
    font-size: 10px;
    line-height: 12px;
    color: var(--pf-color-text);
    text-decoration: none;
}

.pf-park-hero__amount {
    display: block;
    margin-bottom: 5px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-h2-weight);
    line-height: 19px;
}

/* Форма заходит на низ снимка, как плитки парковок на главной */
.pf-park-hero__form {
    position: relative;
    margin-top: -56px;
}

/* поля карточек ниже 440 (--pf-card-pad, base.css): чипы и подпись снимка.
   Ниже 400 они встают в поток - блок ниже, он и перебивает top */
@media (max-width: 439px) {
    .pf-park-hero__chips {
        top: var(--pf-card-pad);
        right: var(--pf-card-pad);
        left: var(--pf-card-pad);
    }

    .pf-park-hero__caption {
        right: var(--pf-card-pad);
        left: var(--pf-card-pad);
    }

    /* Название в заголовке не переносится (.pf-park-hero__title-rest). Шрифт
       подобран под самое длинное, "Домодедово Park&Fly" (350 при 28 px): оно
       занимает всю ширину подписи (экран - 44) - 28 px до 400, 25 на 360, 22 на 320.
       Цена рядом, пока помещается, иначе над заголовком (wrap-reverse) */
    .pf-park-hero__title {
        font-size: min(28px, calc(8vw - 4px));
        line-height: 1.2;
    }
}

/* Ниже 400 чипы переносятся в три строки и наезжают на заголовок. Чипы и подпись
   встают в поток, снимок растёт под них. Высота не меньше пропорции 400/374,
   нижнее поле - под форму */
@media (max-width: 399px) {
    .pf-park-hero__media {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        aspect-ratio: auto;
        min-height: calc((100vw - 2 * var(--pf-gutter)) * 374 / 400);
        padding: var(--pf-card-pad) var(--pf-card-pad) 74px;
    }

    .pf-park-hero__chips,
    .pf-park-hero__caption {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pf-park-hero__slide {
        transition: none;
    }
}

/* С 768 чипы и подпись стоят в потоке, как ниже 400: если цена ушла над длинным
   заголовком и всё вместе не влезает в пропорцию, снимок
   растёт под содержимое. clip, а не hidden: под hidden пропорция не даёт расти */
@media (min-width: 768px) {
    .pf-park-hero__media {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        overflow: clip;
        aspect-ratio: 1116 / 596;
        padding: 40px 40px 83px;
    }

    .pf-park-hero__chips,
    .pf-park-hero__caption {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }

    .pf-park-hero__chips {
        gap: 18px;
    }

    .pf-park-hero__chip {
        gap: 10px;
        padding: 8px 18px;
        font-size: var(--pf-btn-size);
        line-height: 22px;
    }

    .pf-park-hero__chip img {
        width: auto;
        height: auto;
    }

    .pf-park-hero__caption {
        gap: 30px;
    }

    /* до десктопа заголовок мельче: снимок ниже, чем в макете */
    .pf-park-hero__title {
        font-size: 40px;
        line-height: 1.232;
    }

    /* плашка с ценой - десктопная, уменьшенная вместе с заголовком: 40 из 56 */
    .pf-park-hero__price {
        padding: 11px 11px 12px 12px;
        border-radius: 12px;
        font-size: var(--pf-text-xs);
        line-height: normal;
    }

    .pf-park-hero__amount {
        margin-bottom: 5px;
        font-size: 21px;
        line-height: normal;
    }
}

/* Десктоп. Форма до 1366 стоит под снимком, как на планшете
   (раскладка с формой справа - ниже, от 1366) */

@media (min-width: 1280px) {
    .pf-park-hero {
        margin: 45px 0 34px;
    }

    .pf-park-hero__title {
        font-size: var(--pf-h1-size);
        line-height: var(--pf-h1-lh);
    }

    .pf-park-hero__price {
        padding: 16px 16px 17px 17px;
        border-radius: 17px;
        font-size: var(--pf-text-md);
    }

    .pf-park-hero__amount {
        margin-bottom: 7px;
        font-size: 30px;
    }
}

/* Выбор между парковками одного аэропорта: карточки над снимком, выбранная - голубая,
   остальные серые и ведут на свою страницу. На десктопе стоят в левой колонке. */

.pf-park-choice {
    margin-bottom: 20px;
}

.pf-park-choice__title {
    margin: 0 0 15px;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-park-choice__title-long {
    display: none;
}

.pf-park-choice__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-park-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    background-color: var(--pf-color-surface);
    border-radius: 30px;
    color: var(--pf-color-text-muted);
}

.pf-park-card--current {
    background-color: var(--pf-color-surface-accent-hover);
    color: var(--pf-color-text);
}

.pf-park-card__head {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pf-park-card__name {
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: normal;
}

.pf-park-card__price {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: normal;
    white-space: nowrap;
}

/* Значок рубля: у невыбранной карточки серый, по наведению знак темнеет вместе
   с текстом, у выбранной - синий на голубом круге */
.pf-park-card__rub {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.pf-park-card__rub-bg {
    fill: #E2E2E2;
}

.pf-park-card__rub-sign {
    fill: var(--pf-color-text-muted);
}

.pf-park-card--current .pf-park-card__rub-bg {
    fill: #D1DDF5;
}

.pf-park-card--current .pf-park-card__rub-sign {
    fill: var(--pf-color-text-accent);
}

/* в тёмном макете: невыбранная - знак #B8B8B8 на круге #4F4F4F, выбранная - белый на #353535 */
[data-theme="dark"] .pf-park-card__rub-bg {
    fill: var(--pf-color-surface-accent-hover);
}

[data-theme="dark"] .pf-park-card--current .pf-park-card__rub-bg {
    fill: var(--pf-color-surface);
}

.pf-park-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-park-card__chip {
    padding: 5px 10px;
    background-color: var(--pf-color-raised-in);
    border-radius: var(--pf-radius-pill);
    font-size: var(--pf-text-xs);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
}

.pf-park-card--current .pf-park-card__chip {
    color: var(--pf-color-text-accent);
}

/* Плашки на телефоне (макет Mobile 440): короткий текст и значки в кругах. До 768
   карточки уже 350, и полные тексты плашек вытягивают их в рост - там тоже они */
.pf-park-card__compact {
    display: none;
}

@media (max-width: 767px) {
    .pf-park-card__chips {
        display: none;
    }

    .pf-park-card__compact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .pf-park-card__compact .pf-park-card__chip {
        margin: 0;
    }

    .pf-park-card__icons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pf-park-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background-color: var(--pf-color-raised-in);
        border-radius: 50%;
    }

    /* значок - маской, цвет - как у текста плашек карточки */
    .pf-park-card__icon::before {
        width: 14px;
        height: 14px;
        background-color: currentColor;
        -webkit-mask: var(--pf-chip-icon) center / contain no-repeat;
        mask: var(--pf-chip-icon) center / contain no-repeat;
        content: "";
    }

    .pf-park-card--current .pf-park-card__icon {
        color: var(--pf-color-text-accent);
    }
}

/* Ниже 400 в карточке меньше 140: "Домодедово" в 22 и "10 мин от аэропорта" в одну
   строку влезают только с полями уже макетных */
@media (max-width: 399px) {
    .pf-park-card {
        padding: 10px;
    }

    .pf-park-card__name {
        font-size: 20px;
    }

    .pf-park-card__compact .pf-park-card__chip {
        padding-right: 8px;
        padding-left: 8px;
    }
}

/* кнопка прижата к низу: карточки в ряду одной высоты, а пунктов у них разное число */
.pf-park-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    margin-top: auto;
    background-color: #DCDCDC;
    border-radius: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-muted);
    text-decoration: none;
}

.pf-park-card--current .pf-park-card__button {
    background-color: rgba(105, 146, 190, 0.16);
    color: var(--pf-color-text-accent);
}

/* Тёмная тема. Невыбранная карточка в макете темнее плашки (#282828, берём плашку 2 уровня),
   кнопка «Выбрать» остаётся светло-серой с тёмным текстом; у выбранной карточки кнопка
   и плашки белые. Наведения у невыбранной карточки в тёмном макете нет - оставляем как
   в светлом, только своими цветами */
[data-theme="dark"] .pf-park-card {
    background-color: var(--pf-color-raised-2);
}

[data-theme="dark"] .pf-park-card--current {
    background-color: var(--pf-color-surface-accent-hover);
}

[data-theme="dark"] .pf-park-card__button {
    color: var(--pf-color-on-active);
}

[data-theme="dark"] .pf-park-card--current .pf-park-card__chip,
[data-theme="dark"] .pf-park-card--current .pf-park-card__icon,
[data-theme="dark"] .pf-park-card--current .pf-park-card__button {
    background-color: var(--pf-color-fill-active);
    color: var(--pf-color-on-active);
}

@media (hover: hover) {
    [data-theme="dark"] .pf-park-card:not(.pf-park-card--current):hover {
        background-color: var(--pf-color-surface);
    }

    [data-theme="dark"] .pf-park-card:not(.pf-park-card--current):hover .pf-park-card__button {
        background-color: var(--pf-color-fill-active);
        color: var(--pf-color-on-active);
    }
}

.pf-park-card__button svg {
    width: 25px;
    height: auto;
}

/* Невыбранная карточка кликается целиком: ссылка «Выбрать» растянута на неё */
.pf-park-card {
    position: relative;
}

a.pf-park-card__button::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 30px;
}

@media (hover: hover) {
    .pf-park-card:not(.pf-park-card--current):hover {
        background-color: #EAEAEA;
        color: var(--pf-color-text);
    }

    .pf-park-card:not(.pf-park-card--current):hover .pf-park-card__button {
        background-color: #C7C7C7;
        color: var(--pf-color-text-muted);
    }

    .pf-park-card:not(.pf-park-card--current):hover .pf-park-card__rub-sign {
        fill: var(--pf-color-text);
    }
}

@media (min-width: 1280px) {
    .pf-park-choice {
        margin-bottom: 40px;
    }

    .pf-park-choice__title {
        margin-bottom: 20px;
        font-size: var(--pf-h3-size);
    }

    .pf-park-choice__title-long {
        display: inline;
    }

    .pf-park-choice__title-short {
        display: none;
    }

    .pf-park-choice__list {
        gap: 40px;
    }

    .pf-park-card {
        padding: 20px 25px 25px;
    }

    .pf-park-card__name {
        font-size: var(--pf-h-mobile-size);
    }

    .pf-park-card__price {
        font-size: 20px;
    }

    .pf-park-card__rub {
        width: 24px;
        height: 24px;
    }

    .pf-park-card__chips {
        gap: 15px;
    }

    .pf-park-card__chip {
        font-weight: var(--pf-h3-weight);
        line-height: 15px;
    }

    .pf-park-card__button {
        font-size: var(--pf-btn-size);
    }

    .pf-park-card__button svg {
        width: 31px;
    }

    .pf-park-hero--choice {
        margin-top: 30px;
    }
}

/* Отступ до подвала задаёт обёртка, а не последний блок: у парковки без текста
   о ней страница заканчивается виджетом ВК */
.pf-park-page {
    margin-bottom: 66px;
}

@media (min-width: 1280px) {
    .pf-park-page {
        margin-bottom: 120px;
    }
}

/* С 1366 форма справа, снимок уходит под неё на 76 пикселей - как в макете,
   и форма едет вниз при прокрутке через всю страницу. В макете колонка 1000 +
   поле 40 + форма 480 - это контейнер 1520; уже 1600 форма сужается, а тарифы
   и оценки перестраиваются под узкую колонку (блок ниже).
   Сеткой становится обёртка Product, а первый экран раскрывается в неё: снимок
   и содержимое страницы - в левой колонке, форма - в правой через все ряды */

@media (min-width: 1366px) {
    .pf-park-product {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 480px;
        grid-template-rows: auto 1fr;
        column-gap: 40px;
        margin-top: 45px;
    }

    .pf-park-hero {
        display: contents;
    }

    /* снимок шире колонки контента: на 1920 это ровно 1116, как в макете.
       align-self не даёт гриду растянуть снимок по высоте формы: в макете
       форма ниже снимка на 19 пикселей. */
    .pf-park-hero__media {
        grid-area: 1 / 1 / 2 / 3;
        align-self: start;
        margin-right: 404px;
        /* форма больше не заходит на низ снимка - подпись опускается к краю */
        padding-bottom: 27px;
    }

    /* форма накрывает правые 76 пикселей снимка (480 + 40 - 404): правая стрелка
       кадров (slides.css) - левее неё */
    .pf-park-hero__media .pf-slides__arrow--next {
        right: 96px;
    }

    /* прилипает как колонка внутренних страниц, см. layout.css */
    .pf-park-hero__form {
        position: sticky;
        top: min(146px, calc(100vh - var(--pf-sticky-height, 0px) - 20px));
        z-index: 1;
        grid-area: 1 / 2 / 3 / 3;
        align-self: start;
        margin-top: 0;
    }

    /* ниже первого экрана содержимое идёт колонкой в 1000, справа форма - как в макете.
       До 1366 формы сбоку нет, и колонка во всю ширину - вровень со снимком */
    .pf-park-page {
        grid-area: 2 / 1 / 3 / 2;
        max-width: 1000px;
        margin-top: 34px;
    }

    /* С выбором снимок уходит под карточки и встаёт в колонку 1000, форма справа
       через поле 40 и выше снимка - вровень с заголовком выбора, как в макете */
    .pf-park-product--choice {
        grid-template-rows: auto auto 1fr;
        margin-top: 30px;
    }

    .pf-park-hero--choice .pf-park-choice {
        grid-area: 1 / 1 / 2 / 2;
    }

    .pf-park-hero--choice .pf-park-hero__media {
        grid-area: 2 / 1 / 3 / 2;
        margin-right: 0;
    }

    /* с выбором снимок в своей колонке, форма на него не заходит */
    .pf-park-hero--choice .pf-slides__arrow--next {
        right: 20px;
    }

    .pf-park-hero--choice .pf-park-hero__form {
        grid-area: 1 / 2 / 4 / 3;
        margin-top: 15px;
    }

    .pf-park-product--choice .pf-park-page {
        grid-area: 3 / 1 / 4 / 2;
    }
}

/* Невысокие экраны ноутбуков (1536x695), как первый экран главной (hero.css):
   отступ под шапкой меньше, форму ужимает booking.css, а снимок не выше окна
   за вычетом шапки, отступа и зазора 12 до края - иначе его низ обрезан */

@media (min-width: 1280px) and (max-height: 800px) {
    .pf-park-hero {
        margin-top: 20px;
    }

    .pf-park-hero__media {
        max-height: calc(100vh - 158px);
    }

    /* форма здесь уже, чем на главной, подсказка в ней в две строки - и на 15 выше.
       Промежутки ещё на 2 меньше: она снова в окне */
    .pf-park-hero__form .pf-booking {
        gap: 10px;
    }
}

@media (min-width: 1366px) and (max-height: 800px) {
    .pf-park-product {
        margin-top: 20px;
    }

    /* с выбором форма встаёт вровень с верхом заголовка выбора: с поправкой на
       его строку она не влезает */
    .pf-park-hero--choice .pf-park-hero__form {
        margin-top: 0;
    }
}

/* 1366-1599: колонка контента 750-890 вместо макетных 1000. Форма сужается
   до 400, как на внутренних страницах, снимок уходит под неё на те же 76 */

@media (min-width: 1366px) and (max-width: 1599px) {
    .pf-park-product {
        grid-template-columns: minmax(0, 1fr) 400px;
    }

    .pf-park-hero__media {
        margin-right: 364px;
    }
}

/* Блок «Почему нас выбирают»: плашка с заголовком, стрелками и рядом карточек.
   Карточек больше, чем видно сразу - остальные листаются стрелками. */

.pf-park-features {
    --pf-page: 3;

    padding: 20px;
    background-color: var(--pf-color-surface-tab);
    border-radius: 20px;
}

.pf-park-features__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.pf-park-features__title {
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-park-features__nav {
    display: flex;
    flex-shrink: 0;
    gap: 14px;
    /* на последней странице стрелка выключена, и быстрые тапы по ней iOS
       принимает за двойной и увеличивает экран: maximum-scale он не слушает */
    touch-action: manipulation;
}

.pf-park-features__arrow {
    display: block;
    width: 45px;
    height: 45px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.pf-park-features__arrow--prev {
    transform: rotate(180deg);
}

.pf-park-features__arrow:hover:not([disabled]) {
    opacity: 0.8;
}

.pf-park-features__arrow[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* круг белый в обеих темах, стрелка - цветом кнопки: синяя, в тёмной теме #151515 */
.pf-park-features__arrow {
    color: var(--pf-color-fill-accent);
}

.pf-park-features__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .pf-park-features__arrow {
    color: var(--pf-color-bg);
}

.pf-park-features__grid {
    display: grid;
    gap: 20px;
    /* горизонтальный жест отдаём листалке, вертикальный остаётся прокруткой страницы */
    touch-action: pan-y;
}

/* до запуска скрипта лишние карточки прячем стилями: без него блок
   выглядит как в макете, дальше страницы переключает листалка */
.pf-park-features:not([data-pager-ready]) .pf-park-feature:nth-child(n+4) {
    display: none;
}

.pf-park-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px 13px 6px;
    background-color: var(--pf-color-raised-in);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

/* Наведение: карточка подсвечивается, как в том же блоке на главной */
.pf-park-feature:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

/* display на карточке перебивает hidden, поэтому прячем её явно */
.pf-park-feature[hidden] {
    display: none;
}

.pf-park-feature__icon {
    flex-shrink: 0;
    object-fit: contain;
    width: 57px;
    height: 59px;
}

.pf-park-feature__title {
    margin: 0;
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-park-feature__text {
    margin: 4px 0 0;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text-muted);
}

/* Ниже 400 "выбирают?" (162 px) и стрелки 45 px в одну строку не помещаются,
   правая стрелка уходит за край. Стрелки мельче, поля плашки уже:
   34 + 6 + 34 + 10 = 84 при 88 свободных на 320 */
@media (max-width: 399px) {
    .pf-park-features__head {
        gap: 10px;
    }

    .pf-park-features__nav {
        gap: 6px;
    }

    .pf-park-features__arrow {
        width: 34px;
        height: 34px;
    }
}

@media (min-width: 1200px) {
    .pf-park-features {
        --pf-page: 6;

        padding: 30px;
        border-radius: 30px;
    }

    .pf-park-features__head {
        margin-bottom: 22px;
    }

    .pf-park-features__title {
        font-size: var(--pf-h2-size);
    }

    .pf-park-features__nav {
        gap: 11px;
    }

    .pf-park-features__arrow {
        width: 34px;
        height: 34px;
    }

    .pf-park-features:not([data-pager-ready]) .pf-park-feature:nth-child(n+4) {
        display: flex;
    }

    .pf-park-features:not([data-pager-ready]) .pf-park-feature:nth-child(n+7) {
        display: none;
    }

    .pf-park-features__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .pf-park-feature {
        gap: 0;
        padding: 10px 13px 10px 5px;
        border-radius: 25px;
    }

    .pf-park-feature__icon {
        width: 67px;
        height: 70px;
    }

    .pf-park-feature__title {
        font-size: var(--pf-text-lg);
    }

    .pf-park-feature__text {
        margin-top: 7px;
        color: var(--pf-color-text);
    }
}

/* Блок «Тарифы на парковку». На мобильном - строки с ценой справа,
   на десктопе - плитка карточек: клубная крупная, остальные мелкими. */

.pf-tariffs {
    margin-top: 50px;
}

.pf-tariffs__title {
    /* под заголовком воздуха нет: снимок клубных карт выходит за верх строки */
    margin: 0 0 4px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-tariffs__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-tariff {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    /* подписи правят в админке: длинная переносится, и строка растёт, а не обрезает её */
    min-height: 45px;
    padding: 5px 20px 5px 15px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 8px;
}

/* Клубный тариф: снимок карт выходит за верх строки, поэтому ей нужен отступ */
.pf-tariff--club {
    position: relative;
    min-height: 65px;
    margin-top: 16px;
    padding-left: 128px;
    background-color: var(--pf-color-surface-club);
    border-radius: 10px;
    /* строка - ссылка на попап карты */
    text-decoration: none;
}

.pf-tariff__cards {
    position: absolute;
    bottom: 0;
    left: 8px;
    width: 112px;
    height: auto;
}

.pf-tariff__label {
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-tariff__price {
    margin: 0;
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
    white-space: nowrap;
}

/* Кнопка расчёта стоит над сноской, поэтому колонка развёрнута */
.pf-tariffs__foot {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    /* до кнопки в макете 20, из них 12 уже дал зазор строк */
    margin-top: 8px;
}

.pf-tariffs__note {
    max-width: 342px;
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text-muted);
    text-align: center;
}

.pf-tariffs__calc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 20px 30px;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-decoration: none;
    background-color: transparent;
    font-family: inherit;
    cursor: pointer;
}

.pf-tariffs__calc:hover {
    background-color: var(--pf-color-fill-active);
    color: var(--pf-color-on-active);
}

.pf-tariffs__calc-open,
.pf-tariffs__calc-close {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-tariffs__calc-close,
.pf-tariffs--calc .pf-tariffs__calc-open {
    display: none;
}

.pf-tariffs--calc .pf-tariffs__calc-close {
    display: flex;
}

.pf-tariffs__arrow {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.pf-tariffs__arrow--up {
    transform: rotate(-90deg);
}

/* Онлайн-калькулятор: раскрывается кнопкой под плиткой тарифов.
   Это вторая форма брони (booking/calc), общие стили у неё из booking.css. */

.pf-tariffs__calculator {
    display: none;
    margin-top: 25px;
}

.pf-tariffs--calc .pf-tariffs__calculator {
    display: block;
}

/* Раскрытый калькулятор докручивается к низу окна (expand.js): зазор 20px,
   нижний бар добавляет scroll-padding-bottom из tabbar.css */
.pf-tariffs__calculator {
    scroll-margin-bottom: 20px;
}

.pf-booking--calc {
    gap: 15px;
    border-radius: 25px;
}

/* после расчёта мобильный макет разносит блоки шире */
.pf-booking--calc:has(.pf-booking__price:not([hidden])) {
    gap: 25px;
}

.pf-booking--calc .pf-booking__title {
    line-height: normal;
}

.pf-booking__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-booking--calc .pf-booking__label {
    font-size: var(--pf-text-xs);
    line-height: normal;
}

/* дата и время в макете делят строку поровну */
.pf-booking--calc .pf-booking__row {
    gap: 15px;
}

.pf-booking--calc .pf-field__control {
    height: 46px;
}

.pf-booking--calc .pf-booking__row .pf-field:first-child .pf-field__control {
    padding-left: 12px;
}

.pf-booking--calc .pf-booking__row .pf-field + .pf-field .pf-field__control {
    padding-left: 14px;
}

/* иконка 15px стоит в 13 от края: больше места справа не нужно,
   иначе дата не влезает в половину 260 */
.pf-booking--calc .pf-booking__row .pf-field--icon .pf-field__control {
    padding-right: 28px;
}

.pf-booking__group--airport .pf-field__control {
    height: 47px;
    padding-left: 15px;
}

/* длинное название парковки режем многоточием. У flex многоточия нет,
   а текст по вертикали кнопка центрирует сама */
.pf-booking__group--airport .pf-select__button {
    display: block;
    /* выбранная парковка в макете второстепенным цветом */
    color: var(--pf-color-text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pf-booking__count {
    height: 52px;
    padding: 0 30px;
    background-color: var(--pf-color-fill-accent);
    border-radius: 15px;
    font-family: inherit;
    font-size: var(--pf-text-md);
    line-height: normal;
    color: var(--pf-color-on-accent);
}

.pf-booking__count:hover {
    opacity: 0.9;
}

.pf-booking--calc .pf-booking__hint {
    min-height: 0;
    padding: 10px 20px;
    font-size: var(--pf-text-xs);
    line-height: normal;
}

/* Результат: две цены и ссылка на клубную карту, на десктопе - в строку с калькулятором */

.pf-booking--calc .pf-booking__price {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px 25px 25px;
    overflow: hidden;
    border-radius: 20px;
}

/* поля под стать форме ниже 440 (booking.css) */
@media (max-width: 439px) {
    .pf-booking--calc .pf-booking__price {
        padding: var(--pf-card-pad);
    }
}

/* цены в одну строку, пока обе помещаются, иначе вторая уходит под первую */
.pf-booking__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px 37px;
}

.pf-booking--calc .pf-booking__price .pf-booking__total-full {
    margin-top: 0;
}

.pf-booking--calc .pf-booking__price .pf-booking__total-main b {
    font-size: var(--pf-h-mobile-size);
}

.pf-booking--calc .pf-booking__price .pf-booking__total-full b {
    font-size: var(--pf-h3-mobile-size);
}

.pf-booking--calc .pf-booking__price .pf-booking__total-main > span,
.pf-booking--calc .pf-booking__price .pf-booking__total-full > span {
    font-size: var(--pf-text-sm);
    line-height: normal;
}

.pf-booking__club {
    height: 52px;
    padding: 0 30px;
    background-color: transparent;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-family: inherit;
    font-size: var(--pf-text-md);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

.pf-booking__club:hover {
    background-color: var(--pf-color-fill-accent);
    color: var(--pf-color-on-accent);
}

/* в мобильном макете калькулятора на плашке нет */
.pf-booking--calc .pf-booking__price .pf-booking__calc {
    display: none;
}

/* Имя, телефон и бронь - после расчёта */

.pf-booking__order {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pf-booking__order[hidden] {
    display: none;
}

/* имя и телефон парой, как в форме брони (booking.css), кнопка - строкой ниже;
   с 1200 всё в одну строку */
.pf-booking__order .pf-booking__row {
    flex-wrap: wrap;
    gap: 15px 10px;
}

.pf-booking__order .pf-field {
    flex: 1 1 0;
}

/* до 500 поля компактнее (booking.css); отступ слева у второго поля пары
   калькулятор задаёт под дату и время, у имени и телефона он как у формы */
@media (max-width: 499px) {
    .pf-booking--calc .pf-booking__order .pf-field + .pf-field .pf-field__control {
        padding-left: 10px;
    }
}

.pf-booking__submit {
    flex: 1 0 100%;
    height: 69px;
    /* от полей до кнопки в макете 20, 15 из них дал зазор строки */
    margin-top: 5px;
    border-radius: 15px;
    font-family: inherit;
    font-size: var(--pf-text-md);
    line-height: normal;
}

@media (min-width: 1200px) {
    .pf-tariffs__calculator {
        margin-top: 30px;
    }

    .pf-booking--calc,
    .pf-booking--calc:has(.pf-booking__price:not([hidden])) {
        gap: 15px;
        padding: 25px;
    }

    .pf-booking--calc .pf-booking__title {
        font-size: var(--pf-h3-size);
    }

    /* основная форма на десктопе крупнее, в калькуляторе поля остаются 14 */
    .pf-booking--calc .pf-field__control {
        font-size: var(--pf-text-sm);
        line-height: 17px;
    }

    /* «XX.XX.XXXX» шире цифр и в половину 260 не влезает, в макете у дизайнера
       опечатка «XX.XX.XXX»; на пиксель мельче - и маска видна целиком */
    .pf-booking--calc .pf-booking__row .pf-field__control::placeholder {
        font-size: 13px;
    }

    /* ряд из макета: аэропорт 215, въезд 260, выезд 260, кнопка 157 */
    .pf-booking__fields {
        flex-direction: row;
        align-items: flex-end;
    }

    .pf-booking__fields > .pf-booking__group {
        flex: 260 1 0;
        min-width: 0;
    }

    .pf-booking__fields > .pf-booking__group--airport {
        flex-grow: 215;
    }

    /* поля кнопок сняты: с ними текст раздвигает кнопку шире макетных 157 и 223 */
    .pf-booking__count {
        flex: 0 0 157px;
        padding: 0;
        font-size: var(--pf-btn-size);
    }

    .pf-booking--calc .pf-booking__price {
        flex-direction: row;
        align-items: flex-end;
        gap: 48px;
    }

    .pf-booking--calc .pf-booking__price .pf-booking__total-main b {
        font-size: var(--pf-h2-size);
    }

    .pf-booking--calc .pf-booking__price .pf-booking__total-full b {
        font-size: 30px;
    }

    .pf-booking__club {
        flex: 0 0 223px;
        height: 46px;
        padding: 0;
        font-size: var(--pf-btn-size);
    }

    /* в макете снимок растянут под рамку 180x116 от top 9: файл сохранён уже
       в этих пропорциях без прозрачных полей, координаты - его видимой части */
    .pf-booking--calc .pf-booking__price .pf-booking__calc {
        display: block;
        top: 17px;
        right: 61px;
        bottom: auto;
        width: 111px;
        height: 108px;
    }

    .pf-booking__order .pf-booking__row {
        flex-direction: row;
        gap: 20px;
    }

    .pf-booking__order .pf-field {
        flex: 1 1 0;
    }

    .pf-booking__order .pf-field__control {
        height: 64px;
    }

    .pf-booking__submit {
        flex: 0 0 252px;
        height: 64px;
        margin-top: 0;
        font-size: var(--pf-btn-size);
    }
}

@media (min-width: 1200px) {
    .pf-tariffs {
        margin-top: 84px;
    }

    .pf-tariffs__title {
        margin-bottom: 30px;
        font-size: var(--pf-h2-size);
    }

    /* Плитка из макета: клубная карточка на две строки, рядом мелкие по 208 */
    .pf-tariffs__grid {
        display: grid;
        grid-template-columns: 333fr repeat(3, 208fr);
        grid-template-rows: repeat(2, minmax(125px, auto));
        gap: 14px;
    }

    /* цены в макете на одной высоте, 20 от верха карточки, как ни длинна подпись */
    .pf-tariff {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5px;
        height: auto;
        padding: 20px 25px;
        background-color: var(--pf-color-raised);
        border-radius: 25px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
    }

    .pf-tariff--club {
        grid-area: 1 / 1 / 3 / 2;
        justify-content: flex-start;
        margin-top: 0;
        padding-left: 25px;
        background-color: var(--pf-color-surface-club);
        border-radius: 25px;
        box-shadow: none;
    }

    /* снимок карт лежит на дне карточки, поле по бокам одинаковое */
    .pf-tariff__cards {
        left: 53px;
        width: 226px;
    }

    /* цена в макете стоит над подписью */
    .pf-tariff__price {
        order: -1;
        font-size: 30px;
    }

    .pf-tariff__label {
        font-size: var(--pf-text-lg);
        color: var(--pf-color-text-muted);
    }

    /* Длинная подпись (компонент, TARIFF_LONG_LABEL) - мельче: в макете подписи короткие,
       клиентка для минивэна разрешила мелкий шрифт. В строке на телефоне места хватает.
       Три строки по 17 под ценой влезают в 125, если нижнее поле 12 вместо 20 */
    .pf-tariff--long {
        padding-bottom: 12px;
    }

    .pf-tariff--long .pf-tariff__label {
        font-size: var(--pf-text-sm);
        line-height: 17px;
    }

    /* сноска и кнопка занимают правый нижний угол плитки */
    /* кнопка стоит по нижнему краю плитки, сноска - над ней */
    .pf-tariffs__foot {
        flex-direction: column;
        justify-content: flex-end;
        grid-area: 2 / 3 / 3 / 5;
        gap: 9px;
        margin-top: 0;
    }

    .pf-tariffs__note {
        max-width: 348px;
        color: var(--pf-color-text);
    }

    .pf-tariffs__calc {
        height: 64px;
        padding: 0 30px;
        font-size: var(--pf-btn-size);
    }
}

/* Блок «Наши парковки это»: пункты краткого описания карточками.
   На мобильном они листаются пальцем, на десктопе видно три,
   остальные раскрывает ссылка «Смотреть всё». */

.pf-facts {
    margin-top: 99px;
    padding: 30px;
    background-color: var(--pf-color-surface);
    border-radius: 20px;
}

.pf-facts__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.pf-facts__title {
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

/* в мобильном макете ссылки нет: карточки листаются */
.pf-facts__toggle {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    font-size: var(--pf-btn-size);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    white-space: nowrap;
    cursor: pointer;
}

.pf-facts__toggle-more,
.pf-facts__toggle-less {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pf-facts__toggle-less,
.pf-facts--all .pf-facts__toggle-more {
    display: none;
}

.pf-facts--all .pf-facts__toggle-less {
    display: flex;
}

.pf-facts__arrow {
    width: 15px;
    height: 15px;
}

.pf-facts__arrow--up {
    transform: rotate(-90deg);
}

/* Полоса карточек уходит за край плашки - как в макете */
.pf-facts__grid {
    display: flex;
    gap: 20px;
    margin-right: -30px;
    padding-right: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pf-facts__grid::-webkit-scrollbar {
    display: none;
}

.pf-fact {
    display: flex;
    flex: 0 0 312px;
    flex-direction: column;
    gap: 20px;
    min-height: 188px;
    padding: 25px;
    background-color: var(--pf-color-raised-in);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
    scroll-snap-align: start;
}

.pf-fact__icon {
    width: 31px;
    height: 31px;
}

.pf-fact__text {
    margin: 0;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text);
}

@media (min-width: 1200px) {
    .pf-facts {
        margin-top: 120px;
        border-radius: 30px;
    }

    .pf-facts__head {
        margin-bottom: 30px;
    }

    .pf-facts__title {
        font-size: var(--pf-h2-size);
    }

    .pf-facts__toggle {
        display: flex;
    }

    /* на десктопе карточки стоят сеткой: видно первый ряд, остальные раскрываются */
    .pf-facts__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .pf-facts:not(.pf-facts--all) .pf-fact:nth-child(n+4) {
        display: none;
    }

    .pf-fact {
        gap: 25px;
        min-height: 257px;
        border-radius: 25px;
    }

    .pf-fact__icon {
        width: 37px;
        height: 37px;
    }

    .pf-fact__text {
        font-size: var(--pf-text-lg);
    }
}

/* Блок «Как доехать до парковки»: карта, плитки внешних карт, кнопки
   трансляции и схемы, карточки координат и подсказки. На мобильном всё
   идёт столбиком, на десктопе карта с плитками справа. */

.pf-route {
    margin-top: 100px;
}

.pf-route__title {
    margin: 0 0 30px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-route__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-route__map {
    display: block;
    width: 100%;
    height: 372px;
    border: 0;
}

.pf-route__apps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pf-route__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    height: 127px;
    padding: 22px 10px 0;
    background-color: var(--pf-color-surface-accent);
    border-radius: 15px;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-align: center;
    text-decoration: none;
}

.pf-route__app:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

.pf-route__app-icon {
    width: auto;
    height: 44px;
}

/* в мобильном макете подписи сложены по словам: «Яндекс / Карты», «Google / Maps» */
.pf-route__app-name {
    max-width: min-content;
}

.pf-route__buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* рамка в макете внутри кнопки: 18 поля + 2 рамки дают макетные 70 */
.pf-route__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 18px 30px;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

/* наведение из макета: заливка синим, текст и значок белые */
.pf-route__button:hover {
    background-color: var(--pf-color-fill-active);
    color: var(--pf-color-on-active);
}

/* на наведении обычный значок прячется, а светлый из макета встаёт на его место */
.pf-route__button-icon--hover,
.pf-route__button:hover .pf-route__button-icon {
    display: none;
}

.pf-route__button:hover .pf-route__button-icon--hover {
    display: block;
}

.pf-route__button-icon {
    flex-shrink: 0;
    width: auto;
    height: 30px;
}

.pf-route__arrow {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.pf-route__cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-route__coords {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

.pf-route__coords-title {
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-route__point {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    padding: 15px 20px;
    background-color: var(--pf-color-raised-in);
    border-radius: 10px;
}

.pf-route__point-text {
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-route__point-text p {
    margin: 0;
}

.pf-route__copy {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

/* после копирования значок коротко гаснет - знак, что координаты в буфере */
.pf-route__copy[data-copied] {
    opacity: 0.4;
}

.pf-route__copy[hidden] {
    display: none;
}

/* в мобильном макете QR нет: телефоном его всё равно не отсканировать */
.pf-route__qr {
    display: none;
}

.pf-route__address,
.pf-route__info {
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text-muted);
}

.pf-route__address p {
    margin: 0;
}

/* между абзацами подсказки в макете пустая строка */
.pf-route__info p {
    margin: 0 0 17px;
}

.pf-route__info p:last-child {
    margin-bottom: 0;
}

.pf-route__info {
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

@media (min-width: 1280px) {
    .pf-route {
        margin-top: 120px;
    }

    .pf-route__title {
        font-size: var(--pf-h2-size);
    }

    /* Карта 810 и колонка плиток 170 - как в макете */
    .pf-route__grid {
        display: grid;
        grid-template-columns: 810fr 170fr;
        gap: 20px;
    }

    .pf-route__map {
        height: 574px;
    }

    .pf-route__apps {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 180px 178px 176px;
    }

    .pf-route__app {
        gap: 6px;
        height: auto;
        padding-top: 44px;
        font-size: var(--pf-text-lg);
    }

    .pf-route__app-icon {
        height: 63px;
    }

    .pf-route__app-name {
        max-width: none;
    }

    .pf-route__buttons,
    .pf-route__cards {
        flex-direction: row;
        grid-column: 1 / -1;
    }

    .pf-route__button,
    .pf-route__coords,
    .pf-route__info {
        flex: 1 1 0;
    }

    .pf-route__button {
        font-size: var(--pf-btn-size);
    }

    /* Слева координаты и адрес, справа QR 91 на 92. Колонки, а не пиксели от
       края: до 1600 формы сбоку нет и карточка шире макетной 490 - текст
       занимает ширину, QR остаётся у правого края. На 490 выходит как в макете:
       адрес 340, координаты 311, QR в 377 от края */
    .pf-route__coords {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 91px;
        grid-template-rows: auto auto 1fr;
        align-items: start;
        column-gap: 12px;
        row-gap: 13px;
        min-height: 215px;
        padding: 21px 22px 21px 25px;
    }

    .pf-route__qr {
        display: block;
        grid-area: 2 / 2 / 4 / 3;
        width: 91px;
        height: 92px;
        overflow: hidden;
        border-radius: 3px;
    }

    /* генератор рисует картинку в своём размере - вписываем её в рамку */
    .pf-route__qr img,
    .pf-route__qr canvas {
        width: 100%;
        height: 100%;
    }

    .pf-route__coords-title {
        grid-column: 1 / -1;
        font-size: var(--pf-h3-size);
    }

    /* плашка координат на 29 уже адреса - поле до QR 41, как в макете */
    .pf-route__point {
        width: auto;
        margin-right: 29px;
    }

    .pf-route__address,
    .pf-route__info {
        font-size: var(--pf-text-lg);
    }

    .pf-route__info p {
        margin-bottom: 22px;
    }

    /* абзацы стоят столбиком по центру карточки по высоте */
    .pf-route__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 25px;
    }
}

/* Блок «Что о нас говорят наши клиенты»: общая оценка и подкритерии,
   виджеты отзывов Яндекс Карт и ВКонтакте, текст о парковке с раскрытием.
   На мобильном подкритерии идут строками с полосой, на десктопе - в ряд. */

.pf-reviews {
    margin-top: 100px;
}

.pf-reviews__title {
    margin: 0 0 30px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-reviews__scores {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pf-reviews__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 111px;
    padding-top: 10px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
}

/* звёзды в макете - картинка в рамке 66, число подходит под неё вплотную */
.pf-reviews__star {
    display: block;
    width: 66px;
    height: 66px;
    background-color: var(--pf-color-text-accent);
    -webkit-mask: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/rating-star.webp") no-repeat center / contain;
    mask: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/rating-star.webp") no-repeat center / contain;
}

.pf-reviews__value {
    margin: -7px 0 0;
    font-size: 25px;
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-reviews__criteria {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 15px 20px;
    list-style: none;
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
}

/* строка подкритерия: значок и название слева, оценка справа, под ними полоса */
.pf-reviews__criterion {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-reviews__criterion-icon {
    justify-self: center;
    width: auto;
    height: 12px;
}

.pf-reviews__criterion-value {
    font-weight: var(--pf-h2-weight);
}

.pf-reviews__bar {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: var(--pf-radius-pill);
    background-image: linear-gradient(to right, var(--pf-color-fill-accent) calc(var(--pf-score) * 100%), var(--pf-color-surface-club) 0);
}

/* виджет отдаёт ровно 5 отзывов с текстом не выше 4 строк: высота под все пять без
   прокрутки внутри фрейма, на узком экране шапка с кнопкой "Оставить отзыв" переносится.
   Содержимое виджета не шире 760: во весь фрейм справа оставалось серое поле */
.pf-reviews__yandex {
    display: block;
    width: 100%;
    max-width: 760px;
    height: 1320px;
    margin-top: 20px;
    border: 0;
    border-radius: 15px;
}

/* высоту виджет ВК задаёт сам, место держим, чтобы страница не прыгала при загрузке */
.pf-reviews__vk {
    min-height: 300px;
    margin-top: 25px;
}

/* Текст о парковке: свёрнут с растворением к низу, «Читать полностью» раскрывает */

.pf-park-seo {
    margin-top: 20px;
    padding: 20px 20px 15px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
}

.pf-park-seo__title {
    margin: 0 0 7px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-park-seo__text {
    max-height: 253px;
    overflow: hidden;
    font-size: var(--pf-text-sm);
    line-height: normal;
    color: var(--pf-color-text);
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 99%);
}

.pf-park-seo--open .pf-park-seo__text {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* в тексте свои заголовки и списки из редактора - приводим к размеру карточки */
.pf-park-seo__text h2,
.pf-park-seo__text h3 {
    margin: 17px 0 7px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
}

.pf-park-seo__text > :first-child {
    margin-top: 0;
}

.pf-park-seo__text p {
    margin: 0 0 17px;
}

.pf-park-seo__text ul,
.pf-park-seo__text ol {
    margin: 0 0 17px;
    padding-left: 20px;
}

.pf-park-seo__text li {
    list-style: disc;
}

.pf-park-seo__text ol li {
    list-style: decimal;
}

.pf-park-seo__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 35px;
    margin-top: 7px;
    padding: 0 10px;
    background-color: var(--pf-color-surface-club);
    border: 0;
    border-radius: 7px;
    font-size: var(--pf-text-xs);
    line-height: normal;
    color: var(--pf-color-text-accent);
    cursor: pointer;
}

/* подпись кнопки: «Читать полностью», после раскрытия - «Свернуть» */
.pf-park-seo__more-open,
.pf-park-seo__more-close {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-park-seo__more-close,
.pf-park-seo--open .pf-park-seo__more-open {
    display: none;
}

.pf-park-seo--open .pf-park-seo__more-close {
    display: flex;
}

/* в мобильном макете кнопка без стрелки */
.pf-park-seo__arrow {
    display: none;
    width: 24px;
    height: 15px;
    margin: 0 -1px;
}

.pf-park-seo__arrow--up {
    transform: rotate(-90deg);
}

@media (min-width: 1280px) {
    .pf-reviews {
        margin-top: 120px;
    }

    .pf-reviews__title {
        font-size: var(--pf-h2-size);
    }

    .pf-reviews__scores {
        flex-direction: row;
        gap: 30px;
    }

    .pf-reviews__rating {
        flex: 0 0 206px;
        height: 218px;
        padding-top: 41px;
        border-radius: 30px;
    }

    .pf-reviews__star {
        width: 94px;
        height: 94px;
    }

    .pf-reviews__value {
        margin-top: 0;
        font-size: 35px;
        font-weight: 900;
        color: var(--pf-color-text-accent);
    }

    /* Колонки по 145 с зазором 25, как в макете: вчетвером они шире области
       внутри полей и заходят в правое поле карточки - в макете так же. min-width
       не даёт карточке раздуться по ширине колонок и вылезти из блока.
       До 1600 формы сбоку нет и карточка шире макетной: space-between разносит
       колонки по ней, а в тесной карточке ничего не меняет */
    .pf-reviews__criteria {
        flex: 1 1 0;
        flex-direction: row;
        justify-content: space-between;
        min-width: 0;
        gap: 25px;
        height: 218px;
        padding: 49px 67px 50px 66px;
        border-radius: 30px;
    }

    /* на десктопе подкритерий - столбик: значок сверху, оценка и название внизу */
    .pf-reviews__criterion {
        display: flex;
        flex: 0 0 145px;
        flex-direction: column;
        align-items: flex-start;
        height: 119px;
        color: var(--pf-color-text-accent);
    }

    .pf-reviews__criterion-icon {
        width: auto;
        height: auto;
    }

    /* на десктопе «Трансфер» стоит последним, на мобильном - перед «Периодом» */
    .pf-reviews__criterion:nth-child(3) {
        order: 1;
    }

    /* Chrome и Figma по-разному считают межстрочный «normal»: число вставало
       на 6px выше макетного. Межстрочный 1 и поджатая подпись ставят его на место. */
    .pf-reviews__criterion-value {
        order: 1;
        margin-top: auto;
        margin-bottom: -3px;
        font-size: 28px;
        line-height: 1;
    }

    .pf-reviews__criterion-name {
        order: 2;
        font-size: 20px;
    }

    .pf-reviews__bar {
        display: none;
    }

    .pf-reviews__yandex {
        height: 1300px;
        margin-top: 40px;
        border-radius: 25px;
    }

    .pf-reviews__vk {
        margin-top: 40px;
    }

    .pf-park-seo {
        margin-top: 40px;
        padding: 35px 41px 25px;
        border-radius: 25px;
    }

    .pf-park-seo__title {
        margin-bottom: 25px;
        font-size: var(--pf-h-mobile-size);
        font-weight: var(--pf-h2-weight);
    }

    .pf-park-seo__text {
        max-height: 230px;
        font-size: var(--pf-text-md);
        -webkit-mask-image: linear-gradient(to bottom, #000 81%, transparent 93%);
        mask-image: linear-gradient(to bottom, #000 81%, transparent 93%);
    }

    .pf-park-seo__text h2,
    .pf-park-seo__text h3 {
        font-size: var(--pf-text-lg);
    }

    /* на десктопе кнопка - ссылка со стрелкой под текстом */
    .pf-park-seo__more {
        justify-content: flex-start;
        width: auto;
        height: auto;
        margin-top: 15px;
        padding: 0;
        background: none;
        border-radius: 0;
        font-size: var(--pf-btn-size);
        font-weight: var(--pf-btn-weight);
    }

    .pf-park-seo__arrow {
        display: block;
    }
}

/* значки на светлых чипах поверх фото нарисованы синим, в тёмном макете они #151515:
   brightness(0) даёт чёрный, invert(0.0824) поднимает его до 21/255 */
[data-theme="dark"] .pf-park-hero__chip img {
    filter: brightness(0) invert(0.0824);
}

/* галочка факта нарисована синим, в тёмном макете она белая */
[data-theme="dark"] .pf-fact__icon {
    filter: brightness(0) invert(1);
}

/* Тёмная тема, «Как доехать»: значки приложений и критерии отзывов в макете белые,
   значки кнопок трансляции и схемы - серые; по наведению у кнопок свой светлый значок */
[data-theme="dark"] :is(img.pf-route__app-icon, .pf-reviews__criterion-icon) {
    filter: brightness(0) invert(1);
}

/* знак 2ГИС: заливка - синим (в тёмной теме белым), просветы - цветом плитки */
.pf-route__app-ink {
    fill: var(--pf-color-text-accent);
}

.pf-route__app-paper {
    fill: var(--pf-color-raised);
}

[data-theme="dark"] .pf-route__button-icon:not(.pf-route__button-icon--hover) {
    filter: grayscale(1);
}

/* 1366-1599: форма справа, колонка уже макетной 1000 (см. раскладку страницы
   с формой). Отдельным блоком в конце: правила для 1280 выше по файлу перебили бы */

@media (min-width: 1366px) and (max-width: 1599px) {
    /* плитка тарифов в пропорции макета: без minmax цены распирают мелкие
       карточки, клубная сжимается, и карты из неё наезжают на соседнюю */
    .pf-tariffs__grid {
        grid-template-columns: minmax(0, 333fr) repeat(3, minmax(0, 208fr));
    }

    .pf-tariff {
        padding-right: 18px;
        padding-left: 18px;
    }

    .pf-tariff__price {
        font-size: 26px;
    }

    /* карточки здесь уже 170: длинная подпись в 14 идёт в четыре строки и растит ряд */
    .pf-tariff--long .pf-tariff__label {
        font-size: var(--pf-text-xs);
        line-height: 15px;
    }

    /* результат калькулятора в 780-950: цены, кнопка карты и картинка не помещались,
       кнопка наезжала на картинку. Цены мельче (клиентка: главное, чтобы влезло),
       промежуток уже, картинка ближе к краю */
    .pf-booking--calc .pf-booking__price {
        gap: 30px;
    }

    .pf-booking--calc .pf-booking__price .pf-booking__total-main b {
        font-size: 36px;
    }

    .pf-booking--calc .pf-booking__price .pf-booking__total-full b {
        font-size: 24px;
    }

    .pf-booking--calc .pf-booking__price .pf-booking__calc {
        right: 20px;
    }

    /* четыре оценки по 145 с полями 66 в колонку не входят: плашка с общей
       оценкой и поля уже, столбики делят ширину поровну */
    .pf-reviews__scores {
        gap: 20px;
    }

    .pf-reviews__rating {
        flex-basis: 160px;
    }

    .pf-reviews__criteria {
        gap: 20px;
        padding-right: 30px;
        padding-left: 30px;
    }

    .pf-reviews__criterion {
        flex: 1 1 0;
        min-width: 0;
    }

    .pf-reviews__criterion-name {
        font-size: var(--pf-text-lg);
    }
}

/* поля карточек и промежутки между ними ниже 440 - одни на весь сайт,
   --pf-card-pad и --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-park-features {
        padding: var(--pf-card-pad);
    }

    .pf-facts {
        padding: var(--pf-card-pad);
    }

    .pf-fact {
        padding: var(--pf-card-pad);
    }

    .pf-route__coords {
        padding: var(--pf-card-pad);
    }

    .pf-park-seo {
        padding: var(--pf-card-pad);
    }

    .pf-park-choice__list {
        gap: var(--pf-card-gap);
    }

    .pf-park-features__grid {
        gap: var(--pf-card-gap);
    }

    .pf-facts__grid {
        gap: var(--pf-card-gap);
        margin-right: calc(-1 * var(--pf-card-pad));
        padding-right: var(--pf-card-pad);
    }

    .pf-route__cards {
        gap: var(--pf-card-gap);
    }

    .pf-tariff {
        padding-right: var(--pf-card-pad);
    }

    /* Картинка карт ужимается, чтобы "По клубной карте" шла в одну строку: подписи
       122, цене 72, промежутки 15 + 15 и поле 16 - остальное от строки (экран - 12)
       под картинку, но не больше 112 из макета. 360 - 104, 320 - 64 */
    .pf-tariff--club {
        --pf-tariff-cards: min(112px, 100vw - 256px);
        padding-left: calc(var(--pf-tariff-cards) + 16px);
    }

    .pf-tariff__cards {
        width: var(--pf-tariff-cards);
    }

    .pf-route__point {
        padding: 12px var(--pf-card-pad);
    }

    .pf-route__info {
        padding: var(--pf-card-pad);
    }

    .pf-reviews__criteria {
        padding: var(--pf-card-pad);
    }

    .pf-route__apps,
    .pf-route__buttons {
        gap: var(--pf-card-gap);
    }

    /* плашка была 127 при поле 22: низ под подписью пустовал. По центру - чтобы
       у однострочной подписи (2ГИС) пустота делилась сверху и снизу */
    .pf-route__app {
        justify-content: center;
        height: auto;
        padding: var(--pf-card-pad) 8px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/work.css?179265574312466*/
/* Блок «Работать с нами просто и удобно»: карточки с текстом слева
   и иллюстрацией, прижатой к нижнему правому углу. */

.pf-work {
    margin: 100px 0;
}

.pf-work__title {
    margin: 0 0 30px;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-work__grid {
    display: grid;
    gap: 20px;
}

.pf-work__card {
    /* --pic: доля ширины карточки под иллюстрацию. От неё считаются и размер
       картинки, и предел текста. Держать их на одной величине обязательно:
       у текста проценты считаются от области внутри полей, у картинки -
       от всей карточки, и на промежуточных ширинах они разъезжаются. */
    --pic: 0.55;

    position: relative;
    overflow: hidden;
    min-height: 169px;
    padding: 20px 25px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 25px;
}

.pf-work__card--booking {
    --pic: 0.5425;
}

.pf-work__card--payment {
    --pic: 0.58;
}

.pf-work__card--luggage {
    --pic: 0.395;
}

.pf-work__card--shuttle {
    --pic: 0.5525;
}

/* Наведение: карточка подсвечивается, как в макете */

.pf-work__card:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

/* На мобильном ширины из макета заданы поштучно: заголовок обычно идёт
   во всю карточку, а текст обрывается по-своему у каждой карточки */

.pf-work__name {
    max-width: var(--name, none);
}

.pf-work__text {
    max-width: var(--text, none);
}

.pf-work__card--booking { --text: 160px; }
.pf-work__card--route { --text: 135px; }
.pf-work__card--payment { --text: 180px; }
.pf-work__card--luggage { --name: 242px; --text: 168px; }
.pf-work__card--shuttle { --text: 188px; }

.pf-work__name {
    position: relative;
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-work__text {
    position: relative;
    margin: 10px 0 0;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

.pf-work__pic {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(var(--pic) * 100%);
    height: auto;
}

/* единственная картинка, которая в макете не прижата к правому краю */
.pf-work__card--booking .pf-work__pic {
    width: 52.75%;
    right: 1.5%;
}

/* Чемоданы стоят во всю высоту карточки, но шире своей доли не растут:
   иначе на высокой карточке они наезжают на текст. */
.pf-work__card--luggage .pf-work__pic {
    width: auto;
    max-width: calc(var(--pic) * 100%);
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

/* Ниже 440 ширины текста из макета больше места слева от картинки, и она
   закрывает текст. Картинка уходит под текст, в правый нижний угол: picture
   растянута на всю карточку отрицательными полями, доля --pic та же */
@media (max-width: 439px) {
    /* поля 25 из макета на 440 - на 360-375 велики, как у плиток (tiles.css) */
    .pf-work__card {
        padding: var(--pf-card-pad);
    }

    .pf-work__name,
    .pf-work__text {
        max-width: none;
    }

    /* max-width из reset держал бы picture в ширине поля и не дал растянуться.
       Отрицательные поля - те же, что поля карточки */
    .pf-work__card picture {
        display: block;
        max-width: none;
        margin: 10px calc(-1 * var(--pf-card-pad)) calc(-1 * var(--pf-card-pad));
    }

    .pf-work__pic,
    .pf-work__card--luggage .pf-work__pic {
        position: static;
        display: block;
        width: calc(var(--pic) * 100%);
        max-width: none;
        height: auto;
        margin-left: auto;
    }

    .pf-work__card--booking .pf-work__pic {
        width: 52.75%;
        margin-right: 1.5%;
    }
}

/* Заголовок дорастает до макетного позже сетки: он не зависит от ширины карточек */

@media (min-width: 1200px) {
    .pf-work {
        margin: 120px 0;
    }

    .pf-work__title {
        margin-bottom: 40px;
        font-size: var(--pf-h2-size);
    }
}

/* Раскладка из макета: три колонки, «Трансфер» занимает две.
   Включается сразу после мобильной, без промежуточных двух колонок. */

@media (min-width: 768px) {
    .pf-work__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }

    /* --pad-x: боковое поле карточки, от него считаются пределы текста */
    .pf-work__card {
        --pad-x: 30px;

        min-height: 301px;
        padding: 18px var(--pad-x);
    }

    .pf-work__card--booking {
        --pic: 0.55;
    }

    .pf-work__card--route {
        --pic: 0.57;
    }

    .pf-work__card--payment {
        --pic: 0.75;
    }

    .pf-work__card--luggage {
        --pic: 0.477;
    }

    .pf-work__card--shuttle {
        --pic: 0.53;
        grid-column: span 2;
    }

    .pf-work__name,
    .pf-work__text {
        max-width: calc((100% + 2 * var(--pad-x)) * (1 - var(--pic)) - 12px);
    }

    .pf-work__card--luggage .pf-work__name {
        max-width: calc((100% + 2 * var(--pad-x)) * (1 - var(--pic)) - 12px);
    }

    .pf-work__name {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-work__text {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    /* у «Оплаты» иллюстрация начинается ниже строк, текст идёт во всю ширину */
    .pf-work__card--payment .pf-work__text {
        max-width: 100%;
    }

    .pf-work__card--shuttle .pf-work__text {
        max-width: 41%;
    }

    .pf-work__card--booking .pf-work__pic {
        width: calc(var(--pic) * 100%);
        right: 0;
    }
}

/* Страница парковки: блок стоит в колонке 1000, поэтому карточки уже,
   а «Упаковка багажа» и «Трансфер» делят нижний ряд пополам - как в макете.
   Раскладка включается вместе с сеткой главной, сразу после мобильной. */

@media (min-width: 768px) {
    .pf-work--park .pf-work__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 40px;
    }

    /* под заголовком в этом макете воздуха меньше, чем на главной */
    .pf-work--park .pf-work__title {
        margin-bottom: 30px;
    }

    .pf-work--park .pf-work__card {
        grid-column: span 2;
        min-height: 301px;
        padding: 18px 30px;
    }

    .pf-work--park .pf-work__card--luggage,
    .pf-work--park .pf-work__card--shuttle {
        grid-column: span 3;
    }

    .pf-work--park .pf-work__name {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-work--park .pf-work__text {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }

    /* Доли под иллюстрации и пределы текста здесь свои: карточки уже,
       чем на главной, и формула от одной доли на них не ложится. */

    .pf-work--park .pf-work__card--booking {
        --pic: 0.76;
    }

    .pf-work--park .pf-work__card--route {
        --pic: 0.79;
    }

    .pf-work--park .pf-work__card--payment {
        --pic: 1;
    }

    .pf-work--park .pf-work__card--luggage {
        --pic: 0.48;
    }

    .pf-work--park .pf-work__card--shuttle {
        --pic: 0.79;
    }

    /* в макете телефон стоит по центру карточки, а не у правого края */
    .pf-work--park .pf-work__card--booking .pf-work__pic {
        right: auto;
        left: 50%;
        width: 76%;
        transform: translateX(-50%);
    }

    /* чемоданы в макете ниже карточки, размер задаём по высоте */
    .pf-work--park .pf-work__card--luggage .pf-work__pic {
        height: 85%;
    }

    /* До 1600 формы сбоку нет и колонка шире 1000: доля --pic от широкой карточки
       раздувала иллюстрации, и они наезжали на текст. Растут не больше макета:
       --card - ширина карточки в колонке 1000, два шага сетки из шести или три.
       Чемоданы не трогаем: их размер задан высотой карточки, а она не меняется */
    .pf-work--park .pf-work__card {
        --card: 306.67px;
    }

    .pf-work--park .pf-work__card--luggage,
    .pf-work--park .pf-work__card--shuttle {
        --card: 480px;
    }

    .pf-work--park .pf-work__card:not(.pf-work__card--luggage) .pf-work__pic {
        width: min(calc(var(--pic) * 100%), calc(var(--pic) * var(--card)));
    }

    /* доли текста считаются от области внутри полей карточки, а не от неё самой */

    .pf-work--park .pf-work__name,
    .pf-work--park .pf-work__text {
        max-width: 100%;
    }

    .pf-work--park .pf-work__card--booking .pf-work__text {
        max-width: 91%;
    }

    .pf-work--park .pf-work__card--route .pf-work__text {
        max-width: 99%;
    }

    .pf-work--park .pf-work__card--luggage .pf-work__text {
        max-width: 53%;
    }

}

/* До 1200 промежутки и поля из макета съедают ширину карточек, и текст
   заходит под иллюстрации */
@media (min-width: 768px) and (max-width: 1199px) {
    .pf-work__grid,
    .pf-work--park .pf-work__grid {
        gap: 16px;
    }

    .pf-work__card,
    .pf-work--park .pf-work__card {
        --pad-x: 16px;

        padding: 16px var(--pad-x);
    }

    /* Иллюстрации здесь ниже, чем в макете: они сжимаются вместе с карточкой
       и не доходят до текста. Пределы текста из макета (под иллюстрацию во
       всю высоту) оставляли пустую половину карточки. На парковке пределы
       свои и заданы точнее, их не трогаем. Чемоданы стоят во всю высоту
       карточки - у них предел остаётся */
    .pf-work__card:not(.pf-work__card--luggage) .pf-work__name,
    .pf-work__card:not(.pf-work__card--luggage) .pf-work__text {
        max-width: none;
    }
}

/* Мобильная карточка на ширине до 768 растягивается, а с ней и картинка: доля
   --pic от широкой карточки раздувает иллюстрацию. Растёт не больше, чем
   в мобильном макете шириной 440 */
@media (min-width: 440px) and (max-width: 767px) {
    .pf-work__pic,
    .pf-work__card--luggage .pf-work__pic {
        width: calc(var(--pic) * 440px);
        max-width: none;
        height: auto;
    }

    .pf-work__card--booking .pf-work__pic {
        width: calc(0.5275 * 440px);
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-work__grid {
        gap: var(--pf-card-gap);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/card.css?17926557433285*/
/* Карточка списка: картинка, заголовок, текст, ссылка.
   Ширину задаёт сетка страницы, карточка тянется на всю ячейку. */

.pf-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: var(--pf-color-surface-accent);
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
}

.pf-card:hover {
    background-color: var(--pf-color-surface-accent-hover);
}

/* поля 20 из макета на 440 - на 360-375 велики, как у плиток (tiles.css) */
@media (max-width: 439px) {
    .pf-card {
        padding: var(--pf-card-pad);
    }
}

/* Высота картинки в макете постоянная, ширина резиновая.
   Фон виден, пока изображение грузится, и в карточках без него. */
.pf-card__image {
    width: 100%;
    height: 239px;
    margin-bottom: 20px;
    object-fit: cover;
    background-color: var(--pf-color-surface-accent-hover);
    border-radius: 10px;
}

/* Межстрочный в макете «auto». Figma и Chrome округляют его по-разному:
   на 18px это 22 против 21, и карточка выходит на 3px ниже макетной.
   Поэтому держим значения из макета числами. */
.pf-card__title {
    margin: 0;
    font-size: var(--pf-h3-mobile-size);
    font-weight: var(--pf-h3-weight);
    line-height: 27px;
    color: var(--pf-color-text);
}

/* Текст есть не у каждой карточки, поэтому отступ задаём сверху */
.pf-card__text {
    margin: 10px 0 0;
    font-size: var(--pf-text-sm);
    line-height: 17px;
    color: var(--pf-color-text-muted);
}

/* Ссылку прижимаем к низу: в ряду карточки одной высоты, ссылки выравниваются.
   Отступ даём padding-ом, margin здесь занят прижатием. */
.pf-card__more {
    margin-top: auto;
    padding-top: 15px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: 19px;
    color: var(--pf-color-text-accent);
}

.pf-card:hover .pf-card__more {
    text-decoration: underline;
}

/* Узкая карточка: картинка ниже, заголовок в размер основного текста */

.pf-card--narrow .pf-card__image {
    height: 170px;
}

/* У узкой карточки заголовок в размер основного текста и на обеих ширинах одинаков */
.pf-card--narrow .pf-card__title {
    font-size: var(--pf-text-lg);
    line-height: 22px;
}

/* Крупные размеры включаем только на десктопе: до него карточка
   везде узкая - и в ленте новостей, и в сетке списка */
@media (min-width: 1200px) {
    .pf-card {
        padding: 30px;
    }

    .pf-card__title {
        font-size: var(--pf-h3-size);
        line-height: 31px;
    }

    .pf-card__text,
    .pf-card__more {
        font-size: var(--pf-text-lg);
        line-height: 22px;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/news.css?17926557434604*/
/* Блок «Новости компании»: заголовок со ссылкой на весь список
   и карточки из общего компонента. На мобильном лента листается вбок. */

.pf-news {
    margin: 100px 0;
}

.pf-news__head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px 10px;
    margin-bottom: 30px;
}

.pf-news__title {
    /* на узком экране заголовок переносится, ссылка остаётся на его линии.
       Если рядом со ссылкой не влезает даже самое длинное слово (ниже ~360),
       ссылка уходит под заголовок: строку ломает min-width, а не основа 0 */
    flex: 1 1 0;
    min-width: min-content;
    margin: 0;
    font-size: var(--pf-h-mobile-size);
    font-weight: var(--pf-h2-weight);
    line-height: normal;
    color: var(--pf-color-text);
}

.pf-news__all {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    font-size: var(--pf-text-md);
    font-weight: var(--pf-btn-weight);
    line-height: normal;
    color: var(--pf-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
}

.pf-news__all:hover {
    text-decoration: underline;
}

/* Обводка стрелки выходит за линию на 1px с каждой стороны,
   поэтому в строке она занимает макетные 22px */
.pf-news__arrow {
    width: 24px;
    height: 15px;
    margin: 0 -1px;
}

/* Лента: карточки шире экрана и листаются пальцем */

.pf-news__grid {
    display: grid;
    grid-auto-flow: column;
    /* в макете на 440 из-за края выглядывает 35 px следующей карточки;
       на экране уже карточка сужается, чтобы край соседней оставался виден */
    grid-auto-columns: min(355px, calc(100vw - var(--pf-gutter) - 65px));
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* поля контейнера, чтобы крайние карточки не липли к краю экрана */
    margin: 0 calc(-1 * var(--pf-gutter));
    padding: 0 var(--pf-gutter);
    /* без этого снап тянет первую карточку за padding, к самому краю экрана */
    scroll-padding-inline: var(--pf-gutter);
    scrollbar-width: none;
}

.pf-news__grid::-webkit-scrollbar {
    display: none;
}

.pf-news__grid .pf-card {
    scroll-snap-align: start;
}

/* картинка сужается вместе с карточкой и держит макетную пропорцию 315 на 239 */
@media (max-width: 439px) {
    .pf-news__grid .pf-card__image {
        height: auto;
        aspect-ratio: 315 / 239;
    }
}

@media (min-width: 1200px) {
    .pf-news {
        margin: 120px 0;
    }

    .pf-news__title {
        font-size: var(--pf-h2-size);
    }

    .pf-news__all {
        font-size: var(--pf-text-lg);
    }

    /* карточка новостей на главной крупнее карточки списка */
    .pf-news .pf-card {
        border-radius: 25px;
    }

    .pf-news .pf-card__image {
        height: 224px;
    }

    .pf-news .pf-card__more {
        padding-top: 21px;
    }

    /* на широком экране лента превращается в обычную сетку */
    .pf-news__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
}

/* Страница парковки: блок стоит в колонке 1000, карточки уже главной -
   картинка ниже и зазор между карточками меньше, как в макете. На мобильном
   макеты главной и парковки совпадают, поэтому модификатор только здесь. */

@media (min-width: 1280px) {
    .pf-news--park .pf-news__grid {
        gap: 30px;
    }

    .pf-news--park .pf-card__image {
        height: 147px;
    }
}

/* промежутки между карточками ниже 440 - одни на весь сайт, --pf-card-gap (base.css) */
@media (max-width: 439px) {
    .pf-news__grid {
        gap: var(--pf-card-gap);
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/slides.css?17926557431759*/
/* Стрелки карусели фото: главная, парковка, услуга. Разметку вставляет
   js/banner.js. Только там, где есть мышь, и только при наведении на фото -
   на сенсорных экранах кадры листают свайпом */

.pf-slides__arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .pf-slides__arrow {
        position: absolute;
        /* над заголовком и подписями кадра, у заголовка услуги z-index 1 */
        z-index: 1;
        top: 50%;
        right: 20px;
        display: block;
        width: 45px;
        height: 45px;
        margin-top: -22px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .pf-slides__arrow--prev {
        right: auto;
        left: 20px;
        transform: rotate(180deg);
    }

    .pf-slides:hover .pf-slides__arrow,
    .pf-slides__arrow:focus-visible {
        opacity: 1;
    }

    .pf-slides:hover .pf-slides__arrow:hover {
        opacity: 0.8;
    }
}

/* круг белый в обеих темах, стрелка - цветом кнопки, как у стрелок преимуществ
   парковки: синяя, в тёмной теме #151515 */
.pf-slides__arrow {
    color: var(--pf-color-fill-accent);
}

.pf-slides__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-theme="dark"] .pf-slides__arrow {
    color: var(--pf-color-bg);
}

@media (prefers-reduced-motion: reduce) {
    .pf-slides__arrow {
        transition: none;
    }
}

/* End */


/* Start:/bitrix/templates/adaptive/css/blocks/ymap.css?17926557433516*/
/* Карта с балуном (js/ymap.js): контакты и "Как доехать" на странице парковки.
   Размер и скругление задаёт класс блока карты, здесь - то, что внутри. */

.pf-ymap {
    position: relative;
    /* свой контекст наложения: слои карты не вылезают поверх шапки */
    isolation: isolate;
    overflow: hidden;
    background-color: var(--pf-color-surface);
}

/* виджет Яндекс карт - без JS и если скрипт карт не загрузился */
.pf-ymap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Балун - узлы Figma 223:29464 (светлая тема) и 109:5021 (тёмная). Цвета - токены
   темы, значки и хвост - картинки из макета, у каждой темы свои */

.pf-ymap-balloon {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 294px;
    padding: 20px;
    background-color: var(--pf-color-bg);
    border-radius: 30px;
    /* тень от плашки вместе с хвостом */
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.07));
    font-family: var(--pf-font-base);
    line-height: normal;
    color: var(--pf-color-text);
}

/* Хвост: заходит в плашку на 11 и выступает под ней на 21 - этот выступ знает
   js/ymap.js (TAIL) */
.pf-ymap-balloon::after {
    position: absolute;
    top: calc(100% - 11px);
    left: 50%;
    width: 53px;
    height: 33px;
    background: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-tail.svg") no-repeat center / 100% 100%;
    transform: translateX(-50%) rotate(180deg);
    content: "";
}

.pf-ymap-balloon__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pf-ymap-balloon__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-ymap-balloon__icon {
    flex-shrink: 0;
    background: no-repeat center / 100% 100%;
}

.pf-ymap-balloon__row--transfer .pf-ymap-balloon__icon {
    width: 41px;
    height: 43px;
    background-image: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-transfer.svg");
}

.pf-ymap-balloon__row--price .pf-ymap-balloon__icon {
    width: 37px;
    height: 37px;
    background-image: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-price.svg");
}

.pf-ymap-balloon__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    font-size: var(--pf-text-sm);
}

.pf-ymap-balloon__name {
    font-weight: 700;
}

/* кнопка - синяя обводка в светлой теме, белая в тёмной: это и есть text-accent */
.pf-ymap-balloon__route {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 2px solid var(--pf-color-text-accent);
    border-radius: 15px;
    font-size: var(--pf-text-sm);
    font-weight: 700;
    color: var(--pf-color-text-accent);
    text-decoration: none;
}

[data-theme="dark"] .pf-ymap-balloon::after {
    background-image: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-tail-dark.svg");
}

[data-theme="dark"] .pf-ymap-balloon__row--transfer .pf-ymap-balloon__icon {
    width: 40px;
    background-image: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-transfer-dark.svg");
}

[data-theme="dark"] .pf-ymap-balloon__row--price .pf-ymap-balloon__icon {
    background-image: url("/bitrix/templates/adaptive/css/blocks/../../images/parking/ymap-price-dark.svg");
}

/* End */
/* /bitrix/templates/adaptive/css/tokens.css?17926557437594 */
/* /bitrix/templates/adaptive/css/fonts.css?17926557431706 */
/* /bitrix/templates/adaptive/css/vendor/modern-normalize.css?17926557433338 */
/* /bitrix/templates/adaptive/css/reset.css?17926557431117 */
/* /bitrix/templates/adaptive/css/base.css?17926557434952 */
/* /bitrix/templates/adaptive/css/blocks/controls.css?17926557434269 */
/* /bitrix/templates/adaptive/css/blocks/select.css?17926557433115 */
/* /bitrix/templates/adaptive/css/blocks/header.css?179265574311730 */
/* /bitrix/templates/adaptive/css/blocks/footer.css?17926557436253 */
/* /bitrix/templates/adaptive/css/blocks/tabbar.css?17926557433831 */
/* /bitrix/templates/adaptive/css/blocks/booking.css?17926557439673 */
/* /bitrix/templates/adaptive/css/blocks/breadcrumbs.css?1792655743572 */
/* /bitrix/templates/adaptive/css/blocks/layout.css?17926557433822 */
/* /bitrix/templates/adaptive/css/blocks/popup.css?17926557437563 */
/* /bitrix/components/niges/cookiesaccept/templates/.default/style.css?17377545583526 */
/* /bitrix/templates/adaptive/css/blocks/parking.css?179265574370921 */
/* /bitrix/templates/adaptive/css/blocks/work.css?179265574312466 */
/* /bitrix/templates/adaptive/css/blocks/card.css?17926557433285 */
/* /bitrix/templates/adaptive/css/blocks/news.css?17926557434604 */
/* /bitrix/templates/adaptive/css/blocks/slides.css?17926557431759 */
/* /bitrix/templates/adaptive/css/blocks/ymap.css?17926557433516 */