/*
 * Стили каталога «Кремлевские» (BR Kremlevskie Catalog).
 * Подключаются только на страницах архива/товаров этого раздела
 * (см. class-brk-template-loader.php) — не влияют на остальной сайт.
 *
 * Шрифт Raleway: на сервере не найден как самостоятельный подключаемый
 * webfont темы. Единственные обнаруженные файлы Raleway лежат внутри
 * библиотеки плагина wp-file-manager (для его собственного админ-интерфейса)
 * — использовать их для публичной страницы неправильно (не тот источник,
 * не согласовано с заказчиком, хрупкая зависимость от чужого плагина).
 * Поэтому используется предписанный запасной вариант: Raleway объявлен
 * первым в стеке, но фактически подключаемого файла нет — браузер перейдёт
 * на Gilroy (уже используется темой сайта). Точное фирменное отображение
 * потребует лицензированных woff/woff2-файлов Raleway от заказчика.
 */

:root {
	--brk-red: #B62226;
	--brk-red-light: #D24141;
	--brk-dark: #151515;
	--brk-gray-light: #E7E7E7;
	--brk-white: #FFFFFF;
	--brk-font: "Raleway", "Gilroy", Arial, sans-serif;

	/* Точечная правка 2026-08-12: именованные алиасы для управления
	   цветом строк H1 карточки товара из admin (brk_title_type_color/
	   brk_title_brand_color) — ссылаются на уже существующие реальные
	   цвета проекта, не дублируют HEX. */
	--brk-title-dark: var(--brk-dark);
	--brk-brand-red: var(--brk-red);
}

.brk-catalog,
.brk-product {
	font-family: var(--brk-font);
	color: var(--brk-dark);
	background: var(--brk-white);
	overflow-x: hidden;
}

.brk-catalog *,
.brk-product * {
	box-sizing: border-box;
}

/*
 * Верхний отступ под фиксированную шапку темы.
 * Шапка темы — .header { position: fixed; top: 58px } с центральным логотипом,
 * который на десктопе намеренно выступает вниз (.header__logo { margin-bottom: -58px }).
 * На брейкпоинте темы 1200px шапка переключается в компактный мобильный вид
 * без выступающего логотипа (.header__logo { margin-bottom: 0 } в самой теме) —
 * поэтому здесь используется тот же брейкпоинт 1200px, а не свой произвольный.
 *
 * Точечная правка 2026-08-02 — отступ уменьшен «примерно в 2 раза» по
 * запросу, но НЕ до буквальной половины: точным измерением через
 * getBoundingClientRect() подтверждено, что нижний край логотипа на
 * десктопе (>1200px) заканчивается на 196px от верха, а нижний край шапки
 * в компактном (мобильном/планшетном) виде — на 87px. Буквальная половина
 * старых значений (130px и 75px) была бы МЕНЬШЕ этих порогов и приводила
 * бы к наезду контента на шапку/логотип, что прямо запрещено ТЗ. Взяты
 * ближайшие безопасные значения с небольшим запасом (~15-20px):
 * 215px (было 260px) и 105px (было 150px).
 */
.brk-page-offset {
	padding-top: 105px;
}

@media (min-width: 1201px) {
	.brk-page-offset {
		padding-top: 215px;
	}
}

/* Доступный, но визуально скрытый заголовок (используется на архиве вместо большого hero) */
.brk-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===== Hero ===== */

.brk-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--brk-dark);
}

.brk-hero__img-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.brk-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .55;
}

.brk-hero__pattern-bg {
	position: absolute;
	inset: 0;
	background-color: var(--brk-dark);
	background-image:
		repeating-linear-gradient(45deg, rgba(182, 34, 38, .18) 0, rgba(182, 34, 38, .18) 2px, transparent 2px, transparent 22px);
}

.brk-hero__container {
	position: relative;
	z-index: 1;
	padding: 64px 20px 40px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.brk-hero__title {
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.1;
	color: var(--brk-white);
	margin: 0 0 12px;
	font-weight: 700;
}

.brk-hero__subtitle {
	font-size: clamp(16px, 2vw, 20px);
	color: var(--brk-gray-light);
	margin: 0;
	max-width: 640px;
}

/* ===== Intro / история ===== */

.brk-intro {
	padding: 48px 20px;
	background: var(--brk-white);
}

.brk-intro__container {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.brk-intro__logo {
	max-width: 220px;
	height: auto;
	flex-shrink: 0;
}

.brk-intro__text {
	flex: 1 1 420px;
}

.brk-intro__lead {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--brk-dark);
}

.brk-intro__about {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	color: #3a3a3a;
}

/* ===== Преимущества ===== */

.brk-benefits {
	padding: 48px 20px;
	background: var(--brk-gray-light);
}

.brk-benefits__container {
	max-width: 1320px;
	margin: 0 auto;
}

.brk-benefits__title {
	font-size: 28px;
	margin: 0 0 28px;
	color: var(--brk-dark);
}

.brk-benefits__gallery {
	padding-bottom: 36px;
}

.brk-benefits__item {
	background: var(--brk-white);
	border-radius: 12px;
	padding: 24px;
	height: 100%;
}

.brk-benefits__icon-wrap {
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
}

.brk-benefits__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brk-benefits__item-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--brk-red);
}

.brk-benefits__item-description {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	color: #4a4a4a;
}

.brk-benefits__pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
	background: var(--brk-red);
}

/* ===== Сетка каталога ===== */

.brk-grid-section {
	padding: 48px 20px;
}

.brk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 1320px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.brk-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.brk-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.brk-grid__empty {
	text-align: center;
	color: #6a6a6a;
	padding: 40px 0;
}

/* ===== Карточка товара ===== */

.brk-card {
	min-width: 0;
	background: var(--brk-white);
	border: 1px solid var(--brk-gray-light);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
	height: 100%;
	display: flex;
}

@media (hover: hover) {
	.brk-card:hover {
		box-shadow: 0 12px 32px rgba(21, 21, 21, .12);
		transform: translateY(-2px);
	}
}

.brk-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.brk-card__link:focus-visible {
	outline: 3px solid var(--brk-red);
	outline-offset: -3px;
}

/*
 * Компактный редизайн 2026-08-09: раньше image-zone была строгим квадратом
 * (aspect-ratio 1/1) с object-fit: cover — фото обрезалось и занимало почти
 * всю высоту карточки, при этом обрезка у разных пропорций исходных фото
 * визуально "съедала" разное количество кадра. Ориентир по плотности —
 * ompk.ru/catalog/ostankino (дизайн не копируется, только пропорция и
 * приём "фото с полями, без обрезки"). Новая zone короче по высоте
 * (3/2 вместо 1/1 — при типичной ширине карточки ~420px это даёт
 * ~280px вместо ~420px) и одинакова у всех товаров независимо от
 * пропорций исходной фотографии — object-fit: contain вписывает товар
 * целиком без обрезки и без растяжения.
 *
 * Корректировка 2026-08-09 (вторая): убраны padding и серый background
 * зоны — на реальных фото (все с белым фоном) это визуально читалось как
 * толстая серая рамка вокруг фотографии, а не как "поля". Зона занимает
 * всю ширину карточки, background белый — совпадает с фоном самой
 * карточки и с фоном исходных изображений, видимой рамки не остаётся.
 * Плейсхолдер "Фотография готовится" (templates/parts/image-placeholder.php)
 * не затронут — у него свой явный background с узором, задающий другой,
 * намеренно отличающийся статус "нет фото".
 *
 * Rollback 2026-08-10: этот блок и `.brk-card__img` ниже — точное
 * восстановление состояния ДО задачи с overlay-орнаментом (между
 * которой сюда временно добавлялись `overflow:hidden`,
 * `.brk-card__image-wrap`, `::after` с ornament PNG — всё убрано по
 * решению владельца, орнамент будет запечён в сами фотографии).
 */
.brk-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--brk-white);
}

.brk-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.brk-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 20px;
	color: var(--brk-white);
	background: var(--brk-red);
	letter-spacing: .02em;
}

.brk-card__badge_soon {
	background: var(--brk-dark);
}

.brk-card__badge_hit {
	background: var(--brk-red-light);
}

.brk-card__info {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.brk-card__category {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--brk-red);
	font-weight: 600;
	margin-bottom: 6px;
}

/*
 * Брендовая подпись над названием (компактный редизайн 2026-08-09).
 * По задумке — как небольшое обозначение бренда перед названием товара
 * у карточек ompk.ru/catalog/ostankino, но без категории/граммовки/точек-
 * разделителей: только текст «Белорусские рецепты», лёгкий и нейтральный,
 * не конкурирует по весу с названием товара.
 */
.brk-card__brand {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: #999999;
	font-weight: 400;
	margin: 0 0 6px;
}

/*
 * Двухстрочный заголовок карточки. Категория и короткая коммерческая
 * фраза с карточки убраны.
 *
 * Точечная правка 2026-08-02 (вторая): заголовок теперь строится из двух
 * редактируемых полей (brk_title_line1/brk_title_line2 — см.
 * templates/parts/product-card.php) и стилизуется через CSS custom
 * properties, которые генерирует BRK_Settings::typography_css() из
 * настроек «Кремлевские → Настройки раздела → Типографика названий».
 * Значения после var(...) — безопасный запасной вариант на случай, если
 * инлайн-стиль с настройками почему-то не напечатался: строка 1 крупная
 * и чёрная (сверху), строка 2 поменьше и красная (снизу).
 */
.brk-card__title {
	display: flex;
	flex-direction: column;
	margin: 0 0 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Точечная правка 2026-08-12 (уточнение владельца): внутри карточки схема
   ОБРАТНАЯ по отношению к странице товара — наименование товара (line2)
   чёрное, «Кремлевская/Кремлевские» (line1) фирменный красный. Цвет
   зафиксирован напрямую (--brk-dark/--brk-red), не читается из настраиваемых
   --brk-typo-card-lineX-color. Размер/вес/регистр по-прежнему настраиваются
   через типографику ('Оформление карточки' в admin), фиксирован только цвет. */
.brk-card__title-line1 {
	font-size: var(--brk-typo-card-line1-size, 22px);
	line-height: var(--brk-typo-card-line1-line-height, 1.2);
	color: var(--brk-dark);
	font-weight: var(--brk-typo-card-line1-weight, 800);
	text-transform: var(--brk-typo-card-line1-transform, uppercase);
}

.brk-card__title-line2 {
	font-size: var(--brk-typo-card-line2-size, 15px);
	line-height: var(--brk-typo-card-line2-line-height, 1.3);
	color: var(--brk-red);
	font-weight: var(--brk-typo-card-line2-weight, 700);
	text-transform: var(--brk-typo-card-line2-transform, uppercase);
}

.brk-card__specs {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	color: #4a4a4a;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.brk-card__spec-label {
	color: #8a8a8a;
}

.brk-card__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--brk-red);
	font-size: 14px;
}

.brk-card__arrow {
	display: inline-block;
	width: 16px;
	height: 10px;
	background: currentColor;
	-webkit-mask: linear-gradient(90deg, transparent 0, transparent 60%, #000 60%, #000 100%) center / 60% 2px no-repeat,
		linear-gradient(45deg, transparent 45%, #000 45%) top right / 8px 8px no-repeat,
		linear-gradient(-45deg, transparent 45%, #000 45%) bottom right / 8px 8px no-repeat;
	mask: linear-gradient(90deg, transparent 0, transparent 60%, #000 60%, #000 100%) center / 60% 2px no-repeat,
		linear-gradient(45deg, transparent 45%, #000 45%) top right / 8px 8px no-repeat,
		linear-gradient(-45deg, transparent 45%, #000 45%) bottom right / 8px 8px no-repeat;
}

/* ===== Заглушка изображения ===== */

.brk-placeholder {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brk-gray-light);
	overflow: hidden;
}

.brk-placeholder__pattern {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(182, 34, 38, .10) 0, rgba(182, 34, 38, .10) 2px, transparent 2px, transparent 18px);
}

.brk-placeholder__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 16px;
}

.brk-placeholder__title {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--brk-dark);
	margin-bottom: 6px;
}

.brk-placeholder__text {
	display: inline-block;
	font-size: 12px;
	color: var(--brk-red);
	font-weight: 600;
	border: 1px solid var(--brk-red);
	border-radius: 20px;
	padding: 4px 12px;
	background: var(--brk-white);
}

/* ===== Хлебные крошки ===== */

.brk-breadcrumbs {
	padding: 20px 0 12px;
	font-size: 13px;
	color: #8a8a8a;
}

.brk-breadcrumbs__link {
	color: #8a8a8a;
	text-decoration: underline;
}

.brk-breadcrumbs__link:hover,
.brk-breadcrumbs__link:focus-visible {
	color: var(--brk-red);
}

.brk-breadcrumbs__sep {
	margin: 0 6px;
}

.brk-breadcrumbs__current {
	color: var(--brk-dark);
}

/* ===== Страница товара ===== */

.brk-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 40px;
}

@media (min-width: 1024px) {
	.brk-product__layout {
		grid-template-columns: 1.1fr 1fr;
		gap: 56px;
	}
}

/*
 * Ячейки CSS Grid по умолчанию имеют min-width: auto и не могут сжаться
 * меньше "естественной" ширины содержимого — из-за этого в прошлой версии
 * галереи (на Swiper) возникал баг с гигантской шириной слайда. Новая
 * галерея (см. ниже) не использует Swiper вовсе, но min-width:0 оставлен
 * как общая защита ячеек грида от подобного класса проблем в будущем.
 */
.brk-product__gallery-col,
.brk-product__info-col {
	min-width: 0;
}

/*
 * Область изображения товара (редизайн 2026-08-02).
 * Слева — вертикальная колонка миниатюр, справа — крупное фото (desktop/
 * tablet, ≥768px). На мобильном (<768px) — колонка становится строкой
 * миниатюр под крупным фото. Реализовано на flex + порядке DOM (крупное
 * фото идёт в разметке первым — на мобильном это и есть желаемый порядок
 * "сначала фото", а на десктопе flex-direction: row-reverse визуально
 * переставляет его вправо, а миниатюры — влево, без изменения DOM/JS.
 * Простое переключение src по клику (assets/js/kremlevskie.js) — без
 * Swiper, поэтому старый класс бага (гигантская ширина слайда внутри
 * CSS Grid) для этой галереи структурно невозможен.
 */
.brk-product-gallery__layout {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 768px) {
	.brk-product-gallery__layout {
		flex-direction: row-reverse;
		align-items: flex-start;
	}
}

/*
 * Правка 2026-08-09 (новый стандарт фото «Кремлёвских»): контейнер был
 * квадратом (aspect-ratio 1/1), а новые эталонные фото (проверено на
 * реальном загруженном файле товара «Кремлёвские шпикачки», attachment
 * 3251/3252/3253) — 1024×858px, т.е. заметно НЕ квадрат. При object-fit:
 * contain внутри квадрата это давало горизонтальные белые полосы сверху
 * и снизу — не "поля дизайна", а несовпадение пропорций контейнера и
 * исходника. Контейнер теперь имеет ТОЧНО тот же aspect-ratio, что и
 * новый стандарт фото — при таком совпадении object-fit: contain и cover
 * дают одинаковый результат (полос нет), но contain оставлен намеренно:
 * 6 из 7 товаров линейки пока не переведены на новый формат фото (только
 * шпикачки обновлены на момент правки) — contain гарантированно не
 * обрежет товар/этикету/упаковку ни у одного товара независимо от
 * пропорций его текущего фото, а cover обрезал бы те 6 ещё не
 * обновлённых карточек. Когда все 7 товаров получат фото 1024×858,
 * визуальный результат contain и cover будет идентичен.
 */
.brk-product-gallery__frame {
	position: relative;
	flex: 1;
	width: 100%;
	aspect-ratio: 1024 / 858;
	background: var(--brk-white);
	border: 1px solid var(--brk-gray-light);
	border-radius: 14px;
	overflow: hidden;
}

.brk-product-gallery__main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.brk-product-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 8px;
	overflow-x: auto;
	overflow-y: visible;
}

@media (min-width: 768px) {
	.brk-product-gallery__thumbs {
		flex-direction: column;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 460px;
		width: 84px;
		flex-shrink: 0;
	}
}

.brk-product-gallery__thumb-item {
	flex-shrink: 0;
}

.brk-product-gallery__thumb {
	display: block;
	width: 64px;
	height: 64px;
	padding: 0;
	background: var(--brk-white);
	border: 1px solid var(--brk-gray-light);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease;
}

@media (min-width: 768px) {
	.brk-product-gallery__thumb {
		width: 100%;
		height: 84px;
	}
}

.brk-product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brk-product-gallery__thumb.is-active,
.brk-product-gallery__thumb:hover,
.brk-product-gallery__thumb:focus-visible {
	border-color: var(--brk-red);
}

.brk-product-gallery__thumb:focus-visible {
	outline: 2px solid var(--brk-red);
	outline-offset: 1px;
}

.brk-product-gallery__caption {
	margin-top: 10px;
	font-size: 13px;
	color: #8a8a8a;
}

/*
 * Двухстрочный заголовок товара.
 *
 * Точечная правка 2026-08-02 (вторая): заголовок строится из двух
 * редактируемых полей (brk_title_line1/brk_title_line2 — см.
 * templates/single-brk_product.php) и стилизуется через CSS custom
 * properties (см. комментарий у .brk-card__title выше — тот же
 * механизм, свои переменные для контекста "product"). Старый отдельный
 * красный тег категории (.brk-product__category) убран — его роль
 * теперь у строки 2 (идёт первой визуально, сверху).
 */
.brk-product__title {
	display: flex;
	flex-direction: column;
	margin: 0 0 20px;
	overflow-wrap: break-word;
	word-break: break-word;
	gap: clamp(4px, 0.8vw, 10px);
}

/* Точечная правка 2026-08-12 (доводка после публикации): обе строки H1
   теперь ОДИНАКОВОГО размера/начертания/шрифта/межстрочного интервала —
   различаются только цветом. DOM-порядок естественный (line2 — тип
   товара — первой строкой сверху, line1 — брендовая часть — второй
   снизу), CSS `order` больше не используется. Цвет НЕ зависит от того,
   что за текст в строке (не "если «Кремлевская» → красный") — приходит
   через класс .is-dark/.is-red, который шаблон подставляет из
   ACF-полей товара (brk_title_type_color/brk_title_brand_color),
   управляется владельцем из wp-admin без правки CSS. */
.brk-product__title-line1,
.brk-product__title-line2 {
	font-size: var(--brk-typo-product-line2-size, clamp(32px, 4.4vw, 64px));
	line-height: var(--brk-typo-product-line2-line-height, 1);
	font-weight: var(--brk-typo-product-line2-weight, 800);
	text-transform: var(--brk-typo-product-line2-transform, uppercase);
}

.brk-product__title-line1.is-dark,
.brk-product__title-line2.is-dark {
	color: var(--brk-title-dark);
}

.brk-product__title-line1.is-red,
.brk-product__title-line2.is-red {
	color: var(--brk-brand-red);
}

.brk-product__status {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--brk-white);
	background: var(--brk-red);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 14px;
}

.brk-product__subtitle {
	font-size: 17px;
	color: #5c5c5c;
	margin: 0 0 24px;
}

.brk-product-details__heading {
	font-size: 19px;
	color: var(--brk-dark);
	margin: 28px 0 12px;
}

.brk-product-details__sku {
	font-size: 13px;
	color: #8a8a8a;
	margin: 0 0 8px;
}

.brk-specs-list {
	margin: 0;
	border-top: 1px solid var(--brk-gray-light);
}

.brk-specs-list__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--brk-gray-light);
	font-size: 14px;
}

.brk-specs-list__label {
	min-width: 0;
	color: #8a8a8a;
	margin: 0;
	overflow-wrap: break-word;
}

.brk-specs-list__value {
	min-width: 0;
	color: var(--brk-dark);
	margin: 0;
	text-align: right;
	font-weight: 600;
	overflow-wrap: break-word;
}

.brk-product-details__text,
.brk-product-details__richtext {
	font-size: 15px;
	line-height: 1.6;
	color: #3a3a3a;
	margin: 0;
}

/* ===== Другие товары линейки ===== */

/*
 * Точечная правка 2026-08-02 (вторая): увеличен отступ между заголовком
 * блока и сеткой карточек (было 24px на всех ширинах — визуально мало
 * отличалось от отступа между строками заголовка, из-за чего заголовок
 * читался слишком близко к карточкам). Заодно увеличен верхний отступ
 * секции (был 20px) — нужен понятный разрыв с предыдущим блоком
 * страницы ("Состав"). Ориентир из ТЗ: 24–32px (десктоп) / 16–24px
 * (мобильный) между заголовком и сеткой — взято 20px мобильный / 28px
 * от 768px и шире.
 */
.brk-related {
	padding: 40px 20px 48px;
	background: var(--brk-gray-light);
}

.brk-related__title {
	max-width: 1320px;
	margin: 0 auto 20px;
	font-size: 24px;
	color: var(--brk-dark);
}

@media (min-width: 768px) {
	.brk-related__title {
		margin-bottom: 28px;
	}
}

.brk-grid_related {
	max-width: 1320px;
}

/* ===== CTA ===== */

.brk-cta {
	padding: 48px 20px;
	background: var(--brk-dark);
}

.brk-cta__container {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.brk-cta__title {
	color: var(--brk-white);
	font-size: 26px;
	margin: 0 0 10px;
}

.brk-cta__text {
	color: var(--brk-gray-light);
	font-size: 15px;
	margin: 0 0 14px;
}

.brk-cta__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.brk-cta__link {
	color: var(--brk-white);
	text-decoration: none;
	font-weight: 600;
}

.brk-cta__link:hover,
.brk-cta__link:focus-visible {
	color: var(--brk-red-light);
}

.brk-cta__contact_address {
	color: #b8b8b8;
	font-weight: 400;
}

.brk-cta__button {
	flex-shrink: 0;
	background: var(--brk-red);
	color: var(--brk-white);
	border: none;
	border-radius: 30px;
	padding: 16px 32px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
}

.brk-cta__button:hover,
.brk-cta__button:focus-visible {
	background: var(--brk-red-light);
}

.brk-cta__button:focus-visible {
	outline: 3px solid var(--brk-white);
	outline-offset: 2px;
}

/* ===== Доступность: клавиатурный фокус для интерактивных элементов ===== */

.brk-catalog a:focus-visible,
.brk-catalog button:focus-visible,
.brk-product a:focus-visible,
.brk-product button:focus-visible {
	outline: 3px solid var(--brk-red);
	outline-offset: 2px;
}

/* ===== Мобильная адаптация (совпадает с основной точкой перелома темы, 425px) ===== */

@media (max-width: 425px) {
	.brk-hero__container {
		padding: 40px 16px 28px;
	}

	.brk-intro,
	.brk-benefits,
	.brk-grid-section,
	.brk-related,
	.brk-cta {
		padding-left: 16px;
		padding-right: 16px;
	}

	.brk-cta__container {
		flex-direction: column;
		align-items: flex-start;
	}

	.brk-cta__button {
		width: 100%;
		text-align: center;
	}
}