/*
 * «Бонусы и акции»: главная и страницы предложений (Figma GUQ3l9kNq4AJKiGMPWupVp,
 * страница «Бонусы и акции»).
 *
 * Размеры для экранов шире 1660 — по макету 1920 и масштабируются вместе с
 * экраном: calc(N * var(--u)), где --u = 1/1920 ширины окна (так же, как
 * остальные страницы темы держат vw на больших экранах). Ниже — блоки в px
 * по макетам 1440 (1279–1660), 768 (766–1278) и 360 (до 765).
 */

.bonus-page {
	--u: calc(100vw / 1920);
	--yellow: #fbc707;
	--grey: #f5f5f5;
	/* от последней секции до подвала — тот же шаг, что между секциями */
	padding-bottom: calc(240 * var(--u));
	font-family: Manrope, sans-serif;
	color: #000;
	overflow-x: clip;
}

/* светлый текст на тёмном фоне: без субпиксельного сглаживания он жирнее, чем в макете */
.bonus-ohero--dark .bonus-ohero__box,
.bonus-ohero--green .bonus-ohero__box,
.bonus-app,
.bonus-btn--dark {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* сброс — с нулевой специфичностью (:where), чтобы любой класс блока был сильнее */
:where(.bonus-page) :where(h1, h2, h3, p, ul, ol, fieldset, legend) {
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.bonus-page) :where(ul, ol) {
	list-style: none;
}

.bonus-page [hidden] {
	display: none !important;
}

/* общий контейнер секций: 1400 при 1920 */
.bonus-offers,
.bonus-steps,
.bonus-more,
.bonus-faq,
.bonus-app {
	width: calc(1400 * var(--u));
	margin-left: auto;
	margin-right: auto;
}

/* заголовки секций: обычное начертание, жирная часть в <b> */
.bonus-h2 {
	font-size: calc(64 * var(--u));
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
}

.bonus-h2 b {
	font-weight: 700;
}

.bonus-h2--center {
	text-align: center;
}

/* ── кнопка из макета: жёлтый силуэт, белый круг со стрелкой ─────────── */

.bonus-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	width: calc(320 * var(--u));
	height: calc(80 * var(--u));
	padding: 0 calc(16 * var(--u)) 0 calc(80 * var(--u));
	border: 0;
	background: none;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	isolation: isolate;
}

/* силуэт — псевдоэлементом: у темы глобально :focus{background:0 0!important}
   (css/main-style.php), и фон самой кнопки после нажатия пропадал.
   Через border-image: круг слева и скругление справа — в натуральную
   величину, тянется только прямая середина, поэтому кнопка любой ширины
   (во всю строку на телефоне) не искажается. */
.bonus-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 0 solid transparent;
	border-image: url("../assets/images/img/bonuses/btn-shape.svg") 0 40 0 120 fill / 0 calc(40 * var(--u)) 0 calc(120 * var(--u)) stretch;
}

.bonus-btn__circle {
	position: absolute;
	left: calc(10 * var(--u));
	top: calc(10 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	border-radius: 50%;
	background: #fff;
}

.bonus-btn__circle svg {
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	transition: transform .5s;
}

/* как у кнопок на остальных страницах: стрелка против часовой — вверх */
.bonus-btn:hover .bonus-btn__circle svg,
.bonus-btn:focus-visible .bonus-btn__circle svg {
	transform: rotate(-135deg);
}

.bonus-btn__text {
	flex: 1;
	font-size: calc(20 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-align: center;
}

/* ── первый экран ───────────────────────────────────────────────────── */

.bonus-hero__box {
	position: relative;
	width: calc(1800 * var(--u));
	height: calc(860 * var(--u));
	margin: 0 auto;
	border-radius: calc(32 * var(--u));
	background: linear-gradient(115.54deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 25%), #eee;
	overflow: hidden;
}

.bonus-hero__content {
	position: absolute;
	left: calc(200 * var(--u));
	top: calc(88 * var(--u));
	width: calc(686 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(54 * var(--u));
}

.bonus-page #BreadcrumbList {
	display: flex;
	flex-wrap: wrap;
	min-height: 0;   /* у темы min-height: 50px — строка крошек опускала текст */
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: calc(20 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bonus-page #BreadcrumbList li {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	margin: 0;
	padding: 0;
}

/* у темы крошки в vw, светлые (opacity .5) и со своими отступами у стрелок */
.bonus-page #BreadcrumbList a,
.bonus-page #BreadcrumbList span {
	display: inline;
	opacity: 1;
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.37;
	color: rgba(0, 0, 0, .5);
	text-decoration: none;
}

.bonus-page #BreadcrumbList li:last-child span {
	color: #000;
}

.bonus-page #BreadcrumbList svg {
	width: calc(16 * var(--u));
	height: calc(16 * var(--u));
	min-width: 0;
	min-height: 0;
	margin: 0;
	opacity: 1;
}

/* в макете 1920 — три строки: «Бонусы и акции / для водителей / и курьеров» */
.bonus-hero__title {
	max-width: calc(560 * var(--u));
	font-size: calc(72 * var(--u));
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}

.bonus-hero__desc {
	max-width: calc(667 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 1.37;
}

.bonus-hero__tile {
	position: absolute;
	overflow: hidden;
	border-radius: calc(32 * var(--u));
	background: #dbdbdb;
}

.bonus-hero__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bonus-hero__tile--courier,
.bonus-hero__tile--driver {
	top: calc(80 * var(--u));
	width: calc(335 * var(--u));
	height: calc(340 * var(--u));
}

.bonus-hero__tile--courier {
	left: calc(920 * var(--u));
}

.bonus-hero__tile--driver {
	left: calc(1265 * var(--u));
}

/* тёмная плашка: фон с подсветкой растягивается, товары — по высоте плашки */
.bonus-hero__tile--products {
	left: calc(920 * var(--u));
	top: calc(430 * var(--u));
	width: calc(680 * var(--u));
	height: calc(350 * var(--u));
	background-position: center;
	background-size: cover;
}

.bonus-hero__tile--products img {
	position: absolute;
	left: 13.68%;
	top: 0;
	width: auto;
	height: 102.3%;
	object-fit: contain;
}

/* ── предложения ────────────────────────────────────────────────────── */

.bonus-offers {
	margin-top: calc(240 * var(--u));
	scroll-margin-top: 120px;
}

.bonus-offers__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(79 * var(--u));
}

.bonus-offers__head .bonus-h2 {
	line-height: 1.37;
	letter-spacing: 0;
}

.bonus-filters {
	display: flex;
	flex: none;
	gap: calc(23.7 * var(--u));
}

.bonus-filter {
	padding: calc(9.76 * var(--u)) calc(29.3 * var(--u));
	border: max(1px, calc(1.4 * var(--u))) solid #000;
	border-radius: calc(46 * var(--u));
	background: #fff;
	color: #000;
	font: inherit;
	font-size: calc(22.3 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

/* Без плавного перехода: фон и текст меняются местами (чёрный ↔ белый), и
   на середине перехода оба становились одинаково серыми — надпись
   «моргала». Наведение — только там, где есть мышь: на телефоне :hover
   «залипает» после касания. */
.bonus-filter.is-active {
	background: #000;
	color: #fff;
}

@media (hover: hover) {
	.bonus-filter:hover {
		background: #000;
		color: #fff;
	}
}

/* смена таба: старые карточки гаснут, новые появляются (js/bonuses.js) */
.bonus-offers .bonus-grid {
	transition: opacity .16s ease;
}

.bonus-offers .bonus-grid.is-fading {
	opacity: 0;
}

.bonus-card.is-in {
	animation: bonus-card-in .4s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes bonus-card-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bonus-form__ok:not([hidden]),
	.bonus-form__ok:not([hidden]) .bonus-form__ok-icon,
	.bonus-card.is-in {
		animation: none;
	}
}

.bonus-grid {
	display: grid;
	grid-template-columns: repeat(3, calc(449 * var(--u)));
	gap: calc(26 * var(--u));
	margin-top: calc(80 * var(--u));
}

/* карточка: рамка — тенью внутрь, чтобы картинка перекрывала её сверху */
.bonus-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(742 * var(--u));
	border-radius: calc(32 * var(--u));
	background: #fff;
	overflow: hidden;
}

/* рамка поверх картинки, как в макете (тенью внутрь её перекрывала картинка) */
.bonus-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid #000;
	border-radius: inherit;
	pointer-events: none;
}

.bonus-card__img {
	flex: none;
	height: calc(226 * var(--u));
	background: #eee;
}

.bonus-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bonus-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: calc(16 * var(--u));
	padding: calc(25 * var(--u)) calc(28 * var(--u)) calc(21 * var(--u)) calc(29 * var(--u));
}

.bonus-tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(11 * var(--u));
}

.bonus-tags li {
	padding: calc(2 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u));
	border: 1px solid #dcdcdc;
	border-radius: calc(115 * var(--u));
	background: #fff;
	font-size: calc(16 * var(--u));
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.bonus-card__title {
	max-width: calc(360 * var(--u));   /* в макете 1920 длинные — в две строки, «Бесплатные сумки…» — в одну */
	font-size: calc(24 * var(--u));
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.04em;
}

.bonus-card__text {
	font-size: calc(16 * var(--u));
	font-weight: 400;
	line-height: 1.53;
	letter-spacing: -0.04em;
}

.bonus-card__bottom {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--u));
	margin-top: auto;
	padding-top: calc(16 * var(--u));
}

.bonus-hl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(11 * var(--u));
	min-height: calc(100 * var(--u));
	margin-bottom: calc(6 * var(--u));
	padding: calc(10 * var(--u)) calc(31 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
	border-radius: calc(18 * var(--u));
	background: var(--yellow);
}

.bonus-hl b {
	font-size: calc(28 * var(--u));
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.04em;
}

.bonus-hl--small b {
	font-size: calc(20 * var(--u));
}

.bonus-hl span {
	font-size: calc(14 * var(--u));
	line-height: 1.53;
	letter-spacing: -0.04em;
	color: #5a4500;
}

.bonus-meta {
	display: flex;
	flex-direction: column;
	gap: calc(5 * var(--u));
	padding-top: calc(16 * var(--u));
	border-top: 1px solid #e4e4e4;
}

.bonus-meta li {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.53;
	letter-spacing: -0.04em;
	color: #8a8a8a;
}

.bonus-meta img {
	flex: none;
	width: calc(14 * var(--u));
	height: calc(16 * var(--u));
	object-fit: contain;
}

.bonus-meta .is-always {
	color: #2cda00;
}

.bonus-meta .is-off {
	color: #f00;
}

.bonus-card__more {
	display: inline-flex;
	align-items: center;
	gap: calc(17 * var(--u));
	align-self: flex-start;
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1.53;
	letter-spacing: -0.04em;
	color: #000;
	text-decoration: none;
}

.bonus-card__more svg {
	width: calc(13 * var(--u));
	height: calc(11 * var(--u));
	transition: transform .2s ease;
}

/* вся карточка — ссылка на предложение */
.bonus-card__more::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bonus-card:hover .bonus-card__more svg {
	transform: translateX(4px);
}

.bonus-card__more.is-disabled {
	opacity: .4;
}

.bonus-card__more.is-disabled::after {
	content: none;
}

/* ── как воспользоваться ────────────────────────────────────────────── */

.bonus-steps {
	margin-top: calc(240 * var(--u));
}

.bonus-steps__box {
	padding: calc(74 * var(--u)) calc(82 * var(--u));
	border-radius: calc(32 * var(--u));
	background: var(--grey);
}

.bonus-steps__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(81 * var(--u));
	margin-top: calc(80 * var(--u));
}

/* линия от первого кружка к последнему — высоту ставит js/bonuses.js */
.bonus-steps__line {
	position: absolute;
	z-index: 0;
	width: max(1px, calc(2 * var(--u)));
	background: var(--yellow);
	transform: translateX(-50%);
}

.bonus-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: calc(31 * var(--u));
}

.bonus-step__num {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(160 * var(--u));
	height: calc(160 * var(--u));
	border-radius: 50%;
	background: rgba(251, 199, 7, .2);
	font-size: calc(32 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

.bonus-step__num::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(20 * var(--u));
	border-radius: 50%;
	background: var(--yellow);
}

/* последний шаг — контурный кружок без ореола (фон — под цвет плашки,
   чтобы линия не просвечивала) */
.bonus-step:last-child .bonus-step__num {
	width: calc(120 * var(--u));
	height: calc(120 * var(--u));
	margin: 0 calc(20 * var(--u));
	border: max(1px, calc(2 * var(--u))) solid var(--yellow);
	background: var(--grey);
	--halo: calc(20 * var(--u));   /* ореол при заливке — до размера остальных кружков */
}

.bonus-step:last-child .bonus-step__num::before {
	content: none;
}

/* Шаги заполняются при прокрутке, как на других страницах сайта: пока до
   шага не дошли — белый кружок с бледной рамкой, дошли — жёлтый с ореолом
   (как в макете); линия желтеет следом. Классы ставит js/bonuses.js: без
   него и при «уменьшении движения» шаги сразу заполненные. */
.bonus-steps__list.is-anim .bonus-steps__line {
	background: linear-gradient(var(--yellow), var(--yellow)) top / 100% var(--fill, 0px) no-repeat, #feefb5;
	transition: background-size .6s ease;
}

.bonus-steps__list.is-anim .bonus-step__num,
.bonus-steps__list.is-anim .bonus-step__num::before {
	transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease;
}

.bonus-steps__list.is-anim .bonus-step:not(.is-on) .bonus-step__num {
	background-color: transparent;
}

.bonus-steps__list.is-anim .bonus-step:not(.is-on) .bonus-step__num::before {
	background-color: #fff;
	box-shadow: inset 0 0 0 2px #feefb5;
}

.bonus-steps__list.is-anim .bonus-step:last-child:not(.is-on) .bonus-step__num {
	border-color: #feefb5;
	background-color: #fff;
}

/* последний шаг в макете — контурный; при прокрутке он, как и остальные,
   заливается жёлтым с ореолом того же размера */
.bonus-steps__list.is-anim .bonus-step:last-child.is-on .bonus-step__num {
	border-color: var(--yellow);
	background-color: var(--yellow);
	box-shadow: 0 0 0 var(--halo) rgba(251, 199, 7, .2);
}

.bonus-step__title {
	margin-bottom: calc(30 * var(--u));
	font-size: calc(48 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

.bonus-step__text {
	max-width: calc(900 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 1.4;
}

/* ── больше возможностей ────────────────────────────────────────────── */

.bonus-more {
	margin-top: calc(240 * var(--u));
}

.bonus-more__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(21 * var(--u));
	margin-top: calc(80 * var(--u));
}

.bonus-more__card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "title title" "text text" "icon go";
	min-height: calc(431 * var(--u));
	padding: calc(34 * var(--u)) calc(32 * var(--u));
	border-radius: calc(32 * var(--u));
	background: var(--yellow);
	color: #000;
	text-decoration: none;
}

.bonus-more__title {
	grid-area: title;
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.37;
}

.bonus-more__text {
	grid-area: text;
	margin-top: calc(20 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.37;
	color: #1a1a1a;
}

.bonus-more__icon {
	grid-area: icon;
	align-self: end;
	width: calc(69 * var(--u));
	height: calc(69 * var(--u));
	margin-top: calc(20 * var(--u));
}

.bonus-more__go {
	grid-area: go;
	align-self: end;
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	border-radius: 50%;
	background: #fff;
}

.bonus-more__go svg {
	width: calc(18 * var(--u));
	height: calc(18 * var(--u));
	transition: transform .5s;
}

a.bonus-more__card:hover .bonus-more__go svg {
	transform: rotate(-135deg);
}

/* ── приложение ─────────────────────────────────────────────────────── */

.bonus-app {
	position: relative;
	margin-top: calc(192 * var(--u));
}

.bonus-app__box {
	display: flex;
	align-items: center;
	min-height: calc(625 * var(--u));
	padding: calc(60 * var(--u));
	border-radius: calc(32 * var(--u));
	background: #141414;
	color: #fff;
}

.bonus-app__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
	width: calc(890 * var(--u));
}

.bonus-app__title {
	max-width: calc(745 * var(--u));
	font-size: calc(72 * var(--u));
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.bonus-app__text {
	max-width: calc(703 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 1.37;
}

.bonus-app__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(20 * var(--u)) calc(33 * var(--u));
}

.bonus-app__store {
	display: block;
	width: calc(252 * var(--u));
}

.bonus-app__store img {
	display: block;
	width: 100%;
	height: auto;
}

.bonus-app__phones {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.bonus-app__phone {
	position: absolute;
	height: auto;
}

.bonus-app__phone--back {
	left: calc(843 * var(--u));
	top: calc(-89 * var(--u));
	width: calc(357 * var(--u));
}

.bonus-app__phone--front {
	left: calc(939 * var(--u));
	top: calc(199 * var(--u));
	width: calc(404 * var(--u));
}

/* ── вопросы ────────────────────────────────────────────────────────── */

.bonus-faq {
	margin-top: calc(240 * var(--u));
}

.bonus-faq .bonus-h2 b,
.bonus-form .bonus-h2 b {
	font-weight: 600;
}

.bonus-faq__list {
	margin-top: calc(80 * var(--u));
}

.bonus-faq__item {
	border-top: 1px solid #eee;
	transition: background-color .3s ease;
}

.bonus-faq__item:last-child {
	border-bottom: 1px solid #eee;
}

.bonus-faq__item.is-open {
	border-radius: calc(32 * var(--u));   /* скругление — только у открытого, закрытые — строки с линиями */
	background: var(--grey);
	border-color: transparent;
}

.bonus-faq__item.is-open + .bonus-faq__item {
	border-top-color: transparent;
}

.bonus-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(40 * var(--u));
	width: 100%;
	padding: calc(30 * var(--u)) calc(45 * var(--u));
	border: 0;
	background: none;
	color: #000;
	font: inherit;
	font-size: calc(32 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-align: left;
	cursor: pointer;
}

.bonus-faq__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	border-radius: 50%;
	background: var(--yellow);
	transition: background-color .3s ease;
}

.bonus-faq__icon svg {
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	transition: transform .3s ease;
}

.bonus-faq__item.is-open .bonus-faq__icon {
	background: #fff;
}

/* как в FAQ на остальных страницах: поворот против часовой */
.bonus-faq__item.is-open .bonus-faq__icon svg {
	transform: rotate(-180deg);
}

.bonus-faq__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height .4s ease;
}

/* без JS открытый ответ виден; с JS высоту задаёт скрипт (для анимации) */
.bonus-faq__item.is-open .bonus-faq__a {
	max-height: none;
}

.bonus-faq__a-inner {
	padding: 0 calc(45 * var(--u)) calc(30 * var(--u));
	margin-top: calc(1 * var(--u));
	font-size: calc(20 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

.bonus-faq__a-inner p + p {
	margin-top: .6em;
}

/* ── форма ──────────────────────────────────────────────────────────── */

.bonus-form {
	width: calc(1800 * var(--u));
	margin: calc(240 * var(--u)) auto 0;
	scroll-margin-top: 120px;
}

.bonus-form__box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(834 * var(--u));
	padding: calc(60 * var(--u)) 0 calc(60 * var(--u)) calc(200 * var(--u));
	border-radius: calc(31 * var(--u));
	background: var(--grey);
	overflow: hidden;
}

.bonus-form__aside {
	position: absolute;
	left: calc(925 * var(--u));
	top: calc(88 * var(--u));
	width: calc(707 * var(--u));
}

.bonus-form__desc {
	max-width: calc(653 * var(--u));
	margin-top: calc(37 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 1.37;
}

.bonus-form__mascot {
	position: absolute;
	left: calc(136 * var(--u));
	top: calc(202 * var(--u));
	width: calc(557 * var(--u));
	height: auto;
	pointer-events: none;
}

.bonus-form__form {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--u));
	width: calc(680 * var(--u));
}

.bonus-form__fields {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(20 * var(--u)) calc(40 * var(--u));
	width: 100%;
}

.bonus-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(11 * var(--u));
	min-width: 0;
}

.bonus-field--wide {
	grid-column: 1 / -1;
}

.bonus-field__label {
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.37;
}

.bonus-field--wide .bonus-field__label {
	margin-bottom: calc(11 * var(--u));
}

.bonus-field__input {
	width: 100%;
	height: calc(76 * var(--u));
	padding: 0 calc(30 * var(--u));
	border: 0;
	border-radius: calc(31 * var(--u));
	background: #fff;
	color: #000;
	font: inherit;
	font-size: calc(20 * var(--u));
	font-weight: 500;
	outline: none;
	transition: box-shadow .2s ease;
}

.bonus-field__input::placeholder {
	color: #9a9a9a;
}

.bonus-field__input:focus-visible {
	box-shadow: inset 0 0 0 2px var(--yellow);
}

/* У темы глобально :focus{background:0 0!important; box-shadow:none!important}
   и input:focus{background-color:#f5f5f5!important} (css/main-style.php) —
   без этого блока поле, радиокнопка, галочка и фильтр в фокусе теряли фон
   и рамку. */
.bonus-page .bonus-field__input:focus {
	background-color: #fff !important;
	box-shadow: inset 0 0 0 2px var(--yellow) !important;
}

.bonus-page .bonus-field__input:not(:placeholder-shown):not(.bonus-select__btn):focus {
	box-shadow: inset 0 0 0 1px #000 !important;
}

.bonus-page .bonus-field.has-error .bonus-field__input:not(.bonus-select__btn):focus {
	box-shadow: inset 0 0 0 1px #f00 !important;
}

.bonus-page .bonus-radio input:focus,
.bonus-page .bonus-check input:focus {
	background-color: #fff !important;
}

.bonus-page .bonus-radio input:checked:focus {
	background-color: #000 !important;
	box-shadow: inset 0 0 0 var(--ring) #fff !important;
}

.bonus-page .bonus-check input:checked:focus {
	background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat !important;
}

.bonus-page .bonus-filter:focus {
	background-color: #fff !important;
}

.bonus-page .bonus-filter.is-active:focus {
	background-color: #000 !important;
}

@media (hover: hover) {
	.bonus-page .bonus-filter:hover:focus {
		background-color: #000 !important;
	}
}

.bonus-page a.bonus-more__card:focus {
	background-color: var(--yellow) !important;
}

.bonus-page .bonus-select__list li:focus {
	background-color: rgba(251, 199, 7, .2) !important;
}

/* заполненное поле — чёрная рамка, ошибка — красные подпись и рамка (макет 542:2123) */
.bonus-field__input:not(:placeholder-shown):not(.bonus-select__btn) {
	box-shadow: inset 0 0 0 1px #000;
	font-size: calc(28 * var(--u));
	font-weight: 700;
	padding-left: calc(21 * var(--u));
}

.bonus-field.has-error .bonus-field__label {
	color: #f00;
}

.bonus-field.has-error .bonus-field__input,
.bonus-field.has-error .bonus-field__input:not(:placeholder-shown) {
	box-shadow: inset 0 0 0 1px #f00;
}

/* подпись ошибки — от левого края поля, как подпись над ним */
.bonus-field__error {
	display: none;
	align-items: center;
	gap: calc(5 * var(--u));
	padding-left: 0;
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1.37;
	color: #f00;
}

.bonus-field__error::before {
	content: "";
	flex: none;
	width: calc(14.5 * var(--u));
	height: calc(14.5 * var(--u));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 15.6' fill='none' stroke='%23f00' stroke-width='1.09' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.8' cy='7.8' r='7.25'/%3E%3Cpath d='M7.8 10.7V7.8M7.8 5.1h.09'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bonus-field.has-error .bonus-field__error {
	display: flex;
}

/* список «Предложение» */
.bonus-select__btn {
	position: relative;
	padding-right: calc(60 * var(--u));
	text-align: left;
	cursor: pointer;
}

.bonus-select__btn::after {
	content: "";
	position: absolute;
	right: calc(27 * var(--u));
	top: 50%;
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: translateY(-75%) rotate(45deg);
	transition: transform .2s ease;
}

.bonus-select.is-open .bonus-select__btn::after {
	transform: translateY(-25%) rotate(-135deg);
}

.bonus-select__value {
	display: block;
	font-size: calc(20 * var(--u));
	font-weight: 400;
	letter-spacing: -0.04em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* открытый список ложится на само поле (макет 542:2072) */
.bonus-select__list {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(calc(100% - 76 * var(--u)));
	max-height: calc(330 * var(--u));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(2 * var(--u)) calc(8 * var(--u));
	border-radius: calc(24 * var(--u));
	background: #fff;
	box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}

.bonus-select__list li {
	padding: calc(15 * var(--u)) calc(14 * var(--u));
	border-bottom: 1px solid rgba(0, 0, 0, .3);
	font-size: calc(20 * var(--u));
	line-height: 1.19;
	letter-spacing: -0.04em;
	cursor: pointer;
	outline: none;
	transition: background-color .15s ease;
}

.bonus-select__list li:last-child {
	border-bottom: 0;
}

.bonus-select__list li:hover,
.bonus-select__list li:focus {
	background: rgba(251, 199, 7, .2);
}

.bonus-select__list li[aria-selected="true"] {
	font-weight: 600;
}

/* формат работы: плитки с радиокнопкой */
.bonus-radios {
	display: flex;
	gap: calc(40 * var(--u));
}

.bonus-radio {
	display: flex;
	flex: 1;
	align-items: center;
	gap: calc(20 * var(--u));
	height: calc(76 * var(--u));
	padding: 0 calc(30 * var(--u));
	border-radius: calc(31 * var(--u));
	background: #fff;
	font-size: calc(24 * var(--u));
	font-weight: 700;
	cursor: pointer;
}

.bonus-radio input,
.bonus-check input {
	flex: none;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.bonus-radio input {
	--ring: max(1px, calc(2 * var(--u)));
	width: calc(21.3 * var(--u));
	height: calc(21.3 * var(--u));
	border: max(1px, calc(2 * var(--u))) solid #767676;
	border-radius: 50%;
	background: #fff;
}

.bonus-radio input:checked {
	border-color: #000;
	background: #000;
	box-shadow: inset 0 0 0 var(--ring) #fff;
}

.bonus-radio input:focus-visible,
.bonus-check input:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 2px;
}

.bonus-check {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 700;
	color: #363636;
	cursor: pointer;
}

.bonus-check input {
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	border: 1px solid #000;
	border-radius: calc(6 * var(--u));
	background: #fff center / 70% no-repeat;
}

.bonus-check input:checked {
	background-color: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bonus-form__privacy {
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.37;
	color: #6a6a6a;
}

.bonus-form__privacy a {
	color: #000;
	text-decoration: underline;
	text-underline-position: from-font;
}

.bonus-form__error {
	font-size: calc(16 * var(--u));
	color: #e53935;
}

/* отправка: кнопка не бледнеет, вместо стрелки в круге — крутящееся кольцо */
.bonus-form__form.is-sending .bonus-btn {
	cursor: progress;
}

.bonus-btn__circle::after {
	content: "";
	position: absolute;
	inset: 25%;
	border: 2px solid rgba(0, 0, 0, .15);
	border-top-color: #000;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .2s ease;
}

.bonus-btn__circle svg {
	transition: transform .3s ease, opacity .2s ease;
}

.bonus-form__form.is-sending .bonus-form__submit .bonus-btn__circle svg {
	opacity: 0;
	transform: scale(.5);
}

.bonus-form__form.is-sending .bonus-form__submit .bonus-btn__circle::after {
	opacity: 1;
	animation: bonus-spin .8s linear infinite;
}

@keyframes bonus-spin {
	to {
		transform: rotate(360deg);
	}
}

/* «Спасибо! Заявка отправлена» — белая карточка поверх полей (макет 542:2023);
   галочка, кнопка и политика под ней остаются. Поля плавно гаснут, карточка
   плавно появляется, галочка — чуть позже. */
.bonus-form__fields > :not(.bonus-form__ok) {
	transition: opacity .3s ease, visibility .3s;
}

.bonus-form__form.is-done .bonus-form__fields > :not(.bonus-form__ok) {
	visibility: hidden;
	opacity: 0;
}

.bonus-form__ok:not([hidden]) {
	animation: bonus-ok-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

.bonus-form__ok:not([hidden]) .bonus-form__ok-icon {
	animation: bonus-ok-icon .5s .15s cubic-bezier(.3, 1.4, .5, 1) both;
}

@keyframes bonus-ok-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.97);
	}
}

@keyframes bonus-ok-icon {
	from {
		opacity: 0;
		transform: scale(.5);
	}
}

.bonus-form__ok {
	position: absolute;
	z-index: 6;
	inset: 0 auto 0 calc(-9 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(30 * var(--u));
	width: calc(100% + 9 * var(--u));
	padding: calc(20 * var(--u));
	border-radius: calc(24 * var(--u));
	background: #fff;
	box-shadow: 0 0 25px rgba(0, 0, 0, .15);
	text-align: center;
}

.bonus-form__ok-icon svg {
	display: block;
	width: calc(92 * var(--u));
	height: calc(92 * var(--u));
}

.bonus-form__ok p {
	max-width: calc(355 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.37;
}

.bonus-form__ok-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(280 * var(--u));
	height: calc(60 * var(--u));
	border: 1px solid var(--yellow);
	border-radius: 1000px;
	color: #000;
	font-size: calc(16 * var(--u));
	font-weight: 600;
	letter-spacing: -0.04em;
	text-decoration: none;
	transition: background-color .2s ease;
}

.bonus-form__ok-btn:hover {
	background: var(--yellow);
}

/* ══ страница предложения (single-bonus_offer.php) ═════════════════ */

/* общий контейнер 1400 и шаг 240 между секциями — как на главной */
.bonus-facts,
.bonus-terms,
.bonus-others {
	width: calc(1400 * var(--u));
	margin: calc(240 * var(--u)) auto 0;
}

/* ── первый экран: фон и картинка — по «Фону первого экрана» ─────────── */

.bonus-ohero__box {
	position: relative;
	width: calc(1800 * var(--u));
	height: calc(860 * var(--u));
	margin: 0 auto;
	border-radius: calc(32 * var(--u));
	overflow: hidden;
	isolation: isolate;
}

.bonus-ohero--grid .bonus-ohero__box {
	/* клетка 150.3 из линий #595959 @35% толщиной 0.5 — на экране 1px светлее */
	background:
		linear-gradient(to right, rgba(89, 89, 89, .2) 1px, transparent 1px) calc(71.1 * var(--u)) calc(124.2 * var(--u)) / calc(150.3 * var(--u)) calc(150.3 * var(--u)),
		linear-gradient(to bottom, rgba(89, 89, 89, .2) 1px, transparent 1px) calc(71.1 * var(--u)) calc(124.2 * var(--u)) / calc(150.3 * var(--u)) calc(150.3 * var(--u)),
		linear-gradient(115.54deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 25%),
		#eee;
}

.bonus-ohero--dark .bonus-ohero__box {
	background: linear-gradient(115.81deg, #000 0%, #666 99.007%);
	color: #fff;
}

.bonus-ohero--yellow .bonus-ohero__box {
	background: linear-gradient(-63.93deg, #fbc707 0%, #f9a607 98.109%);
}

.bonus-ohero--green .bonus-ohero__box {
	background: linear-gradient(-63.93deg, #4bca18 0%, #299000 98.109%);
	color: #fff;
}

.bonus-ohero #BreadcrumbList {
	position: absolute;
	z-index: 3;
	left: calc(200 * var(--u));
	top: calc(80 * var(--u));
}

.bonus-ohero--dark #BreadcrumbList a,
.bonus-ohero--dark #BreadcrumbList span,
.bonus-ohero--green #BreadcrumbList a,
.bonus-ohero--green #BreadcrumbList span {
	color: rgba(255, 255, 255, .5);
}

.bonus-ohero--dark #BreadcrumbList li:last-child span,
.bonus-ohero--green #BreadcrumbList li:last-child span {
	color: #fff;
}

.bonus-ohero--dark #BreadcrumbList svg path,
.bonus-ohero--green #BreadcrumbList svg path {
	stroke: #fff;
}

/* текст — по центру высоты со сдвигом +30, как в макете */
.bonus-ohero__content {
	position: absolute;
	z-index: 2;
	left: calc(200 * var(--u));
	top: calc(50% + 30 * var(--u));
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(80 * var(--u));
	width: calc(835 * var(--u));
}

.bonus-ohero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(40 * var(--u));
}

.bonus-ohero__title {
	font-size: calc(72 * var(--u));
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}

.bonus-ohero__desc {
	max-width: calc(821 * var(--u));
}

/* у «Пригласи друга» строка «…бонус до 300 zł.» шире 821 */
.bonus-ohero--grid .bonus-ohero__desc {
	max-width: none;
}

.bonus-ohero__desc {
	font-size: calc(24 * var(--u));
	font-weight: 500;
	line-height: 1.4;
}

.bonus-ohero__tags li {
	color: #000;
}

.bonus-ohero--yellow .bonus-ohero__tags li,
.bonus-ohero--green .bonus-ohero__tags li {
	border-color: #fff;
}

/* статус завершённого или приостановленного предложения — над заголовком */
.bonus-ohero__status {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	margin-bottom: calc(-16 * var(--u));
	padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)) calc(14 * var(--u));
	border: 1px solid #dcdcdc;
	border-radius: calc(115 * var(--u));
	background: #fff;
	color: #000;
	font-size: calc(18 * var(--u));
	font-weight: 600;
	line-height: 1.3;
}

.bonus-ohero--dark .bonus-ohero__status,
.bonus-ohero--yellow .bonus-ohero__status,
.bonus-ohero--green .bonus-ohero__status {
	border-color: #fff;
}

.bonus-ohero__status::before {
	content: '';
	flex: none;
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	border-radius: 50%;
	background: #f00;
}

/* подпись кнопки в две строки: «Узнать условия / приглашения» */
.bonus-ohero__btn .bonus-btn__text {
	line-height: 1;
}

.bonus-btn--dark {
	color: #fff;
}

.bonus-btn--dark::before {
	border-image-source: url("../assets/images/img/bonuses/btn-shape-black.svg");
}

/* картинка — справа, по месту из макета; текст остаётся поверх неё */
.bonus-ohero__img {
	position: absolute;
	z-index: 1;
	max-width: none;
	height: auto;
	pointer-events: none;
}

.bonus-ohero--grid .bonus-ohero__img {
	left: calc(914 * var(--u));
	top: calc(176 * var(--u));
	width: calc(1026 * var(--u));
}

.bonus-ohero--dark .bonus-ohero__img {
	left: calc(509.8 * var(--u));
	top: calc(42 * var(--u));
	width: calc(1290.2 * var(--u));
}

.bonus-ohero--yellow .bonus-ohero__img {
	left: calc(1035 * var(--u));
	top: calc(66 * var(--u));
	width: calc(719 * var(--u));
}

.bonus-ohero--green .bonus-ohero__img {
	left: calc(645 * var(--u));
	top: calc(102 * var(--u));
	width: calc(1497 * var(--u));
}

/* ── коротко: таблица 3 колонки, первая ячейка жёлтая ──────────────── */

/* отступы ячеек — переменными: на каждой ширине меняются только значения,
   а правила «первая колонка / первая и последняя строка» — по числу колонок */
.bonus-facts__grid {
	--line: #9c9c9c;
	--pad-t: calc(22 * var(--u));
	--pad-t1: calc(29 * var(--u));
	--pad-b: calc(22 * var(--u));
	--pad-b1: calc(29 * var(--u));
	--pad-bl: calc(31 * var(--u));
	--pad-l: calc(33 * var(--u));
	--pad-l1: calc(31 * var(--u));
	--pad-r: calc(31 * var(--u));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: calc(31 * var(--u));
	background: #fff;
	overflow: hidden;
}

/* линии между ячейками — тенью в промежутки, наружная граница — у таблицы */
.bonus-facts__cell {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--u));
	padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
	background: #fff;
	box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
}

@media (min-width: 1279px) {
	.bonus-facts__cell:nth-child(3n + 1) {
		padding-left: var(--pad-l1);
	}

	.bonus-facts__cell:nth-child(-n + 3) {
		padding-top: var(--pad-t1);
		padding-bottom: var(--pad-b1);
	}

	.bonus-facts__cell:nth-child(3n + 1):nth-last-child(-n + 3),
	.bonus-facts__cell:nth-child(3n + 1):nth-last-child(-n + 3) ~ .bonus-facts__cell {
		padding-bottom: var(--pad-bl);
	}
}

.bonus-facts__cell:first-child {
	background: var(--yellow);
}

.bonus-facts__cell dt {
	font-size: calc(16 * var(--u));
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.04em;
	color: #696969;
}

.bonus-facts__cell dd {
	margin: 0;
	font-size: calc(25.85 * var(--u));
	font-weight: 700;
	line-height: 1.37;
}

/* «Мелкий шрифт жёлтой ячейки» — длинное значение в две строки (оклейка) */
.bonus-facts__grid.is-small .bonus-facts__cell:first-child dd {
	font-size: calc(22 * var(--u));
}

/* ── полные условия: подпись слева, текст справа ───────────────────── */

.bonus-terms__list {
	margin: calc(80 * var(--u)) 0 0;
}

.bonus-terms__row {
	display: grid;
	grid-template-columns: calc(542 * var(--u)) minmax(0, calc(801 * var(--u)));
	column-gap: calc(60 * var(--u));
	align-items: center;
	padding: calc(38 * var(--u)) 0;
	border-top: 1px solid #9c9c9c;
	font-size: calc(25.85 * var(--u));
	line-height: 1.37;
}

.bonus-terms__row:last-child {
	border-bottom: 1px solid #9c9c9c;
}

.bonus-terms__row dt {
	font-weight: 700;
}

.bonus-terms__row dd {
	margin: 0;
	font-weight: 400;
}

/* ── другие предложения ────────────────────────────────────────────── */

.bonus-others__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(40 * var(--u));
}

.bonus-others__all {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--yellow);
	color: #000;
	font-size: calc(26 * var(--u));
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.04em;
	text-decoration: none;
	white-space: nowrap;
}

.bonus-others__all svg {
	width: calc(14.7 * var(--u));
	height: auto;
	transition: transform .2s ease;
}

.bonus-others__all:hover svg {
	transform: translateX(4px);
}

/* ══ 1279–1660: макет 1440 ═══════════════════════════════════════════ */

@media (max-width: 1660px) {
	.bonus-offers,
	.bonus-steps,
	.bonus-more,
	.bonus-faq,
	.bonus-app {
		width: min(1250px, calc(100% - 80px));
	}

	.bonus-page {
		padding-bottom: 160px;
	}

	.bonus-h2 {
		font-size: 56px;
	}

	.bonus-btn {
		width: 320px;
		height: 80px;
		padding: 0 16px 0 80px;
	}

	.bonus-btn::before {
		border-image-width: 0 40px 0 120px;
	}

	.bonus-btn__circle {
		left: 10px;
		top: 10px;
		width: 60px;
		height: 60px;
	}

	.bonus-btn__circle svg {
		width: 24px;
		height: 24px;
	}

	.bonus-btn__text {
		font-size: 20px;
	}

	/* первый экран */
	.bonus-hero__box {
		width: calc(100% - 71px);
		height: 654px;
		border-radius: 24px;
	}

	/* до 1440 коллаж прижат к правому краю — текст сужается, чтобы не уйти под него */
	.bonus-hero__content {
		left: 58px;
		top: 67px;
		width: min(668px, calc(100% - 660px));
		gap: 41px;
	}

	.bonus-page #BreadcrumbList {
		gap: 20px;
		margin-bottom: 15px;
	}

	.bonus-page #BreadcrumbList li {
		gap: 20px;
	}

	.bonus-page #BreadcrumbList a,
	.bonus-page #BreadcrumbList span {
		font-size: 16px;
	}

	.bonus-page #BreadcrumbList svg {
		width: 16px;
		height: 16px;
	}

	.bonus-hero__title {
		max-width: 668px;
		font-size: 64px;
	}

	.bonus-hero__desc {
		max-width: 589px;
		font-size: 18px;
	}

	.bonus-hero__tile {
		border-radius: 24px;
	}

	.bonus-hero__tile--courier,
	.bonus-hero__tile--driver {
		top: 61px;
		width: 255px;
		height: 259px;
	}

	.bonus-hero__tile--courier {
		left: auto;
		right: 323px;
	}

	.bonus-hero__tile--driver {
		left: auto;
		right: 60px;
	}

	.bonus-hero__tile--products {
		left: auto;
		right: 60px;
		top: 328px;
		width: 518px;
		height: 266px;
	}

	/* предложения */
	.bonus-offers {
		margin-top: 160px;
	}

	.bonus-offers__head {
		gap: 70px;
	}

	.bonus-filters {
		gap: 21px;
	}

	.bonus-filter {
		padding: 8.7px 26px;
		border-width: 1.25px;
		border-radius: 41px;
		font-size: 20px;
	}

	.bonus-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px 23.5px;
		margin-top: 60px;
	}

	.bonus-card {
		min-height: 676px;
		border-radius: 28.6px;
	}

	.bonus-card__img {
		height: 202px;
	}

	.bonus-card__body {
		gap: 15px;
		padding: 21px 25px 24px 26px;
	}

	.bonus-tags {
		gap: 9.8px;
	}

	.bonus-tags li {
		padding: 1.8px 9.8px 2.7px;
		border-radius: 103px;
		font-size: 16px;
	}

	.bonus-card__title {
		max-width: none;
		font-size: 20px;
	}

	.bonus-card__text {
		font-size: 16px;
	}

	.bonus-card__bottom {
		gap: 14.3px;
		padding-top: 5px;
	}

	.bonus-hl {
		gap: 9.8px;
		min-height: 100px;
		margin-bottom: 5.4px;
		padding: 10px 20px 10px 18px;
		border-radius: 16px;
	}

	.bonus-hl b {
		font-size: 25px;
	}

	.bonus-hl--small b {
		font-size: 20px;
	}

	.bonus-hl span {
		font-size: 14px;
	}

	.bonus-meta {
		gap: 3.5px;
		padding-top: 14.7px;
	}

	.bonus-meta li {
		gap: 10px;
		font-size: 16px;
	}

	.bonus-meta img {
		width: 13px;
		height: 14.4px;
	}

	.bonus-card__more {
		gap: 15px;
		font-size: 16px;
	}

	.bonus-card__more svg {
		width: 10.1px;
		height: 8.7px;
	}

	/* как воспользоваться */
	.bonus-steps {
		margin-top: 160px;
	}

	.bonus-steps__box {
		padding: 78px 55px;
		border-radius: 28.6px;
	}

	.bonus-steps .bonus-h2 {
		letter-spacing: -0.02em;
	}

	.bonus-steps__list {
		gap: 72.3px;
		margin-top: 71.4px;
	}

	.bonus-steps__line {
		width: 1.8px;
	}

	.bonus-step {
		gap: 27.7px;
	}

	.bonus-step__num {
		width: 142.9px;
		height: 142.9px;
		font-size: 28.6px;
	}

	.bonus-step__num::before {
		inset: 17.9px;
	}

	.bonus-step:last-child .bonus-step__num {
		width: 107.1px;
		height: 107.1px;
		margin: 0 17.9px;
		--halo: 17.9px;
		border-width: 1.8px;
	}

	.bonus-step__title {
		margin-bottom: 26.8px;
		font-size: 43px;
	}

	.bonus-step__text {
		max-width: 760px;
		font-size: 24px;
	}

	/* больше возможностей */
	.bonus-more {
		margin-top: 160px;
	}

	.bonus-more__grid {
		gap: 18.7px;
		margin-top: 60px;
	}

	.bonus-more__card {
		min-height: 411px;
		padding: 30px 29.6px 29.3px 28.2px;
		border-radius: 28.6px;
	}

	.bonus-more__title {
		font-size: 20px;
		line-height: 1.2;
	}

	.bonus-more__text {
		margin-top: 17.8px;
		font-size: 16px;
	}

	.bonus-more__icon {
		width: 61.5px;
		height: 61.5px;
		margin-top: 17.8px;
	}

	.bonus-more__go {
		width: 46px;
		height: 46px;
	}

	.bonus-more__go svg {
		width: 16px;
		height: 16px;
	}

	/* приложение: бейджи над кнопкой */
	.bonus-app {
		margin-top: 187px;
	}

	.bonus-app__box {
		min-height: 557px;
		padding: 56px 53.5px;
		border-radius: 28.5px;
	}

	.bonus-app__content {
		gap: 26px;
		width: 783px;
	}

	.bonus-app__title {
		max-width: 664px;
		font-size: 56px;
	}

	.bonus-app__text {
		max-width: 627px;
		margin-top: 18.6px;
		font-size: 18px;
	}

	.bonus-app__actions {
		width: 537px;
		gap: 20px 33px;
	}

	.bonus-app__btn {
		order: 2;
	}

	.bonus-app__store {
		order: 1;
		width: 252px;
	}

	.bonus-app__phone--back {
		left: 701.5px;
		top: -79.3px;
		width: 318px;
	}

	.bonus-app__phone--front {
		left: 787px;
		top: 177.4px;
		width: 360px;
	}

	/* вопросы */
	.bonus-faq {
		margin-top: 161px;
	}

	.bonus-faq__list {
		margin-top: 60px;
	}

	.bonus-faq__item.is-open {
		border-radius: 28.6px;
	}

	.bonus-faq__q {
		gap: 30px;
		padding: 26.8px 26.8px 26.8px 53.7px;
		font-size: 24px;
	}

	.bonus-faq__icon {
		width: 53.7px;
		height: 53.7px;
	}

	.bonus-faq__icon svg {
		width: 21.5px;
		height: 21.5px;
	}

	.bonus-faq__a-inner {
		padding: 1px 26px 45.6px 53.7px;
		margin-top: 0;
		font-size: 16px;
	}

	/* форма: ширина контейнера */
	.bonus-form {
		width: min(1250px, calc(100% - 80px));
		margin-top: 160px;
	}

	.bonus-form__box {
		min-height: 578px;
		padding: 50px 0 50px 58.7px;
		border-radius: 21.5px;
	}

	.bonus-form__aside {
		left: 661px;
		top: 46px;
		width: 536px;
	}

	.bonus-form__desc {
		max-width: 453px;
		margin-top: 30px;
		font-size: 16px;
	}

	.bonus-form__mascot {
		left: 95px;
		top: 220px;
		width: 317px;
	}

	.bonus-form__form {
		gap: 27.7px;
		width: 471.5px;
	}

	.bonus-form__fields {
		gap: 13.9px 27.7px;
	}

	.bonus-field {
		gap: 7.6px;
	}

	.bonus-field__label {
		font-size: 16px;
	}

	.bonus-field--wide .bonus-field__label {
		margin-bottom: 7.6px;
	}

	.bonus-field__input {
		height: 52.7px;
		padding: 0 21.5px;
		border-radius: 21.5px;
		font-size: 16px;
	}

	.bonus-field__input:not(:placeholder-shown):not(.bonus-select__btn) {
		padding-left: 12px;
		font-size: 24px;
	}

	.bonus-field__error {
		gap: 5px;
		font-size: 14px;
	}

	.bonus-field__error::before {
		width: 11px;
		height: 11px;
	}

	.bonus-select__btn {
		padding-right: 44px;
	}

	.bonus-select__btn::after {
		right: 20px;
		width: 7px;
		height: 7px;
		border-width: 0 1.66px 1.66px 0;
	}

	.bonus-select__value {
		font-size: 14px;
	}

	.bonus-select__list {
		transform: translateY(calc(100% - 52.7px));
		max-height: 230px;
		padding: 1.4px 5.5px;
		border-radius: 16px;
		box-shadow: 0 0 17.3px rgba(0, 0, 0, .15);
	}

	.bonus-select__list li {
		padding: 10.4px 9.7px;
		font-size: 14px;
	}

	.bonus-radios {
		gap: 27.7px;
	}

	.bonus-radio {
		gap: 13px;
		height: 52.7px;
		padding: 0 21.5px;
		border-radius: 21.5px;
		font-size: 16px;
	}

	.bonus-radio input {
		width: 14.8px;
		height: 14.8px;
		border-width: 1.4px;
	}

	.bonus-radio input {
		--ring: 1.4px;
	}

	.bonus-check {
		gap: 6.9px;
		font-size: 16px;
	}

	.bonus-check input {
		width: 16px;
		height: 16px;
		border-width: 1.5px;
		border-radius: 4.2px;
	}

	.bonus-form__privacy,
	.bonus-form__error {
		font-size: 14px;
	}

	/* в макете — одна строка, шире колонки полей */
	.bonus-form__privacy {
		width: max-content;
		max-width: 600px;
	}

	.bonus-form__ok {
		left: -4px;
		width: calc(100% + 4px);
		gap: 15px;
		padding: 14px;
		border-radius: 24px;
	}

	.bonus-form__ok-icon svg {
		width: 56px;
		height: 56px;
	}

	.bonus-form__ok p {
		max-width: 355px;
		font-size: 16px;
	}

	.bonus-form__ok-btn {
		width: 280px;
		height: 60px;
		font-size: 16px;
	}

	/* ── страница предложения ── */
	.bonus-facts,
	.bonus-terms,
	.bonus-others {
		width: min(1250px, calc(100% - 80px));
		margin-top: 160px;
	}

	.bonus-ohero__box {
		width: calc(100% - 71px);
		height: 654px;
		border-radius: 24.3px;
	}

	.bonus-ohero--grid .bonus-ohero__box {
		background:
			linear-gradient(to right, rgba(89, 89, 89, .2) 1px, transparent 1px) 77.3px 55.5px / 110.2px 110.2px,
			linear-gradient(to bottom, rgba(89, 89, 89, .2) 1px, transparent 1px) 77.3px 55.5px / 110.2px 110.2px,
			linear-gradient(115.54deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 25%),
			#eee;
	}

	.bonus-ohero--dark .bonus-ohero__box {
		background: linear-gradient(115.54deg, #030303 0%, #666 100%);
	}

	.bonus-ohero--yellow .bonus-ohero__box {
		background: linear-gradient(115.54deg, #f9a607 0%, #fbc607 100%);
	}

	.bonus-ohero--green .bonus-ohero__box {
		background: linear-gradient(115.54deg, #299001 0%, #4bca19 100%);
	}

	.bonus-ohero #BreadcrumbList {
		left: 58px;
		top: 67px;
	}

	.bonus-ohero__content {
		left: 58px;
		top: calc(50% + 30px);
		width: min(732px, calc(100% - 637px));
		gap: 41px;
	}

	.bonus-ohero__head {
		gap: 41px;
	}

	.bonus-ohero__status {
		gap: 9px;
		margin-bottom: -15px;
		padding: 5px 14px 6px 12px;
		border-radius: 103px;
		font-size: 16px;
	}

	.bonus-ohero__status::before {
		width: 9px;
		height: 9px;
	}

	.bonus-ohero__title {
		font-size: 64px;
	}

	.bonus-ohero__desc {
		max-width: 732px;
		font-size: 18px;
		line-height: 1.37;
	}

	/* в макете описания тёмного и зелёного уже — иначе текст заходит на картинку */
	.bonus-ohero--dark .bonus-ohero__desc {
		max-width: 613px;
	}

	.bonus-ohero--green .bonus-ohero__desc {
		max-width: 587px;
	}

	/* картинки привязаны к правому краю: между 1279 и 1660 бокс меняет ширину;
	   две классы — чтобы перебить left из правил тем выше */
	.bonus-ohero .bonus-ohero__img {
		left: auto;
	}

	.bonus-ohero--grid .bonus-ohero__img {
		right: -109px;
		top: 132px;
		width: 783px;
	}

	.bonus-ohero--dark .bonus-ohero__img {
		right: 0;
		top: -5px;
		width: 1061.5px;
	}

	.bonus-ohero--yellow .bonus-ohero__img {
		right: 40.7px;
		top: 20px;
		width: 569.3px;
	}

	.bonus-ohero--green .bonus-ohero__img {
		right: -293.5px;
		top: 34.7px;
		width: 1263.6px;
	}

	.bonus-facts__grid {
		--pad-t: 18px;
		--pad-t1: 24px;
		--pad-b: 20px;
		--pad-b1: 20px;
		--pad-bl: 23px;
		--pad-l: 30px;
		--pad-l1: 28.6px;
		--pad-r: 30px;
		border-radius: 28px;
	}

	.bonus-facts__cell {
		gap: 7px;
	}

	.bonus-facts__cell dt {
		font-size: 16px;
	}

	.bonus-facts__cell dd,
	.bonus-facts__grid.is-small .bonus-facts__cell:first-child dd {
		font-size: 24px;
	}

	.bonus-terms__list {
		margin-top: 60px;
	}

	.bonus-terms__row {
		grid-template-columns: 488px minmax(0, 712px);
		column-gap: 47px;
		padding: 33.8px 0;
		font-size: 24px;
	}

	.bonus-others .bonus-grid {
		margin-top: 60px;
	}

	.bonus-others__all {
		gap: 10px;
		padding-bottom: 10px;
		font-size: 26px;
	}

	.bonus-others__all svg {
		width: 14.7px;
	}
}

/* ══ 1279–1439: первый экран уже, чем в макете 1440 — шрифт мельче ═════ */

@media (min-width: 1279px) and (max-width: 1439px) {
	.bonus-hero__title,
	.bonus-ohero__title {
		font-size: 52px;
	}

	.bonus-hero__desc,
	.bonus-ohero__desc {
		font-size: 16px;
	}
}

/* ══ 766–1278: макет 768 ═════════════════════════════════════════════ */

@media (max-width: 1278px) {
	/* 670 — как в макете 768; уже (до 621, дальше мобильная раскладка) — с полями по 20 */
	.bonus-offers,
	.bonus-steps,
	.bonus-more,
	.bonus-faq {
		width: min(670px, calc(100% - 40px));
	}

	.bonus-h2 {
		font-size: 48px;
	}

	.bonus-steps .bonus-h2,
	.bonus-more .bonus-h2 {
		letter-spacing: -0.02em;
		text-align: center;
	}

	/* первый экран: одна колонка по центру, коллаж под кнопкой */
	.bonus-hero__box {
		width: calc(100% - 38px);
		max-width: 730px;
		height: auto;
		padding: 40px 30px 40px;
		border-radius: 48px;
	}

	.bonus-hero__content {
		position: static;
		width: 100%;
		align-items: center;
		gap: 40px;
		text-align: center;
	}

	.bonus-page #BreadcrumbList {
		justify-content: center;
		margin-bottom: 0;
	}

	.bonus-hero__title {
		max-width: 578px;
		font-size: 64px;
	}

	.bonus-hero__desc {
		max-width: 578px;
		font-size: 18px;
	}

	.bonus-hero__collage {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
		max-width: 670px;
		margin: 40px auto 0;
	}

	.bonus-hero__tile {
		position: relative;
		inset: auto;
		border-radius: 32px;
	}

	.bonus-hero__tile--courier,
	.bonus-hero__tile--driver {
		width: auto;
		height: 240px;
	}

	.bonus-hero__tile--courier img {
		object-position: center 15%;
	}

	.bonus-hero__tile--driver img {
		object-position: center 28%;
	}

	.bonus-hero__tile--products {
		grid-column: 1 / -1;
		width: auto;
		height: 240px;
	}

	.bonus-hero__tile--products img {
		left: 25.6%;
		height: 100%;
	}

	/* предложения: две колонки; заголовок слева, табы справа — на узком
	   планшете заголовок переносится на строки, а табы не уходят вниз */
	.bonus-offers__head {
		align-items: flex-end;
		gap: 40px;
	}

	.bonus-offers__head .bonus-h2 {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1;
	}

	.bonus-filters {
		flex: none;
		gap: 11.5px;
		padding: 6px 0;
	}

	.bonus-filter {
		padding: 4.7px 14.2px;
		border-width: .7px;
		border-radius: 22px;
		font-size: 14px;
	}

	.bonus-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.bonus-card {
		min-height: 611px;
		border-radius: 22.8px;
	}

	.bonus-card__img {
		height: 160px;
	}

	.bonus-card__body {
		gap: 12px;
		padding: 18.4px 20px 17.2px;
	}

	.bonus-tags {
		gap: 7.8px;
	}

	.bonus-tags li {
		padding: 1.4px 7.8px 2.1px;
		border-radius: 82px;
	}

	.bonus-card__bottom {
		gap: 11.4px;
		padding-top: 0;
	}

	.bonus-hl span {
		line-height: 1.4;
	}

	.bonus-hl {
		gap: 0;
		min-height: 79.8px;
		margin-bottom: 4.3px;
		padding: 8px 16px 8px 14.4px;
		border-radius: 12.8px;
	}

	.bonus-hl b,
	.bonus-hl--small b {
		font-size: 20px;
	}

	.bonus-meta {
		gap: 3.6px;
		padding-top: 11.4px;
	}

	.bonus-meta li {
		gap: 8px;
		font-size: 14px;
	}

	.bonus-meta img {
		width: 10.4px;
		height: 11.5px;
	}

	.bonus-card__more {
		gap: 12px;
		font-size: 14px;
	}

	.bonus-card__more svg {
		width: 8px;
		height: 7px;
	}

	/* как воспользоваться */
	.bonus-steps__box {
		padding: 64px 39px;
		border-radius: 48px;
	}

	.bonus-steps__list {
		gap: 38.8px;
		margin-top: 38.3px;
	}

	.bonus-steps__line {
		width: 1px;
	}

	.bonus-step {
		gap: 14.8px;
	}

	.bonus-step__num {
		width: 76.6px;
		height: 76.6px;
		font-size: 15.3px;
	}

	.bonus-step__num::before {
		inset: 9.6px;
	}

	.bonus-step:last-child .bonus-step__num {
		width: 57.4px;
		height: 57.4px;
		margin: 0 9.6px;
		--halo: 9.6px;
		border-width: 1px;
	}

	.bonus-step__title {
		margin-bottom: 14.4px;
		font-size: 24px;
	}

	.bonus-step__text {
		max-width: none;
		font-size: 16px;
	}

	/* больше возможностей: широкие карточки одна под другой */
	.bonus-more__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bonus-more__card {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: "icon title" "text text";
		column-gap: 20px;
		min-height: 0;
		padding: 30px 101px 30px 40px;
		border-radius: 47px;
	}

	.bonus-more__icon {
		align-self: center;
		width: 44px;
		height: 44px;
		margin-top: 0;
	}

	.bonus-more__title {
		align-self: center;
		font-size: 20px;
	}

	.bonus-more__text {
		margin-top: 18px;
	}

	.bonus-more__go {
		position: absolute;
		right: 25.9px;
		bottom: 25.9px;
		width: 46px;
		height: 46px;
	}

	/* приложение: во всю ширину экрана, один телефон справа */
	.bonus-app {
		width: 100%;
		margin-top: 160px;
		overflow: hidden;
		background: #141414;
	}

	.bonus-app__box {
		width: min(673px, calc(100% - 40px));
		max-width: calc(100% - 40px);
		min-height: 680px;
		margin: 0 auto;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.bonus-app__content {
		width: 100%;
		gap: 60px;
	}

	.bonus-app__title {
		font-size: 48px;
	}

	.bonus-app__text {
		max-width: 409px;
		margin-top: 0;
	}

	.bonus-app__actions {
		width: auto;
		gap: 60px 33px;
	}

	/* кнопка — отдельной строкой, бейджи — под ней */
	.bonus-app__btn {
		order: 0;
		margin-right: calc(100% - 320px);
	}

	.bonus-app__store {
		order: 1;
	}

	.bonus-app__phones {
		z-index: 0;
	}

	.bonus-app__phone--back {
		display: none;
	}

	.bonus-app__phone--front {
		left: calc(50% - 32px);
		top: 86px;
		width: 462px;
	}

	/* вопросы */
	.bonus-faq {
		margin-top: 160px;
	}

	.bonus-faq__item.is-open {
		border-radius: 15.3px;
	}

	.bonus-faq__q {
		gap: 20px;
		padding: 14.4px 14.4px 14.4px 28.7px;
		line-height: 1;
	}

	.bonus-faq__item.is-open .bonus-faq__q {
		padding-top: 19px;
		align-items: flex-start;
	}

	.bonus-faq__icon {
		width: 28.7px;
		height: 28.7px;
	}

	.bonus-faq__icon svg {
		width: 11.5px;
		height: 11.5px;
	}

	.bonus-faq__a-inner {
		padding: 0 14.4px 19.1px 28.7px;
		font-weight: 400;
	}

	/* форма: заголовок сверху, форма под ним, талисман в углу */
	.bonus-form {
		width: min(670px, calc(100% - 40px));
		max-width: calc(100% - 40px);
	}

	.bonus-form__box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		min-height: 0;
		padding: 40.6px 56px 40.5px 23px;
		border-radius: 48px;
	}

	.bonus-form__aside {
		position: static;
		width: 100%;
	}

	.bonus-form__desc {
		max-width: 453px;
	}

	/* как в макете: перенос до маскота, а не под ним */
	.bonus-form__privacy {
		width: auto;
		max-width: 340px;
	}

	.bonus-form__mascot {
		left: auto;
		top: auto;
		right: -4px;
		bottom: -7px;
	}

	/* ── страница предложения ── */
	.bonus-facts,
	.bonus-terms,
	.bonus-others {
		width: min(670px, calc(100% - 40px));
		max-width: calc(100% - 40px);
	}

	/* первый экран: текст сверху слева, картинка снизу; крошки по центру */
	.bonus-ohero__box {
		width: calc(100% - 38px);
		max-width: 730px;
		height: auto;
		min-height: 895px;
		padding: 131px 56px 243px 32px;
		border-radius: 48px;
	}

	.bonus-ohero--grid .bonus-ohero__box {
		background:
			linear-gradient(to right, rgba(89, 89, 89, .2) 1px, transparent 1px) 89.5px 79.5px / 110.2px 110.2px,
			linear-gradient(to bottom, rgba(89, 89, 89, .2) 1px, transparent 1px) 89.5px 79.5px / 110.2px 110.2px,
			linear-gradient(98.86deg, rgba(239, 239, 239, .9) 27.94%, rgba(252, 252, 252, .9) 96.95%),
			#eee;
	}

	.bonus-ohero--dark .bonus-ohero__box {
		padding-bottom: 332px;
		background: linear-gradient(98.86deg, rgba(6, 6, 6, .9) 27.94%, rgba(101, 101, 101, .9) 96.95%), #eee;
	}

	.bonus-ohero--yellow .bonus-ohero__box {
		padding-bottom: 331px;
		background: linear-gradient(98.86deg, rgba(249, 166, 7, .9) 27.94%, rgba(251, 197, 7, .9) 96.95%), #eee;
	}

	.bonus-ohero--green .bonus-ohero__box {
		padding-bottom: 307px;
		background: linear-gradient(98.86deg, rgba(42, 145, 2, .9) 27.94%, rgba(74, 201, 24, .9) 96.95%), #eee;
	}

	/* по центру: у абсолютного блока с left:50% ширина считалась бы от половины бокса */
	.bonus-ohero #BreadcrumbList {
		left: 50%;
		top: 40px;
		width: max-content;
		max-width: calc(100% - 40px);
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.bonus-ohero__content {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: auto;
		max-width: 642px;
		gap: 40px;
	}

	.bonus-ohero__head {
		gap: 40px;
	}

	.bonus-ohero__title {
		max-width: 609px;
	}

	/* метки карточки в одну строку, как в макете: длинная чуть выходит за поле текста */
	.bonus-card .bonus-tags {
		flex-wrap: nowrap;
		margin-right: -10px;
	}

	.bonus-ohero .bonus-ohero__desc {
		max-width: 642px;
	}

	.bonus-ohero--dark .bonus-ohero__tags li,
	.bonus-ohero--yellow .bonus-ohero__tags li,
	.bonus-ohero--green .bonus-ohero__tags li {
		border-color: transparent;
	}

	/* метки первого экрана — крупнее меток карточек */
	.bonus-ohero__tags {
		gap: 11px;
	}

	.bonus-ohero__tags li {
		padding: 2px 11px 3px;
		border-radius: 115px;
	}

	/* картинки — от нижнего края: если текст длиннее, бокс растёт, а картинка остаётся внизу */
	.bonus-ohero--grid .bonus-ohero__img {
		top: auto;
		right: auto;
		left: 271px;
		bottom: -20px;
		width: 741px;
	}

	.bonus-ohero--dark .bonus-ohero__img {
		top: auto;
		right: auto;
		left: -50px;
		bottom: -67px;
		width: 897px;
	}

	.bonus-ohero--yellow .bonus-ohero__img {
		top: auto;
		right: auto;
		left: 321px;
		bottom: -17px;
		width: 456px;
	}

	.bonus-ohero--green .bonus-ohero__img {
		top: auto;
		right: auto;
		left: 24px;
		bottom: -137px;
		width: 921px;
	}

	/* коротко: жёлтая строка во всю ширину, дальше две колонки */
	.bonus-facts__grid {
		--line: #000;
		--pad-t: 18px;
		--pad-r: 9px;
		--pad-b: 17px;
		--pad-l: 9px;
		--pad-bl: 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 32px;
	}

	.bonus-facts__cell {
		gap: 7.14px;
	}

	.bonus-facts__cell:first-child {
		grid-column: 1 / -1;
		padding: 24px 30px;
	}

	.bonus-facts__cell:nth-child(2n):nth-last-child(-n + 2),
	.bonus-facts__cell:nth-child(2n):nth-last-child(-n + 2) ~ .bonus-facts__cell {
		padding-bottom: var(--pad-bl);
	}

	.bonus-facts__cell:first-child dd {
		font-size: 40px;
	}

	.bonus-facts__grid.is-small .bonus-facts__cell:first-child dd {
		font-size: 33px;
	}

	/* шаги: высота как у главной, содержимое по центру */
	.bonus-offer .bonus-steps__box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 580px;
		padding: 50px 39px;
	}

	/* условия: подпись над текстом, заголовок по центру */
	.bonus-terms .bonus-h2 {
		text-align: center;
	}

	.bonus-terms__list {
		margin-top: 30px;
	}

	.bonus-terms__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		padding: 22px 0 28px;
	}

	.bonus-offer .bonus-faq__list {
		margin-top: 30px;
	}

	/* другие предложения: две карточки, ссылка справа внизу */
	.bonus-others__head {
		align-items: flex-end;
	}

	.bonus-others__head .bonus-h2 b {
		display: block;
	}

	.bonus-others .bonus-grid {
		margin-top: 30px;
	}

	.bonus-others .bonus-card:nth-child(n + 3) {
		display: none;
	}
}

/* ══ до 765: макет 360 ═══════════════════════════════════════════════ */

@media (max-width: 620px) {
	.bonus-offers,
	.bonus-steps,
	.bonus-more {
		width: calc(100% - 40px);
	}

	.bonus-page {
		padding-bottom: 60px;
	}

	.bonus-h2 {
		font-size: 28px;
		letter-spacing: -0.02em;
	}

	.bonus-steps .bonus-h2,
	.bonus-more .bonus-h2 {
		text-align: left;
	}

	/* кнопка 280×60: свой силуэт, у растянутого десктопного другие пропорции */
	.bonus-btn {
		width: 280px;
		height: 60px;
		padding: 0 8px 0 64px;
	}

	.bonus-btn::before {
		border-image-source: url("../assets/images/img/bonuses/btn-shape-360.svg");
		border-image-slice: 0 30 0 90 fill;
		border-image-width: 0 30px 0 90px;
	}

	.bonus-btn--dark::before {
		border-image-source: url("../assets/images/img/bonuses/btn-shape-360-black.svg");
	}

	.bonus-btn__circle {
		left: 7.5px;
		top: 7.5px;
		width: 45px;
		height: 45px;
	}

	.bonus-btn__circle svg {
		width: 20px;
		height: 20px;
	}

	.bonus-btn__text {
		font-size: 16px;
	}

	/* первый экран: крошки слева, остальное по центру */
	.bonus-hero__box {
		width: calc(100% - 20px);
		max-width: none;
		padding: 20px 10px 13px;
		border-radius: 32px 32px 22px 22px;
		background: linear-gradient(161.43deg, rgba(240, 240, 240, .9) 42.594%, rgba(250, 250, 250, .9) 78.464%), #eee;
	}

	.bonus-hero__content {
		gap: 30px;
	}

	.bonus-page #BreadcrumbList,
	.bonus-page #BreadcrumbList li {
		gap: 15px;
	}

	.bonus-page #BreadcrumbList a,
	.bonus-page #BreadcrumbList span {
		font-size: 14px;
	}

	.bonus-hero #BreadcrumbList {
		align-self: flex-start;
		justify-content: flex-start;
		margin-left: 20px;
	}

	/* внутренние блоки — во всю ширину плашки (на 360 это 320, на телефонах
	   шире — больше); кнопка — с полями по 20, как в макете */
	.bonus-hero__title {
		max-width: none;
		font-size: 32px;
	}

	.bonus-hero__desc {
		max-width: none;
		font-size: 14px;
	}

	.bonus-hero__btn {
		width: calc(100% - 40px);
	}

	.bonus-hero__collage {
		gap: 4.78px;
		max-width: none;
		margin-top: 30px;
	}

	.bonus-hero__tile {
		border-radius: 15.28px;
	}

	.bonus-hero__tile--courier,
	.bonus-hero__tile--driver,
	.bonus-hero__tile--products {
		height: 114.6px;
	}

	.bonus-hero__tile--courier img {
		object-position: center 18%;
	}

	/* предложения: метки под заголовком, карточки в одну колонку */
	.bonus-offers {
		margin-top: 70px;
	}

	.bonus-offers__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.bonus-offers__head .bonus-h2 b {
		display: block;
	}

	.bonus-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		margin-top: 30px;
	}

	.bonus-card {
		min-height: 610px;
	}

	.bonus-card__img {
		height: 193px;
	}

	.bonus-card__title {
		font-size: 24px;
	}


	.bonus-card__text {
		font-size: 14px;
		line-height: 1.4;
	}

	/* сумма на карточке «Пригласи друга» — крупнее остальных */
	.bonus-hl b:not(:only-child) {
		font-size: 24px;
	}

	/* как воспользоваться */
	.bonus-steps {
		margin-top: 63px;
	}

	.bonus-steps__box {
		padding: 34px 19px 33px;
		border-radius: 22px;
	}

	.bonus-steps__list {
		gap: 30px;
		margin-top: 30px;
	}

	.bonus-step {
		gap: 7px;
	}

	.bonus-step__num {
		width: 70px;
		height: 70px;
		font-size: 14px;
	}

	.bonus-step__num::before {
		inset: 8.7px;
	}

	.bonus-step:last-child .bonus-step__num {
		width: 53.6px;
		height: 53.6px;
		margin: 0 8.2px;
		--halo: 8.2px;
	}

	.bonus-step__title {
		margin-bottom: 6.85px;
		font-size: 20px;
	}

	.bonus-step__text {
		font-size: 14px;
		line-height: 1.4;
	}

	/* больше возможностей: текст сверху, иконка и стрелка внизу */
	.bonus-more {
		margin-top: 63px;
	}

	.bonus-more__grid {
		gap: 30px;
		margin-top: 30px;
	}

	.bonus-more__card {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto 1fr;
		grid-template-areas: "title title" "text text" "icon go";
		min-height: 346px;
		padding: 20px;
		border-radius: 22px;
	}

	.bonus-more__title {
		align-self: start;
	}

	.bonus-more__icon {
		align-self: end;
		margin-top: 18px;
	}

	.bonus-more__go {
		position: static;
		align-self: end;
	}

	/* приложение: во всю ширину, телефон справа сверху, App Store первым */
	.bonus-app {
		margin-top: 63px;
	}

	.bonus-app__box {
		width: auto;
		max-width: none;
		min-height: 462px;
		padding: 41px 0 41px 19px;
	}

	.bonus-app__content {
		gap: 30px;
		max-width: none;
		padding-right: 19px;
	}

	/* заголовок и текст не заходят под телефон справа */
	.bonus-app__title {
		max-width: max(200px, calc(100% - 132px));
		font-size: 32px;
	}

	.bonus-app__text {
		max-width: max(202px, calc(100% - 132px));
		font-size: 14px;
	}

	/* кнопка кабинета и кнопки магазинов — во всю ширину */
	.bonus-app__actions {
		width: 100%;
		gap: 30px 19.8px;
	}

	.bonus-app__btn {
		width: 100%;
		margin-right: 0;
	}

	.bonus-app__store {
		order: 2;
		width: calc((100% - 19.8px) / 2);
	}

	.bonus-app__store:last-child {
		order: 1;
	}

	.bonus-app__phone--front {
		left: calc(100% - 151px);
		top: 38px;
		width: 179.3px;
	}

	/* вопросы: 340 в ширину, крупные кнопки 60 */
	.bonus-faq {
		width: calc(100% - 20px);
		margin-top: 63px;
	}

	.bonus-faq .bonus-h2 {
		padding-left: 29.5px;
		text-align: left;
	}

	.bonus-faq .bonus-h2 b {
		display: block;
	}

	.bonus-faq__list {
		margin-top: 30px;
	}

	.bonus-faq__item.is-open {
		border-radius: 24px;
	}

	.bonus-faq__q,
	.bonus-faq__item.is-open .bonus-faq__q {
		gap: 13px;
		padding: 15px 27px 15px 30px;
		font-size: 16px;
		line-height: 1.2;
		align-items: center;
	}

	.bonus-faq__item.is-open .bonus-faq__q {
		gap: 0;
		padding-top: 30px;
		padding-bottom: 0;
		font-size: 20px;
	}

	.bonus-faq__icon {
		width: 60px;
		height: 60px;
	}

	.bonus-faq__icon svg {
		width: 24px;
		height: 24px;
	}

	.bonus-faq__a-inner {
		padding: 20px 27px 30px 30px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0;
	}

	/* форма: одна колонка, талисман по центру под формой */
	.bonus-form {
		width: calc(100% - 41px);
		margin-top: 63px;
	}

	.bonus-form__box {
		align-items: stretch;
		gap: 0;
		padding: 23px 18.5px 0 19px;
		border-radius: 22.86px;
	}

	.bonus-form__aside {
		display: contents;
	}

	.bonus-form__desc {
		order: 1;
		max-width: none;
		margin-top: 14.3px;
		font-size: 14px;
		font-weight: 400;
		color: #1a1a1a;
	}

	.bonus-form__form {
		order: 2;
		width: 100%;
		margin-top: 30px;
		gap: 13px;
	}

	.bonus-form__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
	}

	.bonus-field {
		gap: 3.6px;
	}

	.bonus-field__label {
		font-size: 14px;
	}

	.bonus-field--wide .bonus-field__label {
		margin-bottom: 4px;
	}

	.bonus-field__input {
		height: 36px;
		padding: 0 12px;
		border-radius: 10.24px;
		font-size: 14px;
	}

	.bonus-field__input:not(:placeholder-shown):not(.bonus-select__btn) {
		padding-left: 11px;
		font-size: 18px;
	}

	.bonus-field__error {
		margin-top: 1.4px;
		padding-left: 0;
		font-size: 12px;
		font-weight: 400;
	}

	.bonus-select__btn {
		padding-right: 36px;
	}

	.bonus-select__btn::after {
		right: 15px;
		width: 6px;
		height: 6px;
		border-width: 0 1.5px 1.5px 0;
	}

	.bonus-select__value {
		font-size: 17px;
	}

	.bonus-select__list {
		transform: translateY(calc(100% - 36px));
		max-height: 285px;
		padding: 2px 6.9px;
		border-radius: 10px;
		box-shadow: 0 0 21.6px rgba(0, 0, 0, .15);
	}

	.bonus-select__list li {
		padding: 12.5px 6px;
		font-size: 17px;
	}

	.bonus-radios {
		gap: 11px;
	}

	.bonus-radio {
		gap: 8.3px;
		height: 36px;
		padding: 0 12px;
		border-radius: 10.24px;
		font-size: 14px;
	}

	.bonus-radio input {
		width: 12px;
		height: 12px;
		border-width: 1.13px;
		border-color: #000;
	}

	.bonus-radio input {
		--ring: 1.13px;
	}

	.bonus-check {
		gap: 6.2px;
		font-size: 14px;
	}

	.bonus-check input {
		width: 16px;
		height: 16px;
		border-width: 1.5px;
		border-radius: 4px;
	}

	.bonus-form__submit {
		width: 100%;
		margin-top: 17px;
	}

	.bonus-form__privacy {
		margin-top: 2px;
		font-size: 11.58px;
		color: #363636;
	}

	.bonus-form__privacy a {
		color: #363636;
	}

	.bonus-form__error {
		font-size: 12px;
	}

	.bonus-form__ok {
		left: 0;
		width: 100%;
		gap: 15px;
		border-radius: 24px;
	}

	.bonus-form__ok-icon svg {
		width: 56px;
		height: 56px;
	}

	.bonus-form__ok p {
		font-size: 14px;
	}

	.bonus-form__ok-btn {
		width: 233px;
		max-width: 100%;
	}

	.bonus-form__mascot {
		order: 3;
		position: static;
		display: block;
		width: 251px;
		margin: 5px auto 0;
	}

	/* ── страница предложения ── */
	.bonus-facts,
	.bonus-terms,
	.bonus-others {
		width: calc(100% - 40px);
	}

	.bonus-facts,
	.bonus-terms,
	.bonus-others,
	.bonus-offer .bonus-steps,
	.bonus-offer .bonus-faq,
	.bonus-offer .bonus-form {
		margin-top: 60px;
	}

	/* первый экран: текст сверху слева, картинка снизу под ним */
	.bonus-ohero__box {
		width: calc(100% - 20px);
		height: auto;
		min-height: 675px;
		padding: 69px 29px 181px 30px;
		border-radius: 32px;
	}

	.bonus-ohero--grid .bonus-ohero__box {
		padding-bottom: 181px;
		background:
			linear-gradient(to right, rgba(89, 89, 89, .12) 1px, transparent 1px) 7px 19.2px / 54.2px 55.8px,
			linear-gradient(to bottom, rgba(89, 89, 89, .12) 1px, transparent 1px) 7px 19.2px / 54.2px 55.8px,
			linear-gradient(108.24deg, rgba(239, 239, 239, .9) 19.776%, rgba(250, 250, 250, .9) 94.098%),
			#eee;
	}

	.bonus-ohero--dark .bonus-ohero__box {
		padding-bottom: 270px;
		background: linear-gradient(108.24deg, rgba(29, 29, 29, .9) 19.776%, rgba(111, 111, 111, .9) 94.098%), #eee;
	}

	.bonus-ohero--yellow .bonus-ohero__box {
		padding-bottom: 251px;
		background: linear-gradient(108.24deg, rgba(248, 173, 30, .9) 19.776%, rgba(250, 201, 30, .9) 94.098%), #eee;
	}

	.bonus-ohero--green .bonus-ohero__box {
		padding-bottom: 219px;
		background: linear-gradient(108.24deg, rgba(62, 154, 26, .9) 19.776%, rgba(90, 205, 45, .9) 94.098%), #eee;
	}

	/* крошки по центру и без «Главной» — иначе не помещаются */
	.bonus-ohero #BreadcrumbList {
		left: 50%;
		top: 20px;
		flex-wrap: nowrap;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.bonus-ohero #BreadcrumbList li:first-child {
		display: none;
	}

	/* длинное название — с многоточием, а не за край */
	.bonus-ohero #BreadcrumbList {
		max-width: calc(100% - 20px);
	}

	.bonus-ohero #BreadcrumbList li:last-child {
		min-width: 0;
	}

	.bonus-ohero #BreadcrumbList li:last-child a {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* текст и кнопка — во всю ширину плашки (было 281 и прижато влево) */
	.bonus-ohero__content {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: auto;
		max-width: none;
		gap: 30px;
	}

	.bonus-ohero__btn {
		width: 100%;
	}

	.bonus-ohero__head {
		gap: 30px;
		width: 100%;   /* строка меток не раздвигает заголовок и описание */
	}

	.bonus-ohero__status {
		margin-bottom: -10px;
		font-size: 14px;
	}

	.bonus-ohero__title {
		font-size: 32px;
	}

	.bonus-ohero__desc {
		font-size: 14px;
	}

	.bonus-ohero__tags {
		flex-wrap: nowrap;
	}

	.bonus-ohero__tags li {
		font-size: 14px;
	}

	.bonus-ohero--dark .bonus-ohero__tags li,
	.bonus-ohero--yellow .bonus-ohero__tags li,
	.bonus-ohero--green .bonus-ohero__tags li {
		border-color: transparent;
	}

	/* к низу бокса; top и right из блока 1440 сбрасываем у каждой темы */
	.bonus-ohero--grid .bonus-ohero__img {
		top: auto;
		right: auto;
		left: calc(50% - 206px);
		bottom: -75px;
		width: 406px;
	}

	.bonus-ohero--dark .bonus-ohero__img {
		top: auto;
		left: auto;
		right: 39.5px;
		bottom: -45px;
		width: 453.1px;
	}

	.bonus-ohero--yellow .bonus-ohero__img {
		top: auto;
		right: auto;
		left: calc(50% - 118px);
		bottom: -19px;
		width: 237px;
	}

	.bonus-ohero--green .bonus-ohero__img {
		top: auto;
		right: auto;
		left: -57.7px;
		bottom: -78.5px;
		width: 494.8px;
	}

	/* коротко: сетка как на 768, мельче отступы и шрифт */
	.bonus-facts__grid {
		--pad-t: 9px;
		--pad-r: 4px;
		--pad-b: 11px;
		--pad-l: 7px;
		--pad-bl: 15px;
		border-radius: 22px;
	}

	.bonus-facts__cell:first-child {
		padding: 10px 10px 10px 14px;
	}

	.bonus-facts__cell dt {
		font-size: 12px;
	}

	.bonus-facts__cell:first-child dt {
		font-size: 14px;
	}

	.bonus-facts__cell dd,
	.bonus-facts__cell:first-child dd,
	.bonus-facts__grid.is-small .bonus-facts__cell:first-child dd {
		font-size: 16px;
	}

	.bonus-offer .bonus-steps__box {
		min-height: 0;
		padding: 34px 19px 33px;
	}

	.bonus-terms .bonus-h2 {
		text-align: left;
	}

	/* условия: подпись над текстом */
	.bonus-terms__list {
		margin-top: 30px;
	}

	.bonus-terms__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
		padding: 15px 0;
		font-size: 14px;
	}

	.bonus-terms__row dt {
		font-size: 20px;
	}

	.bonus-offer .bonus-faq .bonus-h2 {
		padding-left: 10px;
	}

	/* другие предложения: ссылка под заголовком, две карточки */
	.bonus-others__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.bonus-others__all {
		gap: 9px;
		width: 200px;
		padding-bottom: 5px;
		font-size: 20px;
	}

	.bonus-others__all svg {
		width: 13px;
	}

	.bonus-others__head .bonus-h2 b {
		display: inline;
	}
}

/* ══ уже 360: метки переносятся (в макете 360 строка меток впритык к колонке) ══ */

/* 1279–1660: первый экран фиксированной высоты — у завершённого предложения
   статус добавляет строку, поэтому отступы между блоками чуть меньше,
   иначе длинный текст подходит вплотную к крошкам */
@media (min-width: 1279px) and (max-width: 1660px) {
	.bonus-ohero--off .bonus-ohero__content,
	.bonus-ohero--off .bonus-ohero__head {
		gap: 28px;
	}

	.bonus-ohero--off .bonus-ohero__status {
		margin-bottom: -12px;
	}
}

/* 621–767: плашка первого экрана уже 730 из макета 768. Машина «Оклейки»
   (921 в ширину) тогда крупнее плашки, обрезается справа и заходит под
   кнопку — уменьшаем её в той же пропорции; место под картинкой не меняем.
   --bw — ширина плашки. Остальные картинки помещаются как есть. */
@media (min-width: 621px) and (max-width: 767px) {
	.bonus-ohero--green .bonus-ohero__img {
		--bw: calc(100vw - 38px);
		left: calc(var(--bw) * 24 / 730);
		bottom: calc(var(--bw) * -137 / 730);
		width: calc(var(--bw) * 921 / 730);
	}
}

/* 621–700: две колонки карточек уже макета 768 — метки переносятся */
@media (min-width: 621px) and (max-width: 700px) {
	.bonus-card .bonus-tags {
		flex-wrap: wrap;
		row-gap: 6px;
		margin-right: 0;
	}
}

@media (max-width: 359px) {
	.bonus-ohero__tags,
	.bonus-card .bonus-tags {
		flex-wrap: wrap;
		row-gap: 6px;
		margin-right: 0;
	}
}