/*
 * Пошкоджена посилка (information/damaged_parcel). Figma y6CbfG5miqpmq2ESvEsK2b: десктоп 1:176 (1680, контент 1600),
 * мобільний 1:262 (375) — до 999px: у вужчому десктопному герої текст налазить на коробку.
 * Файл підключається раніше за brand.css — усі класи з префіксом dp-, тож brand.css їх не перебиває.
 *
 * --u — 1px макету героя: 1 на контенті ≥ 1200, далі пропорційно, не менше 0.75 (вікно ~1000).
 * Скоси карток і героя — clip-path: у макеті це трикутники кольору фону (#F7F8F9 / #F5F5F5),
 * а фон сайту #F7F8F9 — на мобілці накладка була б помітна.
 */

.dp-page {
	--dp-ink: #0E0E0E;
	--dp-red: #EE1C25;
	--dp-on-dark: #DCDED8;
	--dp-divider: #3C3C3C;
	--u: clamp(0.75px, calc(100cqw / 1200), 1px);
	container-type: inline-size;
	padding-bottom: 72px;
	font-family: 'Montserrat', sans-serif;
}

.dp-page h1,
.dp-page h2,
.dp-page p {
	margin: 0;
	padding: 0;
}

/* ---------- крихти: 16 під шапкою, 12 Medium #898E86, «·» Bold з відступами 4 ---------- */
.dp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	color: var(--vv-muted, #898E86);
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
}

.dp-crumbs li + li::before {
	content: "·";
	margin: 0 4px;
	font-weight: 700;
}

.dp-crumbs a {
	color: inherit;
	transition: color 0.15s;
}

.dp-crumbs a:hover {
	color: var(--vv-black, #000);
}

/* ---------- кнопки (Button / Primary, Secondary) ---------- */
.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 45px;
	padding: 0 24px;
	border: 1.5px solid transparent;
	border-radius: 0;
	color: var(--vv-black, #000);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.dp-btn:hover,
.dp-btn:focus {
	color: var(--vv-black, #000);
	text-decoration: none;
}

.dp-btn--primary {
	background: var(--vv-brand, #E7F127);
}

.dp-btn--outline {
	border-color: var(--dp-ink);
	background: var(--vv-white, #fff);
}

.dp-btn--ghost,
.dp-btn--ghost:hover,
.dp-btn--ghost:focus {
	border-color: var(--vv-white, #fff);
	background: transparent;
	color: var(--vv-white, #fff);
}

@media (hover: hover) {
	.dp-btn--primary:hover {
		background: var(--vv-brand-hover, #D6E01F);
	}

	.dp-btn--outline:hover {
		background: var(--vv-surface, #EDEEEB);
	}

	.dp-btn--ghost:hover {
		background: rgba(255, 255, 255, 0.12);
	}
}

/* ---------- герой 1:184: 1600×500, поля 64, текст по центру висоти ---------- */
/* min-height, не height: довший текст (RU — 4 рядки заголовка) не обрізається, а розсуває героя */
.dp-hero {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: calc(500 * var(--u));
	margin-top: 16px;
	padding: 24px calc(64 * var(--u));
	overflow: hidden;
	background: #0A0A0A;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
	color: var(--vv-white, #fff);
}

/* фон 1600×500; на вужчому контенті зсувається вліво, щоб коробка (x 937…1406 макету) не обрізалась справа.
   Якщо герой вищий за 500 — фото збільшується, лишаючи праву частину */
.dp-hero__bg {
	position: absolute;
	top: 0;
	left: min(0px, calc(100% - 1426 * var(--u)));
	width: calc(1600 * var(--u));
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%;
}

/* 700 з макету, але не далі ніж за 24 до коробки: її лівий край — зсув фону + 937 */
.dp-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: min(700px, calc(min(0px, 100cqw - 1426 * var(--u)) + 873 * var(--u) - 24px));
}

.dp-hero__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ExtraBold 72/1.1 капсом, рядки через 4; на вужчому контенті менше, щоб не лягало на коробку */
.dp-page .dp-hero__title {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--vv-white, #fff);
	font-size: clamp(40px, 5.4cqw, 72px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* тема: h1 span { color: #9e9e9e; font-size: 16px; font-weight: 500; text-transform: none; padding-left: 5px } */
.dp-page .dp-hero__title span {
	padding-left: 0;
	color: inherit;
	font: inherit;
	text-transform: inherit;
}

.dp-page .dp-hero__title .dp-accent {
	color: var(--vv-brand, #E7F127);
}

/* «чи знищено?» — у RU «или уничтожена?» ширше за колонку, тоді слово переноситься */
.dp-hero__line--split {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}

.dp-accent {
	color: var(--vv-brand, #E7F127);
}

/* 583 з макету; на вужчому контенті — не далі лівого краю коробки */
.dp-page .dp-hero__lead {
	max-width: min(583px, 48cqw);
	color: var(--vv-white, #fff);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.88;
}

.dp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dp-hero .dp-btn {
	font-weight: 700;
}

/* ---------- картки 1:202: «Що робити?» на всю решту, «Що буде із замовленням?» 600 з 1600 ---------- */
.dp-info {
	display: flex;
	align-items: stretch;
	gap: 20px;
	margin-top: 20px;
}

.dp-card {
	position: relative;
	box-sizing: border-box;
	padding: 36px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
}

.dp-page .dp-card__title {
	color: var(--dp-ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

.dp-steps {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	background: var(--vv-white, #fff);
}

/* крок: номер 70 зліва, текст і кнопки праворуч через 20; кнопки під текстом через 14 */
.dp-step {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	align-items: start;
	column-gap: 20px;
	row-gap: 14px;
}

.dp-step__num {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-row: 1 / span 2;
	width: 70px;
	height: 70px;
}

.dp-step__num img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.dp-step__num b {
	position: relative;
	color: var(--vv-white, #fff);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.23;
}

.dp-page .dp-step__text {
	grid-column: 2;
	color: var(--dp-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

.dp-step__actions {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	gap: 10px;
}

/* крок без кнопок — текст по центру номера */
.dp-step--solo {
	align-items: center;
}

.dp-step--solo .dp-step__num {
	grid-row: auto;
}

.dp-order {
	display: flex;
	flex: 0 0 clamp(400px, 37.5%, 600px);
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	background: var(--dp-ink);
}

.dp-order__top {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dp-page .dp-order .dp-card__title {
	color: var(--vv-brand, #E7F127);
}

.dp-order__lead {
	display: flex;
	align-items: center;
	gap: 20px;
}

.dp-order__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--dp-red);
}

.dp-page .dp-order__lead-text {
	flex: 1 1 0;
	min-width: 0;
	color: var(--vv-white, #fff);
	font-size: clamp(28px, 2.5cqw, 40px);
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
}

.dp-page .dp-order__text {
	color: var(--dp-on-dark);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

/* розділювач 1px #3C3C3C і 20 до тексту */
.dp-page .dp-order__note {
	padding-top: 20px;
	border-top: 1px solid var(--dp-divider);
	color: var(--vv-white, #fff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------- мобільний макет 1:262 ---------- */
@media (max-width: 999px) {
	.dp-page {
		padding-bottom: 40px;
	}

	.dp-crumbs {
		margin-top: 9px;
	}

	/* 351×523: текст угорі (20 від краю), кнопки внизу (22) */
	.dp-hero {
		align-items: stretch;
		height: auto;
		min-height: 523px;
		margin-top: 12px;
		padding: 20px 16px 22px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
	}

	/* полотно 840×523 — уся ширина фото; коробка (x 585.58 полотна) — по центру героя.
	   На ширших екранах (планшет) фото росте від центру, щоб покрити ширину */
	.dp-hero__bg {
		top: 50%;
		left: 50%;
		width: max(840.24px, 165%);
		height: max(523px, 100%);
		object-fit: cover;
		object-position: 69.692% 50%;
		transform: translate(-69.692%, -50%);
	}

	.dp-hero__content {
		justify-content: space-between;
		gap: 24px;
		width: 100%;
	}

	.dp-page .dp-hero__title {
		font-size: 28px;
	}

	.dp-hero__line--split {
		column-gap: 12px;
	}

	.dp-page .dp-hero__lead {
		max-width: none;
		font-size: 14px;
		line-height: 1.3;
	}

	/* в один рядок, друга кнопка добирає ширину; на 320 не влазять — переносяться */
	.dp-hero__cta {
		gap: 8px;
	}

	.dp-hero .dp-btn {
		flex: 1 1 auto;
		height: 42px;
		padding: 0 16px;
		border-width: 1px;
		font-size: 14px;
		font-weight: 600;
	}

	.dp-hero .dp-btn--primary {
		flex-grow: 0;
	}

	.dp-info {
		flex-direction: column;
		gap: 12px;
		margin-top: 12px;
	}

	.dp-card {
		padding: 16px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
	}

	.dp-page .dp-card__title {
		font-size: 18px;
	}

	.dp-steps {
		gap: 16px;
	}

	/* номер 64, текст поруч через 12; кнопки на всю ширину під ними */
	.dp-step {
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 12px;
	}

	.dp-step--2 {
		row-gap: 16px;
	}

	.dp-step--solo {
		align-items: center;
	}

	.dp-step__num {
		grid-row: auto;
		width: 64px;
		height: 64px;
	}

	.dp-step__num b {
		font-size: 32px;
	}

	.dp-page .dp-step__text {
		font-size: 14px;
		line-height: 1.3;
	}

	.dp-step__actions {
		grid-column: 1 / -1;
		gap: 4px;
	}

	.dp-step__actions .dp-btn {
		flex: 1 1 0;
		height: 42px;
		padding: 0 16px;
		border-width: 1px;
		font-size: 14px;
	}

	.dp-step__actions .dp-btn--wide {
		flex-basis: 100%;
	}

	.dp-order {
		flex: none;
		justify-content: flex-start;
	}

	.dp-order__lead {
		gap: 12px;
	}

	.dp-order__icon {
		width: 64px;
		height: 64px;
	}

	.dp-page .dp-order__lead-text {
		font-size: 22px;
	}

	.dp-page .dp-order__text {
		font-size: 14px;
		line-height: 1.4;
	}

	.dp-page .dp-order__note {
		font-size: 14px;
	}
}

/* планшет у мобільному макеті: кнопки на всю ширину 700+ виглядають як смуги — за вмістом, як на десктопі */
@media (min-width: 600px) and (max-width: 999px) {
	.dp-hero .dp-btn,
	.dp-step__actions .dp-btn,
	.dp-step__actions .dp-btn--wide {
		flex: 0 0 auto;
	}
}

/* «ВАШУ ПОСИЛКУ» 28px — 257px, на 320 контенту 256 */
@media (max-width: 359px) {
	.dp-page .dp-hero__title {
		font-size: 26px;
	}

	/* кнопки героя тут у два рядки — обидві на всю ширину */
	.dp-hero .dp-btn--primary {
		flex-grow: 1;
	}
}

/* мобільна шапка: поля 16, як у неї (у макеті стара шапка й поля 12) — x001 ставить .container 10, тому .container.dp-page;
   спейсер .null під fixed-шапкою має margin-bottom: -5px — без компенсації контент заходить під шапку */
@media (max-width: 767px) {
	.container.dp-page {
		margin-top: 5px;
		padding-right: 16px;
		padding-left: 16px;
	}
}