/* Delivery page styles */
.delivery-page {
	--delivery-red: #b00000;
	--delivery-text: #17110f;
	--delivery-muted: rgba(23, 17, 15, 0.68);
	--delivery-line: rgba(199, 170, 119, 0.52);
	--delivery-card: rgba(255, 253, 249, 0.84);
	min-height: 100vh;
	color: var(--delivery-text);
}

.delivery-section {
	position: relative;
	overflow: clip;
	padding: var(--inner-page-top, clamp(124px, 10vw, 148px)) 0 clamp(72px, 8vw, 118px);
	background:
		url("../images/stores_bg-decoration.png") left -120px top 18px / clamp(260px, 28vw, 520px) auto no-repeat,
		url("../images/reviews_bg-decoration.png") right -160px top 56px / clamp(330px, 34vw, 680px) auto no-repeat,
		url("../images/advantages_bg-decoration.png") left -150px bottom -80px / clamp(280px, 30vw, 560px) auto no-repeat,
		url("../images/marketplaces_bg-decoration.png") right -150px bottom 2% / clamp(340px, 36vw, 720px) auto no-repeat;
}

.delivery-container {
	position: relative;
	z-index: 1;
	width: min(calc(100% - (2 * var(--container-gutter))), var(--container-width));
	max-width: none;
	margin-inline: auto;
}

.delivery-title {
	margin: 0 0 clamp(28px, 3.4vw, 44px);
	color: var(--delivery-text);
	font-size: var(--font-size-page-title);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
}

.delivery-methods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 34px);
	margin-bottom: clamp(36px, 5vw, 58px);
}

.delivery-method {
	position: relative;
	display: grid;
	grid-template-rows: 74px 1fr;
	align-content: stretch;
	min-height: 232px;
	padding: 32px 30px 28px;
	border: 1px solid var(--delivery-line);
	border-radius: 8px;
	background: var(--delivery-card);
	box-shadow: 0 14px 36px rgba(89, 55, 25, 0.08);
	overflow: hidden;
}

.delivery-method__logo {
	display: block;
	align-self: start;
	width: min(154px, 66%);
	height: 56px;
	object-fit: contain;
	object-position: left center;
}

.delivery-method--post .delivery-method__logo {
	width: min(174px, 74%);
	height: 68px;
	margin-top: -6px;
}

.delivery-method__icon {
	display: block;
	align-self: end;
	width: 82px;
	height: 68px;
	margin: 0;
	background: var(--delivery-red);
	mask: var(--delivery-icon) center / contain no-repeat;
	-webkit-mask: var(--delivery-icon) center / contain no-repeat;
}

.delivery-method__text {
	position: relative;
	z-index: 1;
	align-self: start;
	max-width: 190px;
}

.delivery-method__title {
	max-width: 100%;
	margin: 0 0 5px;
	color: var(--delivery-text);
	font-size: clamp(20px, 1.35vw, 23px);
	font-weight: 500;
	line-height: 1.24;
}

.delivery-method__text p {
	margin: 0;
	color: var(--delivery-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.delivery-method__image {
	position: absolute;
	z-index: 0;
	right: -96px;
	bottom: 22px;
	width: 78%;
	max-width: 315px;
	height: auto;
	object-fit: contain;
	pointer-events: none;
}

.delivery-method--cdek .delivery-method__image {
	right: -52px;
	bottom: -12px;
	width: 120%;
	max-width: 500px;
}

.delivery-method--post .delivery-method__image {
	right: -40px;
	bottom: -6px;
	width: 60%;
	max-width: 220px;
}

.delivery-method--custom {
	grid-template-rows: 74px 1fr;
	align-content: stretch;
	gap: 10px;
}

.delivery-choice {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 32px);
	margin-bottom: clamp(56px, 7vw, 82px);
	padding: clamp(18px, 2.4vw, 28px) clamp(24px, 3.2vw, 44px);
	border: 1px solid var(--delivery-line);
	border-radius: 8px;
	background: rgba(255, 253, 249, 0.76);
	box-shadow: 0 12px 30px rgba(89, 55, 25, 0.06);
}

.delivery-choice__icon,
.delivery-info__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: clamp(68px, 5.6vw, 92px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #eadfce;
}

.delivery-choice__icon img,
.delivery-info__icon img {
	display: block;
	width: 52%;
	height: 52%;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(3899%) hue-rotate(355deg) brightness(78%) contrast(114%);
}

.delivery-choice p {
	margin: 0;
	color: var(--delivery-muted);
	font-size: clamp(18px, 1.32vw, 23px);
	font-weight: 500;
	line-height: 1.5;
}

.delivery-info {
	display: grid;
	gap: 0;
}

.delivery-info__item {
	display: grid;
	grid-template-columns: clamp(78px, 6.6vw, 104px) minmax(0, 1fr);
	gap: clamp(28px, 4.2vw, 62px);
	align-items: center;
	padding: clamp(28px, 4vw, 54px) 0;
	border-top: 1px dashed var(--delivery-line);
}

.delivery-info__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.delivery-info__content {
	max-width: 700px;
}

.delivery-info__content h2 {
	margin: 0 0 12px;
	color: var(--delivery-text);
	font-size: clamp(22px, 1.65vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

.delivery-info__content p {
	margin: 0;
	color: var(--delivery-muted);
	font-size: clamp(17px, 1.25vw, 21px);
	font-weight: 500;
	line-height: 1.48;
}

.delivery-return {
	display: grid;
	justify-items: center;
	gap: 12px;
	margin-top: clamp(18px, 3vw, 38px);
}

.delivery-return__deco {
	display: block;
	width: min(320px, 62vw);
	height: auto;
	filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(3899%) hue-rotate(355deg) brightness(78%) contrast(114%);
}

.delivery-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, 318px);
	min-height: 62px;
	padding: 16px 34px;
	border: 2px solid var(--delivery-red);
	border-radius: 999px;
	background: var(--delivery-red);
	color: #fff !important;
	font-size: var(--font-size-button);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 14px 30px rgba(176, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.delivery-button:hover,
.delivery-button:focus-visible {
	background: #970000;
	box-shadow: 0 16px 34px rgba(176, 0, 0, 0.26);
	transform: translateY(-1px);
}

@media (max-width: 1100px) {
	.delivery-methods {
		gap: 18px;
	}

	.delivery-method {
		min-height: 212px;
		padding: 28px 24px 24px;
	}

	.delivery-method--cdek .delivery-method__image {
		right: -118px;
		width: 92%;
	}

	.delivery-method--post .delivery-method__image {
		right: -4px;
		width: 58%;
	}
}

@media (max-width: 860px) {
	.delivery-section {
		padding-top: var(--inner-page-top-mobile, 104px);
		background:
			url("../images/stores_bg-decoration.png") left -150px top 88px / 330px auto no-repeat,
			url("../images/reviews_bg-decoration.png") right -180px top 210px / 400px auto no-repeat,
			url("../images/advantages_bg-decoration.png") left -150px bottom 18% / 340px auto no-repeat,
			url("../images/marketplaces_bg-decoration.png") right -170px bottom 0 / 430px auto no-repeat;
	}

	.delivery-methods {
		grid-template-columns: 1fr;
	}

	.delivery-method {
		grid-template-rows: 68px 1fr;
		min-height: 184px;
		padding: 28px;
	}

	.delivery-method__text {
		align-self: start;
		max-width: 58%;
	}

	.delivery-method--cdek .delivery-method__image {
		right: -106px;
		bottom: 18px;
		width: 55%;
		max-width: 310px;
	}

	.delivery-method--post .delivery-method__image {
		right: 20px;
		bottom: 24px;
		width: 36%;
		max-width: 190px;
	}

	.delivery-choice,
	.delivery-info__item {
		gap: 22px;
	}

	.delivery-info__item {
		grid-template-columns: 76px minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.delivery-title {
		font-size: clamp(30px, 9vw, 40px);
	}

	.delivery-method {
		grid-template-rows: 62px 1fr;
		min-height: 166px;
		padding: 22px;
	}

	.delivery-method__logo {
		width: 140px;
		height: 50px;
	}

	.delivery-method--post .delivery-method__logo {
		width: 154px;
		height: 58px;
	}

	.delivery-method__icon {
		width: 64px;
		height: 54px;
	}

	.delivery-method__text {
		max-width: 58%;
	}

	.delivery-method__title,
	.delivery-method__text p {
		font-size: 17px;
	}

	.delivery-choice {
		align-items: flex-start;
		padding: 20px;
	}

	.delivery-choice__icon,
	.delivery-info__icon {
		width: 58px;
	}

	.delivery-info__item {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 18px;
		padding: 26px 0;
	}

	.delivery-info__content h2 {
		font-size: 20px;
	}

	.delivery-info__content p,
	.delivery-choice p {
		font-size: 16px;
	}

	.delivery-button {
		min-height: 56px;
		font-size: var(--font-size-button);
	}
}

@media (max-width: 420px) {
	.delivery-method__text {
		max-width: 64%;
	}

	.delivery-method--cdek .delivery-method__image {
		right: -96px;
		width: 78%;
	}

	.delivery-method--post .delivery-method__image {
		right: 4px;
		width: 45%;
	}

	.delivery-info__item {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}