/* ==========================================================================
   АПК — кастомные стили поверх Bootstrap 5
   --------------------------------------------------------------------------
   СОДЕРЖАНИЕ
   1.  Переменные (:root)
   2.  База (шрифты, body, ссылки, типографика)
   3.  Общие компоненты
       3.1 Оверрайды Bootstrap
       3.2 Swiper — общие акценты
       3.3 Логотип
       3.4 Медиа-блоки и заглушки изображений
       3.5 Кнопки «Подробнее / Запросить цену»
       3.6 Заголовки страниц и секций
       3.7 Хлебные крошки
       3.8 Пагинация
   4.  Шапка
       4.1 Хедер, навигация, телефон
       4.2 Триггер «Каталог»
       4.3 Мегаменю каталога
       4.4 Dropdown и форма поиска
       4.5 Лента категорий (cat-bar)
       4.6 Мобильная шапка: кнопки, модалка поиска, offcanvas-меню
   5.  Подвал
   6.  Шаблон: Главная (плитки каталога, о компании, почему мы, статьи)
   7.  Шаблон: Каталог (карточки категорий)
   8.  Шаблон: Раздел каталога (карточки товаров)
   9.  Шаблон: Товар (галерея, табы, характеристики, документы, заказ, модалка)
   10. Шаблон: Статьи и Новости (список и открытая)
   11. Шаблон: Поиск (страница + выдача mSearch2)
   12. Шаблон: Контакты
   13. Шаблон: Дипломы
   14. Уведомление о cookies
   15. Адаптив (Bootstrap 5 брейкпоинты: <1200px, <992px, <576px)
   --------------------------------------------------------------------------
   ПРАВИЛА ВЕДЕНИЯ ФАЙЛА
   • Все медиа-запросы живут в разделе 15, а не рядом с компонентом, — иначе
     брейкпоинты расползаются по файлу и их невозможно сверить между собой.
   • Метка [ЛЕГАСИ] стоит на блоках, чья разметка не найдена ни в одном чанке
     или шаблоне из core/elements. Разметку могут отдавать сниппеты (PHP) или
     контент ресурсов, поэтому блоки не удалены — проверьте перед вычисткой.
   ========================================================================== */

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ
   ========================================================================== */
:root {
	/* --apk-red: #d6544f;  основной фирменный красный ver 1 */
	--apk-red: #ad3f3a; /* основной фирменный красный ver 2 */
	--apk-red-dark: #c4453f; /* красный для ховеров */
	--apk-gray-bg: #f0f0f0; /* фон секций и подложек */
	--apk-tile: #f7f7f7; /* фон плиток/карточек */
	--apk-dark: #2b2b2b; /* фон подвала */
	--apk-text: #444; /* основной текст */
	--apk-heading: #1a1a1a; /* крупные заголовки страниц */
	--apk-steel: #4a6b85; /* сине-стальной (заголовки категорий) */
	--apk-radius: 4px; /* стандартное скругление */
}

/* ==========================================================================
   2. БАЗА
   ========================================================================== */

/* Вариативный Montserrat, урезанный до латиницы + кириллицы и сжатый в woff2:
   672 КБ TTF → 59 КБ woff2. Исходные .ttf больше не используются. */
@font-face {
	font-family: "Montserrat";
	src: url("/assets/fonts/Montserrat-subset.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/assets/fonts/Montserrat-Italic-subset.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

body {
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	color: var(--apk-text);
	/* базовый размер шрифта — 16px (= 1rem); остальные размеры заданы в rem */
	font-size: 1rem;
}

/* Иконки размечены как <i>, а браузер по умолчанию делает <i> курсивным.
   Bootstrap Icons переопределяет стиль только у ::before, поэтому сам элемент
   оставался на Montserrat Italic — и браузер грузил курсивное начертание
   (61 КБ) ради 30+ пустых элементов, которыми ничего не отрисовывается. */
.bi {
	font-style: normal;
}

a {
	color: var(--apk-red);
}

/* Акцентное слово в двухцветных заголовках («НАШИ КОНТАКТЫ») */
.text-accent {
	color: var(--apk-red);
}

/* ==========================================================================
   3. ОБЩИЕ КОМПОНЕНТЫ
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Оверрайды Bootstrap
   Правила, которые перебивают штатные классы фреймворка. Держим их вместе:
   иначе при обновлении Bootstrap непонятно, что именно мы переопределяли.
   -------------------------------------------------------------------------- */
.bg-primary {
	background-color: var(--apk-red) !important;
}

/* Затемнение под модалками чуть плотнее дефолтного */
.modal-backdrop.show {
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   3.2 Swiper — общие акценты
   Общие для всех слайдеров сайта (главная «О компании», галерея товара).
   Конкретная геометрия галереи товара — в разделе 9.
   -------------------------------------------------------------------------- */
.swiper-button-next,
.swiper-button-prev {
	color: var(--apk-red) !important;
}

.swiper-pagination-bullet-active {
	background: var(--apk-red) !important;
}

/* --------------------------------------------------------------------------
   3.3 Логотип (кольцо АПК)
   -------------------------------------------------------------------------- */
.top_logo img {
	filter: invert(1);
}

/* --------------------------------------------------------------------------
   3.4 Медиа-блоки: серая заглушка под изображение (квадрат по умолчанию)
   Общая геометрия для всех заглушек изображений: карточки товаров, фото
   статей. Конкретные отступы/размеры переопределяются в своих разделах.
   .media-box и .article-figure-thumb — [ЛЕГАСИ], в разметке не встречаются;
   реально работают .product-thumb и .article-row-thumb.
   -------------------------------------------------------------------------- */
.media-box,
.product-thumb,
.article-row-thumb,
.article-figure-thumb {
	border-radius: var(--apk-radius);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.media-box i,
.product-thumb i,
.article-row-thumb i,
.article-figure-thumb i {
	font-size: 3rem;
	color: #cfcfcf;
}
.no-photo-text {
	font-size: 0.875rem;
	font-weight: 600;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.media-box img,
.product-thumb img,
.article-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
}

/* --------------------------------------------------------------------------
   3.5 Кнопка «Подробнее / Запросить цену»
   -------------------------------------------------------------------------- */
.btn-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--apk-red);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--apk-radius);
	border: 2px solid var(--apk-red);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: background 0.2s;
	text-decoration: none;
}
.btn-more:hover {
	background: white;
	color: var(--apk-red);
}

.btn-more-outline {
	background: #fff;
	color: var(--apk-red);
	border: 1px solid var(--apk-red);
}
.btn-more-outline:hover {
	background: var(--apk-red);
	color: #fff;
}

/* Большой вариант (запросить цену / сделать заказ) */
.btn-more-lg {
	display: inline-flex;
	width: auto;
	min-width: 300px;
	padding: 18px 28px;
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   3.6 Заголовки страниц и секций
   Один набор правил на все страничные заголовки (КАТАЛОГ, ПОИСК, ПОЛЕЗНЫЕ
   СТАТЬИ и т.д.). Добавляя новый шаблон — дописывайте его класс сюда же и в
   оба брейкпоинта раздела 15, иначе заголовок останется дефолтным h1.
   -------------------------------------------------------------------------- */
.page-title,
.catalog-title,
.section-page-title,
.articles-page-title,
.article-page-title,
.search-page-title,
.text-page-title {
	font-size: 3.25rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--apk-heading);
	line-height: 1.1;
	letter-spacing: 1px;
}
/* Красный вариант — страница «Каталог» */
.catalog-title {
	color: var(--apk-red);
}

/* Заголовок секции (О НАШЕЙ КОМПАНИИ, БЫСТРЫЙ ЗАКАЗ) */
.section-heading {
	font-size: 2.125rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #333;
	line-height: 1.1;
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   3.7 Хлебные крошки
   -------------------------------------------------------------------------- */
.breadcrumb-apk {
	font-size: 0.875rem;
	color: #888;
}
.breadcrumb-apk a {
	color: #888;
}
.breadcrumb-apk a:hover {
	color: var(--apk-red);
}
.breadcrumb-apk .sep {
	margin: 0 8px;
	color: #bbb;
}
.breadcrumb-apk .current {
	color: #888;
}

/* --------------------------------------------------------------------------
   3.8 Пагинация
   Рабочая разметка — от pdoPage: .pagination > .page-item > .page-link.
   -------------------------------------------------------------------------- */
.pagination {
	background: #f2f2f2;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
}

.pagination .control {
	width: 25px;
	height: 25px;
	background: var(--apk-red);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
}

.pagination .control.disabled {
	background: #ccc;
}

.pagination .control i {
	color: white;
}

.pagination .page-item + .page-item {
	border-left: 2px solid black;
}

.pagination .page-item .page-link {
	border: none;
	background: transparent;
	color: black;
	font-size: 1.2rem;
	line-height: 1.2rem;
	padding: 0 8px;
}

.pagination .page-item.active .page-link {
	color: var(--apk-red);
}

/* [ЛЕГАСИ] Самописная пагинация — вытеснена блоком .pagination выше.
   Разметки .apk-pagination нет ни в одном чанке; мобильные переопределения
   для неё лежат в разделе 15 и помечены так же. */
.apk-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--apk-gray-bg);
	border-radius: 6px;
	padding: 18px 24px;
}
.page-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--apk-red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	transition: background 0.15s;
}
.page-arrow:hover {
	background: var(--apk-red-dark);
	color: #fff;
}
.page-num {
	font-size: 1.125rem;
	font-weight: 600;
	color: #555;
	padding: 0 6px;
	transition: color 0.15s;
}
.page-num:hover,
.page-num.active {
	color: var(--apk-red);
}
.page-sep {
	color: #bbb;
	font-size: 1rem;
}

/* ==========================================================================
   4. ШАПКА
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Хедер, навигация, телефон
   -------------------------------------------------------------------------- */
.site-header {
	height: 85px;
	background: var(--apk-red);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.top_logo {
	margin: 10px 0 0 0;
}

.main-nav {
	margin: 10px 0 0 0;
}

.main-nav .nav-link {
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.5rem 0.75rem;
}
.main-nav .nav-link:hover {
	opacity: 0.85;
}

.main-nav .nav-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.main-nav .nav-link.active {
	text-decoration: underline;
}

.header-phone {
	color: #fff;
	font-size: 1.1rem;
	white-space: nowrap;
	margin: 10px 0 0 0;
	text-decoration: none;
}
.btn-search {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   4.2 Триггер «Каталог» (тот же вид, что у nav-link)
   -------------------------------------------------------------------------- */
.dropdown-toggle-catalog {
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.5rem 0.75rem;
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.dropdown-toggle-catalog.active {
	text-decoration: underline;
}

/* Стрелочка-указатель под «Каталог», когда меню открыто.
   Внимание: в menu.row.tpl рядом лежит ещё и .mega-menu-triangle (см. 4.3) —
   это два независимых «носика» у одного меню. */
.dropdown-toggle-catalog::after {
	content: "";
	display: none;
	position: absolute;
	left: 50%;
	bottom: -16px;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-bottom-color: #fff;
	z-index: 1001;
}
.nav-item.dropdown.show .dropdown-toggle-catalog::after {
	display: block;
}

/* --------------------------------------------------------------------------
   4.3 Мегаменю каталога (full-width dropdown)
   -------------------------------------------------------------------------- */
.mega-grid {
	column-count: 4;
	column-gap: 32px;
}
.mega-col {
	/* запрет разрыва категории между колонками — ключевой момент */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 5px;
	display: inline-block; /* фикс разрывов в WebKit */
	width: 100%;
}

.mega-menu {
	left: 0 !important; /* !important перебивает инлайн-стили Popper.js */
	right: 0 !important;
	width: 100%;
	border: 0;
	border-radius: 0;
	margin-top: 20px !important;
	padding: 45px 0;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mega-menu-triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 10px 20px 10px;
	border-color: transparent transparent #ffffff transparent;
	transform: rotate(0deg);
	margin: -20px 0 0 0;
	position: absolute;
	top: 0;
	left: 37%;
}

.mega-title {
	margin: 0 0 24px 0;
}

.mega-title a {
	font-size: 1.05rem;
	text-transform: uppercase;
	color: #265375;
	line-height: 1.6rem;
	text-decoration: none;
}

.mega-title a:hover {
	color: var(--apk-red);
	text-decoration: underline;
}

.mega-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}
.mega-list li {
	margin-bottom: 6px;
}
.mega-list a {
	color: black;
	font-size: 0.88rem;
	line-height: 1.2;
	text-decoration: none;
}
.mega-list a:hover,
.mega-list a.active {
	color: var(--apk-red);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4.4 Dropdown поиска (full-width) и форма поиска
   .search-form переиспользуется в модалке поиска (см. 4.6), поэтому лежит
   здесь, а не в разделе 11.
   -------------------------------------------------------------------------- */
.search-menu {
	left: 0 !important;
	right: 0 !important;
	width: 100%;
	border: 0;
	border-radius: 0;
	margin-top: 0;
	padding: 28px 0;
	background: var(--apk-gray-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.search-form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: 900px;
	margin: 0 auto;
}
.search-input {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #999;
	padding: 10px 4px;
	font-size: 1.125rem;
	letter-spacing: 1px;
	color: #555;
	outline: none;
	text-transform: uppercase;
}
.search-input::placeholder {
	color: #999;
	letter-spacing: 1px;
}
.search-input:focus {
	border-bottom-color: var(--apk-red);
	color: #333;
}
.search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--apk-red);
	color: #fff;
	border: 0;
	border-radius: var(--apk-radius);
	padding: 14px 28px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.2s;
}
.search-submit:hover {
	background: var(--apk-red-dark);
}
.search-submit i {
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   4.5 Лента категорий (full-width flex)
   -------------------------------------------------------------------------- */
.cat-bar {
	background: #e9e9e9;
	border-bottom: 1px solid #ddd;
}
.cat-flex {
	display: flex;
	width: 100%;
}
.cat-item {
	flex: 1 1 0; /* равные колонки на всю ширину */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 16px 8px;
	color: #555;
	font-size: 0.6875rem;
	line-height: 1.3;
	background: #f2f2f2;
	border-right: 1px solid #ddd;
	transition: background 0.2s;
	text-decoration: none;
}
.cat-item:first-child {
	border-left: 1px solid #ddd;
}
.cat-item:nth-child(2n) {
	background: #e9e9e9;
}
.cat-item:hover {
	background: #fff;
	color: var(--apk-red);
}
/* [ЛЕГАСИ] иконки категорий были шрифтовыми (<i>), сейчас это <img> из TV */
.cat-item i {
	font-size: 1.4rem;
}

/* Иконки категорий приходят из TV разного размера (от 17×23 до 31×27), поэтому
   width/height в разметке им не проставить — растянуло бы. Место под иконку
   резервирует контейнер фиксированной высоты: без него подстановка картинок
   сдвигала вёрстку (CLS 0.05). Сами иконки сохраняют свои пропорции. */
.cat-item-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
}
.cat-item-ico img {
	max-height: 100%;
	width: auto;
}

/* --------------------------------------------------------------------------
   4.6 Мобильная шапка: компактные кнопки, модалка поиска, offcanvas-меню
   -------------------------------------------------------------------------- */
.header-mobile-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--apk-radius);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s;
}
.header-mobile-btn:hover,
.header-mobile-btn:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
}

/* Модалка поиска */
.search-modal .modal-content {
	border: 0;
	border-radius: var(--apk-radius);
}
.search-modal .modal-header {
	padding: 20px 24px 0;
}
.search-modal-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--apk-heading);
}
.search-modal .modal-body {
	padding: 20px 24px 28px;
}
.search-modal .search-form {
	max-width: 100%;
	gap: 16px;
}

/* Offcanvas: мобильное меню */
.mobile-offcanvas-title {
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mobile-offcanvas {
	width: min(320px, 85vw);
	background: #fff;
}
.mobile-offcanvas .offcanvas-header {
	background: var(--apk-red);
	padding: 12px 16px;
}
.mobile-offcanvas .offcanvas-body {
	padding: 8px 0;
}

/* Список мобильной навигации */
.mnav,
.mnav-sub,
.mnav-sub2 {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mnav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 20px;
	color: #333;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	text-decoration: none;
	border-bottom: 1px solid #eee;
	transition:
		background 0.15s,
		color 0.15s;
}
.mnav-link:hover,
.mnav-link:focus,
.mnav-link.active {
	background: var(--apk-gray-bg);
	color: var(--apk-red);
}

/* Стрелка раскрытия — поворот при открытом collapse */
.mnav-caret {
	flex: 0 0 auto;
	font-size: 0.85rem;
	transition: transform 0.2s;
}
.mnav-toggle[aria-expanded="true"] .mnav-caret {
	transform: rotate(180deg);
}

/* Вложенные уровни */
.mnav-sub {
	background: #fafafa;
}
.mnav-sub .mnav-link {
	padding-left: 32px;
	font-size: 0.8125rem;
}
.mnav-sub2 {
	background: #f3f3f3;
}
.mnav-sub2 .mnav-link {
	padding-left: 44px;
	font-weight: 500;
	font-size: 0.75rem;
	text-transform: none;
	letter-spacing: 0;
}
.mnav-all {
	font-weight: 700;
	color: var(--apk-red);
}

/* Телефон под меню в offcanvas */
.mnav-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px 20px 4px;
	padding: 12px 16px;
	background: var(--apk-red);
	border-radius: var(--apk-radius);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background 0.2s;
}
.mnav-phone:hover,
.mnav-phone:focus {
	background: var(--apk-red-dark);
	color: #fff;
}

/* ==========================================================================
   5. ПОДВАЛ
   ========================================================================== */
.site-footer {
	background: var(--apk-dark);
	color: #cfcfcf;
}
.site-footer p {
	font-size: 0.8125rem;
	margin-bottom: 0.5rem;
}

.site-footer p a {
	color: #cfcfcf;
}

.site-footer p a:hover {
	color: var(--apk-red);
}

.footer-logo img {
	filter: invert(1);
}

.footer-copy {
	font-size: 0.75rem;
	color: #888;
}

.footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-nav li {
	margin-bottom: 8px;
}
.footer-nav a {
	color: #cfcfcf;
	font-size: 0.8125rem;
}
.footer-nav a:hover,
.footer-nav a.active {
	color: var(--apk-red);
}

.footer-heading {
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 12px;
}
.footer-bottom {
	font-size: 0.75rem;
	color: #888;
}

/* ==========================================================================
   6. ШАБЛОН: ГЛАВНАЯ
   ========================================================================== */

/* ---- Плитки каталога ---- */
.catalog {
	background: #fff;
}

.tile {
	background: var(--apk-tile);
	border-radius: var(--apk-radius);
	position: relative;
	overflow: hidden;
}
.tile-title {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	padding: 0 24px;
	height: 100%;
}

.tile-title a {
	color: black;
}

.tile-link-arrow {
	color: #bbb;
	font-size: 1rem;
	flex-shrink: 0;
}
.tile-link-arrow:hover {
	color: var(--apk-red);
}

.tile-list {
	list-style: none;
	margin: 0;
	padding: 0 24px 26px 24px;
}
.tile-list li {
	position: relative;
	padding-left: 14px;
	margin-bottom: 0;
	font-size: 0.875rem;
}
.tile-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--apk-red);
}
.tile-list a {
	color: var(--apk-red);
	text-decoration: underline;
}
.tile-list a:hover {
	color: var(--apk-red-dark);
}

/* ---- Большие красные баннеры-плитки ---- */
.tile-banner {
	background: var(--apk-red);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 200px;
	padding: 24px;
}

.tile-banner-title {
	font-size: 1.625rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	max-width: 70%;
}

.tile-banner-bg-1 {
	background-image: url("/assets/manager/mainpage/category_bg_01.jpg");
	background-size: cover;
}

.tile-banner-bg-2 {
	background-image: url("/assets/manager/mainpage/category_bg_02.jpg");
	background-size: cover;
}

.tile-arrow-btn {
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: #a83939;
	border: 2px solid white;
	border-radius: 12px;
	font-size: 2rem;
	color: white;
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 3px;
	justify-content: center;
}

.tile-arrow-btn:hover {
	border-color: #a83939;
	background: white;
	color: #a83939;
}

/* ---- О компании (секция со слайдером .about_swiper) ---- */
.about {
	background: var(--apk-gray-bg);
}
.about p {
	line-height: 1.7;
	margin-bottom: 1rem;
}

/* ---- Почему наше оборудование ---- */
.why-us {
	background: #ac4040 url("/assets/manager/mainpage/whywe_bg.jpg") center/cover;
	position: relative;
}
.why-heading {
	font-size: 2.5rem;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: 24px;
}
.why-us p {
	line-height: 1.7;
	opacity: 0.95;
}
.why-subheading {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 24px;
}
/* Перечисление «Вакуумные шприцы / Волчки / …». Раньше пункты разделялись
   двойными &nbsp; прямо в разметке — строка не переносилась и на узких
   экранах давала горизонтальную прокрутку. */
.why-offer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	font-weight: 700;
}
/* [ЛЕГАСИ] крупная иконка-«водяной знак» секции — в разметке не встречается */
.why-image {
	font-size: 12rem;
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Статьи (превью-карточки на главной) ---- */
.articles {
	background: #fff;
}
.article-card {
	display: flex;
	flex-direction: column;
	margin: 0 0 30px 0;
}
.article-thumb {
	border-radius: var(--apk-radius);
	margin-bottom: 16px;
	text-align: center;
}
.article-title {
	font-size: 1.4rem;
	margin-bottom: 12px;
	min-height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.article-text {
	color: #666;
	flex-grow: 1;
	margin-bottom: 16px;
}

/* ==========================================================================
   7. ШАБЛОН: КАТАЛОГ (карточки категорий)
   ========================================================================== */
.catalog-page {
	background: #fff;
}

/* Карточка категории: красная иконка слева + серая область справа */
.cat-card {
	display: flex;
	background: var(--apk-tile);
	border-radius: var(--apk-radius);
	overflow: hidden;
	height: 100%;
}
.cat-card-icon {
	flex: 0 0 175px;
	background: var(--apk-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cat-card-body {
	flex: 1 1 auto;
	padding: 28px 32px;
}

.cat-card-title a {
	text-decoration: none;
}

.cat-card-list {
	margin: 0 0 30px 0;
}
.cat-card-list li {
	margin-bottom: 12px;
}
.cat-card-list a {
	color: #666;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: color 0.15s;
}
.cat-card-list a:hover,
.cat-card-list a.active {
	color: var(--apk-red);
}
.cat-card-list a.underline {
	text-decoration: underline;
}

/* ==========================================================================
   8. ШАБЛОН: РАЗДЕЛ КАТАЛОГА (карточки товаров)
   ========================================================================== */
.section-page {
	background: #fff;
}

.section-subtitle {
	font-size: 1.875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #666;
	letter-spacing: 0.5px;
	margin-bottom: 24px;
}

/* Карточка товара (общая геометрия картинки — в 3.4) */
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-thumb {
	margin-bottom: 18px;
}

.product-name {
	text-align: center;
	font-size: 1rem;
	color: #555;
	line-height: 1.4;
	margin-bottom: 16px;
	flex-grow: 1;
}

/* ==========================================================================
   9. ШАБЛОН: ТОВАР
   ========================================================================== */
.product-page {
	background: #fff;
}

.product-title {
	font-size: 2.75rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--apk-heading);
	line-height: 1.1;
	margin-bottom: 20px;
}
.product-lead {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #555;
	margin-bottom: 28px;
}

/* ---- Галерея товара ----
   Правила переехали сюда из <style> внутри chunks/shop/product_gallery.tpl —
   раньше они уезжали в HTML на каждой карточке товара. Общие акценты Swiper
   (цвет стрелок и буллетов) лежат в 3.2. */
.item_gallery_big {
	width: 100%;
	margin: 0 0 10px 0;
}
/* Слайд — площадка фиксированной минимальной высоты: мелкое фото центрируется
   в ней по обеим осям, а не прижимается к верхнему левому углу колонки.
   Именно min-height (а не height): крупные вертикальные фото по-прежнему
   растягивают слайд под себя и не обрезаются. */
.item_gallery_big .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}
.item_gallery_big .swiper-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.item_gallery_big .swiper-slide img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: auto;
	object-fit: contain;
}

.item_gallery_small {
	box-sizing: border-box;
	padding: 10px 0;
}
.item_gallery_small .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25%;
	height: 90px;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.15s;
}
.item_gallery_small .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.item_gallery_small .swiper-slide-thumb-active {
	opacity: 1;
}

/* Заглушка «Нет фото» вместо галереи */
.gallery-no-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	background: #f2f2f2;
	border-radius: var(--apk-radius);
	font-size: 1rem;
	font-weight: 600;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Табы и серая подложка под их содержимым (full-width) ---- */
.product-tabs {
	border-bottom: 1px solid #ddd;
	gap: 8px;
}
.tab-btn {
	background: transparent;
	border: 0;
	border-radius: var(--apk-radius) var(--apk-radius) 0 0;
	padding: 16px 28px;
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #555;
	cursor: pointer;
	transition: all 0.15s;
}
.tab-btn:hover {
	color: var(--apk-red);
}
.tab-btn.active {
	background: var(--apk-gray-bg);
	color: var(--apk-red);
}

.product-tab-wrap p {
	line-height: 1.7;
	color: #444;
	margin-bottom: 1rem;
}

.product-tab-bg {
	background: var(--apk-gray-bg);
}

/* Маркированный список в описании (приходит из контента ресурса) */
.dash-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}
.dash-list li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 12px;
	line-height: 1.6;
	color: #444;
}
.dash-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--apk-red);
	font-weight: 700;
}

/* ---- Таблица характеристик (разметку строит сниппет custom_prepareSpecsTable) ---- */
.specs-table {
	background: #fff;
	border-radius: var(--apk-radius);
	overflow: hidden;
	margin: 0;
	max-width: 760px;
}
.specs-table th,
.specs-table td {
	padding: 14px 20px;
	font-size: 0.9375rem;
	vertical-align: top;
	border-bottom: 1px solid #eee;
}
.specs-table th {
	width: 45%;
	font-weight: 600;
	color: #333;
	background: #fafafa;
}
.specs-table td {
	color: #555;
}
.specs-table tr:last-child th,
.specs-table tr:last-child td {
	border-bottom: 0;
}

/* ---- Список документов ---- */
.docs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 640px;
}
.docs-list li {
	margin-bottom: 12px;
}
.docs-list a {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: var(--apk-radius);
	padding: 16px 20px;
	color: #333;
	transition:
		box-shadow 0.15s,
		transform 0.1s;
}
.docs-list a:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}
.docs-list .doc-name {
	font-size: 0.9375rem;
	font-weight: 600;
	flex-grow: 1;
}
.docs-list .doc-meta {
	font-size: 0.8125rem;
	color: #999;
	white-space: nowrap;
}
/* [ЛЕГАСИ] иконка PDF и стрелка скачивания — в chunks/shop/file_row.tpl
   остались только .doc-name и .doc-meta */
.docs-list .bi-file-earmark-pdf {
	font-size: 1.8rem;
	color: var(--apk-red);
	flex-shrink: 0;
}
.docs-list .doc-dl {
	font-size: 1.2rem;
	color: #bbb;
	flex-shrink: 0;
}
.docs-list a:hover .doc-dl {
	color: var(--apk-red);
}

/* ---- Быстрый заказ: секция, форма и модалка ---- */
.quick-order {
	background: #fff;
}
.quick-order-form {
	max-width: 500px;
}
.order-input {
	border: 1px solid #ccc;
	border-radius: 22px;
	padding: 14px 24px;
	font-size: 0.9375rem;
	margin-bottom: 16px;
}
.order-input:focus {
	border-color: var(--apk-red);
	box-shadow: none;
}
.order-submit {
	display: flex !important;
	width: 100%;
	justify-content: space-between;
}

/* Согласие на обработку ПД: одинаково в инлайн-форме и в модалке */
.quick-order .form-check-label,
.order-modal .quick-order-form .form-check-label {
	font-size: 0.66rem;
}

/* [ЛЕГАСИ] текст согласия отдельным абзацем — теперь это .form-check-label */
.consent-text {
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #444;
	margin: 8px 0 20px;
}
.consent-text a {
	color: var(--apk-red);
	text-decoration: underline;
}

.order-modal .modal-content {
	border: 0;
	border-radius: 8px;
	padding: 48px 56px 56px;
	position: relative;
}
.order-modal .modal-close {
	position: absolute;
	top: 22px;
	right: 24px;
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	color: #222;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s;
}
.order-modal .modal-close:hover {
	color: var(--apk-red);
}
.order-modal .modal-body {
	padding: 0;
}

/* ==========================================================================
   10. ШАБЛОН: СТАТЬИ И НОВОСТИ (список и открытая)
   Новости используют ту же разметку и те же классы .article-*.
   ========================================================================== */

/* ---- Список ---- */
.articles-page {
	background: #fff;
}

/* Алфавитный указатель */
.articles-alphabet {
	background: #f2f2f2;
	padding: 30px;
	border-radius: 12px;
	margin: 0 0 30px 0;
}

/* Горизонтальная карточка статьи */
.article-row {
	display: flex;
	gap: 36px;
	margin-bottom: 48px;
}
.article-row-thumb {
	flex: 0 0 300px;
}
.article-row-thumb img {
	padding: 24px;
}
.article-row-body {
	flex: 1 1 auto;
	min-width: 0; /* корректный перенос длинного текста */
}
.article-row-title {
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #222;
	line-height: 1.3;
	margin-bottom: 18px;
}
.article-row-text {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #555;
	margin-bottom: 28px;
}

/* ---- Открытая статья ---- */
.article-page {
	background: #fff;
}
.article-body {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #444;
	overflow: hidden;
}
.article-body p {
	margin-bottom: 1.3rem;
}
.article-body strong {
	color: #333;
}

/* Изображение, обтекаемое текстом слева (вставляется в контент ресурса) */
.article-figure {
	float: left;
	width: 300px;
	margin: 4px 32px 16px 0;
}
.article-figure img {
	width: 100%;
	border-radius: var(--apk-radius);
	display: block;
}
.article-page .btn-more {
	clear: both;
} /* кнопка «Все статьи» под обтеканием */

/* ==========================================================================
   11. ШАБЛОН: ПОИСК
   ========================================================================== */
.search-page {
	background: #fff;
}

/* Выдача mSearch2 (chunks/!plugins/mSearch/mSearch.row.tpl) */
.mse-result {
	text-align: center;
	background: transparent;
	border: 1px solid var(--apk-gray-bg);
}

.mse-result-title a {
	color: var(--apk-red) !important;
}

/* [ЛЕГАСИ] верстка выдачи до перехода на mSearch2 */
.search-result {
	margin-bottom: 32px;
}
.search-result-title {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--apk-red);
	margin-bottom: 14px;
	transition: color 0.15s;
}
.search-result-title:hover {
	color: var(--apk-red-dark);
	text-decoration: underline;
}
.search-result-snippet {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

/* ==========================================================================
   12. ШАБЛОН: КОНТАКТЫ
   ========================================================================== */
.contacts-page {
	background: #fff;
}

.contacts-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.contacts-list li {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #444;
	margin-bottom: 20px;
}
.contacts-list strong {
	color: #222;
}

.contacts-list a:hover {
	color: var(--apk-red);
}

/* 450px — ровно та высота, которую запрашивает конструктор Яндекс.Карт
   (…&height=450). Раньше стояло 420px, и при подстановке карты страница дёргалась. */
.contacts-map {
	border-radius: var(--apk-radius);
	overflow: hidden;
	min-height: 450px;
	background: var(--apk-gray-bg);
}
.contacts-map iframe {
	display: block;
	width: 100%;
	min-height: 450px;
	border: 0;
}
/* [ЛЕГАСИ] заглушка на месте карты — в разметке не встречается */
.contacts-map-placeholder {
	height: 100%;
	min-height: 420px;
	background: #e6e6e6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #888;
}
.contacts-map-placeholder i {
	font-size: 3rem;
	color: var(--apk-red);
}
.contacts-map-placeholder span {
	font-size: 0.9375rem;
}

/* ==========================================================================
   13. ШАБЛОН: ДИПЛОМЫ
   ========================================================================== */
.diploms_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

/* [ЛЕГАСИ] карточка диплома из первой версии блока на главной; сейчас
   Gallery3x отдаёт разметку с классом .diploma */
.diploma-thumb {
	background: #c4c4c4;
	border-radius: var(--apk-radius);
	aspect-ratio: 1 / 1;
	margin-bottom: 12px;
}
.diploma-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
}
.diploma-desc {
	font-size: 0.8125rem;
	color: #777;
	margin: 0;
}

/* ==========================================================================
   14. УВЕДОМЛЕНИЕ О COOKIES
   (перенесено из <style> в chunks/base/js_run.tpl)
   ========================================================================== */
.cookie-message {
	/* По умолчанию скрыт: показывает только JS, если согласие ещё не дано.
	   Без этого баннер висел на каждой странице у всех, включая принявших. */
	display: none;
	position: fixed;
	z-index: 1000;
	bottom: 24px;
	/* было left: 80% — на экранах ~1000–1400px блок вылезал за правый край
	   и вызывал горизонтальную прокрутку страницы */
	right: 24px;
	width: min(350px, calc(100vw - 40px));
	animation: cookieFadeIn 0.5s ease-in-out;
	transition: opacity 0.3s;
}
.cookie-message.is-visible {
	display: block;
}
.cookie-message.is-hiding {
	opacity: 0;
}

@keyframes cookieFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cookie-message-inner {
	text-align: center;
	font-size: 0.8rem;
	padding: 20px;
	line-height: 1.5;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}
.cookie-message-text {
	margin: 0 0 10px 0;
}
.cookie-message a {
	color: var(--apk-red);
	text-decoration: underline;
}
.cookie-message-btn {
	font-size: 0.8rem;
	padding: 10px;
	border-color: var(--apk-red);
	background-color: var(--apk-red);
	color: #fff;
}
.cookie-message-btn:hover {
	border-color: var(--apk-red-dark);
	background-color: var(--apk-red-dark);
	color: #fff;
}

/* ==========================================================================
   15. АДАПТИВ (Bootstrap 5 брейкпоинты)
   Все переопределения по ширине экрана — только здесь, в порядке убывания
   брейкпоинтов. Внутри блока правила сгруппированы по разделам файла.
   ========================================================================== */

/* ---- < xl (< 1200px) ---- */
@media (max-width: 1199.98px) {
	/* Шапка */
	.mega-menu-triangle {
		left: 29%;
		top: 0.5%;
	}
}

/* ---- < lg (планшет, < 992px) ---- */
@media (max-width: 991.98px) {
	/* Шапка */
	.main-nav .nav {
		justify-content: center;
	}
	.cat-flex {
		flex-wrap: wrap;
	}
	.cat-item {
		flex: 1 1 20%;
	} /* по 5 в ряд */

	.mega-grid {
		column-count: 2;
	}

	.mega-menu {
		/* скролл по высоте */
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		padding: 24px 0;
	}

	/* Общие компоненты: заголовки. Раньше здесь уменьшался только .page-title,
	   а .catalog-title и остальные из той же группы оставались 3.25rem. */
	.page-title,
	.catalog-title,
	.section-page-title,
	.articles-page-title,
	.article-page-title,
	.search-page-title,
	.text-page-title {
		font-size: 2.625rem;
	}
	.section-heading {
		font-size: 1.75rem;
	}

	/* Главная */
	.tile-banner-title {
		max-width: 100%;
		font-size: 1.375rem;
	}
	.why-heading {
		font-size: 1.875rem;
	}

	/* Каталог */
	.cat-card-icon {
		flex: 0 0 130px;
		font-size: 3.6rem;
	}
	.cat-card-body {
		padding: 22px 24px;
	}

	/* Раздел каталога */
	.section-subtitle {
		font-size: 1.625rem;
	}

	/* Товар */
	.product-title {
		font-size: 2.25rem;
	}
	.item_gallery_big .swiper-slide {
		min-height: 320px;
	}
	.product-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.tab-btn {
		white-space: nowrap;
		font-size: 1rem;
		padding: 14px 20px;
	}

	/* Статьи */
	.article-row-thumb {
		flex: 0 0 220px;
	}
	.article-row-title {
		font-size: 1.1875rem;
	}
	.article-figure {
		width: 240px;
		margin-right: 24px;
	}
}

/* ---- < sm (мобильный, < 576px) ---- */
@media (max-width: 575.98px) {
	/* Общие компоненты: заголовки */
	.page-title,
	.catalog-title,
	.section-page-title,
	.articles-page-title,
	.article-page-title,
	.search-page-title,
	.text-page-title {
		font-size: 2rem;
		font-weight: 800;
	}

	/* Общие компоненты: кнопки */
	.btn-more-lg {
		min-width: 0;
		width: 100%;
	}

	/* Шапка */

	.header-phone {
		font-size: 0.95rem;
	}

	/* Шапка: лента категорий целиком скрыта на мобильном */
	.cat-item {
		display: none;
		/* flex: 1 1 50%;
		font-size: 0.8rem;
		justify-content: center;
		padding: 8px;
		border-bottom: 1px solid #dddddd; */
	}

	.cat-item img {
		display: none;
	}

	/* Шапка: мегаменю */
	.mega-grid {
		column-count: 1;
	}
	.mega-menu {
		padding: 16px 0;
	}
	/* Размер задаёт ссылка внутри (.mega-title a { font-size: 1.05rem }),
	   поэтому правило висит на ней, а не на самом .mega-title — иначе оно
	   перебивалось и заголовки оставались крупными. */
	.mega-title a {
		font-size: 0.8125rem;
	}

	/* Шапка: форма поиска */
	.search-form {
		flex-direction: column;
		gap: 16px;
	}
	.search-input {
		width: 100%;
		font-size: 1rem;
	}
	.search-submit {
		width: 100%;
		justify-content: center;
	}

	/* Главная */
	.tile {
		padding: 0;
	}

	.tile-title {
		font-size: 1.14rem;
		font-weight: 700;
		margin: 0 0 40px 0;
		justify-content: center;
	}

	.tile-arrow-btn {
		display: none;
	}

	.tile-banner-title {
		text-align: center;
	}

	.tile img {
		display: none;
	}

	/* [ЛЕГАСИ] строка дипломов на главной — класса нет в разметке */
	.diplom_mainpage_row {
		text-align: center;
	}

	/* Каталог */
	.cat-card {
		flex-direction: column;
	}
	.cat-card-icon {
		flex: 0 0 120px;
		font-size: 3.2rem;
	}
	.cat-card-body {
		padding: 20px 22px;
	}

	/* Раздел каталога */
	.section-subtitle {
		font-size: 1.375rem;
	}
	.product-name {
		font-size: 0.875rem;
	}

	/* Товар */
	.product-title {
		font-size: 1.875rem;
	}
	.item_gallery_big .swiper-slide {
		min-height: 240px;
	}
	.item_gallery_small .swiper-slide {
		height: 70px;
	}
	.tab-btn {
		font-size: 0.875rem;
		padding: 12px 16px;
	}
	.specs-table th,
	.specs-table td {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
	.docs-list .doc-meta {
		display: none;
	}
	.order-modal .modal-content {
		padding: 40px 22px 32px;
	}
	.order-modal .modal-close {
		top: 14px;
		right: 16px;
	}

	/* Статьи */
	.article-row {
		flex-direction: column;
		gap: 18px;
	}
	.article-row-thumb {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 10;
	}
	.article-row-title {
		font-size: 1.125rem;
	}
	.article-figure {
		float: none;
		width: 100%;
		margin: 0 0 20px;
	}

	/* [ЛЕГАСИ] мобильные правки самописной пагинации (см. 3.8) */
	.apk-pagination {
		gap: 6px;
		padding: 14px;
	}
	.page-num {
		font-size: 1rem;
		padding: 0 3px;
	}

	/* Контакты */
	.contacts-list li {
		font-size: 0.9375rem;
	}
	.contacts-map,
	.contacts-map iframe,
	.contacts-map-placeholder {
		min-height: 300px;
	}

	/* Cookies */
	.cookie-message {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
	}
}