// Head Desktop

.product-card-head-desktop {
	display: flex;
	flex-flow: column;
	gap: 20px;
	width: calc(100% - 32px);
	max-width: $width-desktop;
	align-self: center;

	@include mobile {
		display: none;
	}
}

.product-card-head-desktop__title {
	margin-top: 20px;
	font-weight: 700;
	font-size: 48px;
	letter-spacing: -0.03em;
}

.product-card-head-desktop__inf {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 24px;
}

.product-card-head-desktop__inf__default-text {
	font-size: 16px;
	line-height: 18px;
	color: $color-gray-md;
}

a.product-card-head-desktop__inf__default-text {
	@include desktop {
		&:hover {
			text-decoration: underline;
		}
	}
}

.product-card-head-desktop__inf__rating {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	span {
		font-weight: 500;
		font-size: 16px;
		line-height: 18px;
	}
}

.product-card-head-desktop__inf__btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;

	svg {
		width: 24px;
		height: 24px;
		color: $color-gray-low;
	}

	span {
		font-size: 16px;
		line-height: 18px;
	}

	@include desktop {
		&:hover {
			color: $color-green;

			svg {
				color: $color-green;
			}
		}
	}
}

.product-card-head-desktop__inf__fill {
	flex: 1;
}

// Head Mobile

.product-card-head-mobile {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		display: none;
	}
}

.product-card-head-mobile__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: -0.03em;
}

.product-card-head-mobile__inf {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 10px;
}

.product-card-head-mobile__inf__default-text {
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;
}

.product-card-head-mobile__inf__text-with-icon {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 4px;

	svg {
		width: 24px;
		height: 24px;
		color: $color-gray-md;
	}

	span {
		font-size: 14px;
		line-height: 16px;
	}
}

.product-card-head-mobile__inf__rating {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 4px;

	span {
		font-size: 14px;
		font-weight: 500;
		line-height: 16px;
	}
}

// Сетка

.product-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 0 16px;
	margin-top: 14px;

	@include desktop {
		grid-template-columns: 1fr 300px 403px;
		gap: 40px;
		align-self: center;
		margin-top: 30px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

// Фото

.product-card-grid__photo {
	display: flex;
	flex-flow: column;
	gap: 14px;
	overflow: hidden;

	@include desktop {
		order: 1;
	}
}

.product-card-grid__photo__slider {
	position: relative;
	width: 100%;
	aspect-ratio: 164 / 115;
	border-radius: 28px;
	background-color: $color-surface;
	overflow: hidden;

	@include desktop {
		aspect-ratio: 467 / 460;
		border-radius: 32px;
	}

	.swiper-slider {
		width: 100%;
		height: 100%;
	}

	.swiper-pagination.custom-swiper-pagination {
		position: absolute !important;
		top: unset !important;
		bottom: 14px !important;
		gap: 4px;
		margin-top: 0;

		@include desktop {
			gap: 10px;
		}

		.swiper-pagination-bullet {
			width: 8px;
			height: 8px;

			@include desktop {
				width: 12px;
				height: 12px;
			}

			&-active {
				background-color: $color-green;
			}
		}
	}
}

.product-card-grid__photo__slide {
	display: flex !important;
	align-items: center;
	justify-content: center;

	img {
		display: block;
		width: 100%;
		max-width: 165px;
		aspect-ratio: 2 / 2;

		@include desktop {
			max-width: 309px;
		}
	}
}

.product-card-grid__photo__slide-prev,
.product-card-grid__photo__slide-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: $color-gray-low;
	transform: translateY(-50%);
	z-index: 9;

	@include mobile {
		display: none !important;
	}

	svg {
		width: 100%;
		height: 100%;
	}

	@include desktop {
		&:hover {
			color: $color-green;
		}
	}
}

.product-card-grid__photo__slide-prev {
	left: 10px;
}

.product-card-grid__photo__slide-next {
	right: 10px;
}

.product-card-grid__photo__labels {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 4px;
	z-index: 1;

	@include desktop {
		top: 20px;
		left: 20px;
		gap: 6px;
	}
}

.product-card-grid__photo__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	min-height: 24px;
	border-radius: calc(24px / 2);
	background-color: #2c2d2e;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: $color-white;
	text-align: center;
	box-sizing: border-box;

	@include desktop {
		min-height: 30px;
		padding: 6px 16px;
		border-radius: calc(30px / 2);
		font-weight: 500;
		font-size: 16px;
		line-height: 18px;
		color: $color-white;
	}

	&--accent-bg {
		background: linear-gradient(81.79deg, #eb4747 16.36%, #f57c00 100%), #2c2d2e;
	}
}

// Расчеты

.product-card-grid__estimation {
	display: flex;
	flex-flow: column;
	gap: 8px;

	@include desktop {
		order: 3;
		gap: 16px;
	}
}

.product-card-grid__estimation-block {
	display: flex;
	flex-flow: column;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		padding: 24px;
		border-radius: 32px;
	}

	&--gap10 {
		gap: 10px;
	}

	&--gap14 {
		gap: 14px;
	}

	@include desktop {
		gap: 16px !important;
	}
}

.product-card-grid__estimation-block__price {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 14px;

	@include desktop {
		gap: 16px;
	}

	&-current {
		font-size: 20px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 28px;
		}
	}

	&-discount {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		padding: 0 10px;
		border-radius: 10px;
		background: linear-gradient(81.79deg, #eb4747 16.36%, #f57c00 100%);
		font-size: 12px;
		font-weight: 500;
		line-height: 14px;
		color: $color-white;
		box-sizing: border-box;

		@include desktop {
			padding: 10px;
			height: 30px;
			border-radius: 12px;
			font-size: 14px;
			font-weight: 500;
			line-height: 16px;
		}
	}

	&-sale {
		font-size: 16px;
		line-height: 18px;
		color: $color-gray-md;
		text-decoration: line-through;

		@include desktop {
			font-size: 18px;
			line-height: 21px;
		}
	}
}

.product-card-grid__estimation-block__status {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 16px;

	@include desktop {
		font-size: 16px;
		line-height: 18px;
	}

	span {
		color: $color-gray-md;
	}

	b {
		font-weight: 500;
		color: $color-green;
	}
}

.product-card-grid__estimation-block__checkout {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;

	@include desktop {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		grid-template-columns: unset;
		gap: 10px;
	}
}

.product-card-grid__estimation-block__checkout-btn {
	$self: &;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 54px;
	padding: 0px 18px;
	border-radius: 14px;
	background-color: $color-green;
	font-weight: 500;
	font-size: 16px;
	line-height: 18px;
	color: $color-white;
	box-sizing: border-box;
	white-space: nowrap;

	@include desktop {
		gap: 10px;
		padding: 0px 24px;
		min-height: 64px;
		border-radius: 16px;
		font-size: 18px;
		line-height: 21px;
	}

	svg {
		width: 24px;
		height: 24px;
	}

	@include desktop {
		&:not(#{ $self }--primary) {
			@include desktop {
				&:hover {
					color: $color-white;
					background-color: $color-green-hover;
				}
			}
		}
	}

	&--primary {
		color: $color-green;
		background-color: $color-white;
	}

	&--secondary {
		color: $color-black;
		background-color: $color-white;
	}
}

.product-card-grid__estimation-block__checkout-desc {
	font-size: 12px;
	line-height: 14px;
	color: $color-gray-md;

	@include desktop {
		font-size: 14px;
		line-height: 16px;
	}

	&--small {
		font-size: 10px;
		line-height: 11px;

		@include desktop {
			font-size: 12px;
			line-height: 14px;
		}
	}
}

.product-card-grid__estimation-block__offer-btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	min-height: 48px;
	border-radius: 14px;
	background-color: $color-white;
	text-align: left;
	box-sizing: border-box;

	@include desktop {
		gap: 10px;
		min-height: 54px;
		padding: 12px 16px;
		border-radius: 16px;
	}

	b {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;
	}

	span {
		font-size: 12px;
		line-height: 14px;
		color: $color-gray-md;

		@include desktop {
			font-size: 14px;
			line-height: 16px;
		}
	}

	&--processing {
		padding-top: 0;
		padding-bottom: 0;

		.product-card-grid__estimation-block__offer-btn__icon {
			color: $color-warning-primary;
			background-color: transparent;
		}
	}
}

.product-card-grid__estimation-block__offer-btn__main {
	display: flex;
	flex-flow: column;
	gap: 4px;
}

.product-card-grid__estimation-block__offer-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: $color-green;
	margin-left: auto;

	svg {
		width: 20px;
		height: 20px;
		color: $color-white;
	}
}

.product-card-grid__estimation-block__offer-link {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;

	@include desktop {
		font-size: 16px;
		line-height: 18px;
	}

	a {
		color: $color-green;
	}
}

.product-card-grid__estimation-block__ya-split-btn {
	display: flex;
	flex-flow: column;
	min-height: 52px;
	padding: 10px 16px;
	border-radius: 16px;
	background-color: #242424;
	box-shadow: 0px 8px 16px rgba(#000, 0.08);
	color: $color-white;
	text-align: center;

	svg {
		display: inline;
		vertical-align: middle;
		margin-top: -2px;
	}

	span:nth-child(1) {
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		color: rgba($color-white, 0.98);

		@include desktop {
			font-size: 16px;
			line-height: 20px;
		}

		svg {
			width: 60px;
			height: 16px;
		}
	}

	span:nth-child(2) {
		font-size: 12px;
		font-weight: 500;
		line-height: 14px;
		color: rgba($color-white, 0.98);

		@include desktop {
			font-size: 12px;
			line-height: 14px;
		}

		svg {
			width: 30px;
			height: 10px;
		}
	}
}

.product-card-grid__estimation-block__ya-split {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding-top: 10px;
	border-top: 1px solid $color-border;

	@include desktop {
		padding-top: 16px;
	}

	&__btn {
		display: grid;
		grid-template-columns: 28px 1fr;
		align-items: center;
		gap: 12px;

		&-icon {
			width: 28px;
			height: 28px;
		}

		&-main {
			display: flex;
			flex-flow: column;
		}

		&-head {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;

			span {
				font-size: 13px;
				line-height: 16px;
				color: rgba(#000, 0.86);
			}

			svg {
				width: 14px;
				height: 14px;
			}
		}

		&-terms {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			gap: 4px;
			color: rgba(#000, 0.86);

			b {
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
			}

			span {
				font-size: 13px;
				line-height: 16px;
			}
		}
	}

	&-tabs {
		display: flex;
		flex-flow: row nowrap;
		padding: 3px;
		gap: 3px;
		height: 40px;
		border-radius: 13px;
		background-color: #edeff2;
		box-sizing: border-box;

		li {
			cursor: pointer;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 34px;
			border-radius: 11px;
			font-weight: 500;
			font-size: 16px;
			line-height: 20px;
			color: rgba(#000, 0.3);

			&.active {
				color: black;
				background-color: $color-white;
				box-shadow: 0px 2px 5px rgba(33, 34, 36, 0.17);
			}
		}
	}

	&-schedule {
		$self: &;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;

		&__item {
			$item: &;
			flex: 1;
			display: flex;
			flex-flow: column;

			&__line {
				height: 4px;
				margin: 3px 0;
				border-radius: calc(4px / 2);
				background-color: #e1e3e8;
			}

			&__day {
				margin-top: 3px;
				font-size: 13px;
				line-height: 16px;
				color: rgba(#000, 0.5);
			}

			&__amount {
				font-size: 14px;
				font-weight: 500;
				line-height: 18px;
				color: rgba(#000, 0.86);
			}

			&.active {
				#{ $item }__line {
					background: linear-gradient(270deg, #55d48e 0%, #adebc9 100%);
				}

				#{ $item }__day {
					color: rgba(#000, 0.86);
				}
			}
		}
	}
}

.product-card-grid__estimation-block__delivery-list {
	display: flex;
	flex-flow: column;
	gap: 14px;

	@include desktop {
		gap: 16px;
	}
}

.product-card-grid__estimation-block__delivery-item {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	gap: 10px;
}

.product-card-grid__estimation-block__delivery-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 2;
	border-radius: 10px;
	background-color: $color-white;

	svg {
		width: 24px;
		height: 24px;
		color: $color-green;
	}
}

.product-card-grid__estimation-block__delivery-item__main {
	display: flex;
	flex-flow: column;
	gap: 4px;

	@include desktop {
		gap: 6px;
	}

	span {
		font-size: 14px;
		font-weight: 500;
		line-height: 16px;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}
	}

	p {
		font-size: 14px;
		line-height: 16px;
		color: $color-gray-md;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}
	}
}

.product-card-grid__estimation-block__delivery-desc {
	font-size: 10px;
	line-height: 11px;
	color: $color-gray-md;

	@include desktop {
		font-size: 12px;
		line-height: 14px;
	}
}

// Характеристики

.product-card-grid__characteristics {
	display: flex;
	flex-flow: column;
	gap: 24px;

	@include desktop {
		order: 2;
	}
}

.product-card-grid__characteristics__labels {
	display: flex;
	flex-flow: column;
	gap: 8px;

	@include desktop {
		gap: 12px;
	}
}

.product-card-grid__characteristics__label {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	padding: 10px;
	min-height: 58px;
	border-radius: 14px;
	border: 1px solid $color-border;
	text-align: left;
	box-sizing: border-box;

	@include desktop {
		gap: 10px;
		padding: 12px;
		min-height: 62px;
		border-radius: 16px;

		@include desktop {
			&:hover {
				border-color: $color-green;
			}
		}
	}
}

.product-card-grid__characteristics__label__img {
	width: 38px;
	aspect-ratio: 2 / 2;
	border-radius: 10px;
	background-color: $color-surface;

	@include desktop {
		border-radius: 12px;
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		pointer-events: none;
	}
}

.product-card-grid__characteristics__label__main {
	display: flex;
	flex-flow: column;
	gap: 4px;

	b {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;
	}

	span {
		font-size: 12px;
		line-height: 14px;
		color: $color-gray-md;

		@include desktop {
			font-size: 14px;
			line-height: 16px;
		}
	}
}

.product-card-grid__characteristics__content {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include mobile {
		display: none;
	}
}

.product-card-grid__characteristics__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.product-card-grid__characteristics__list {
	display: flex;
	flex-flow: column;
	gap: 12px;
}

.product-card-grid__characteristics__item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 18px;

	&::before {
		content: '';
		flex: 1;
		order: 2;
		height: 18px;
		border-bottom: 1px dashed $color-border;
		box-sizing: border-box;
		pointer-events: none;
	}

	span:nth-child(1) {
		order: 1;
		color: $color-gray-md;
	}

	span:nth-child(2) {
		order: 3;
	}
}

// Tabs

.product-card-tabs-wrapper {
	display: flex;
	flex-flow: column;
	gap: 32px;
	margin-top: 32px;

	@include desktop {
		align-self: center;
		gap: 40px;
		margin-top: 50px;
		width: calc(100% - 32px);
		max-width: $width-desktop;
	}
}

.product-card-tabs-slider {
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 0;
		height: 1px;
		background-color: $color-border;

		@include desktop {
			left: 0;
			right: 0;
		}
	}

	@include mobile {
		padding: 0 16px;
	}
}

.product-card-tab-slide {
	cursor: pointer;
	position: relative;
	width: max-content !important;
	height: 30px !important;
	font-size: 14px;
	line-height: 16px;
	color: $color-gray-md;

	@include desktop {
		height: 34px !important;
		font-size: 16px;
		line-height: 18px;
	}

	&.active {
		font-weight: 500;
		color: $color-green;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			background-color: $color-green;
		}
	}
}

// Описание и характеристики

.product-card-tab-desc-container {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include mobile {
		gap: 24px;
		padding: 0 16px;
	}
}

.product-card-tab-desc-container__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 38px;
	}
}

.product-card-tab-desc-container__text {
	display: flex;
	flex-flow: column;
	gap: 10px;

	p {
		font-size: 14px;
		line-height: 150%;

		@include desktop {
			font-size: 16px;
		}
	}
}

.product-card-tab-desc-container__grid {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		flex-flow: row nowrap;
		gap: 40px;
	}
}

.product-card-tab-desc-container__list {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		flex: 1;
	}

	li {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;
		font-size: 14px;
		line-height: 16px;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}

		&::before {
			content: '';
			order: -1;
			flex: 1;
			height: 16px;
			border-bottom: 1px dashed $color-border;

			@include desktop {
				height: 18px;
			}
		}

		span:nth-child(1) {
			order: -2;
			color: $color-gray-md;
		}

		a {
			color: $color-green;

			@include desktop {
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

// Гарантии

.product-card-tab-guarantee-container {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		gap: 24px;
	}
}

.product-card-tab-guarantee-container__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 38px;
	}
}

.product-card-tab-guarantee-container__text {
	display: flex;
	flex-flow: column;
	gap: 10px;

	p {
		font-size: 14px;
		line-height: 150%;

		@include desktop {
			font-size: 16px;
		}
	}
}

.product-card-tab-guarantee-container__grid {
	display: flex;
	flex-flow: column;
	gap: 10px;

	@include desktop {
		flex-flow: row nowrap;
		gap: 20px;
	}
}

.product-card-tab-guarantee-container__item {
	padding: 20px;
	border-radius: 28px;
	background-color: $color-surface;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;

	@include desktop {
		padding: 24px;
		border-radius: 32px;
		font-size: 16px;
		line-height: 18px;
	}
}

.product-card-tab-guarantee-container__link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 18px;
	min-height: 54px;
	border-radius: 14px;
	background-color: $color-green;
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	color: $color-white;
	box-sizing: border-box;

	@include desktop {
		align-self: flex-start;
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;

		@include desktop {
			&:hover {
				background-color: $color-green-hover;
			}
		}
	}
}

// Доставка и оплата

.product-card-tab-delivery-container {
	display: flex;
	flex-flow: column;

	@include mobile {
		padding: 0 16px;
	}
}

.product-card-tab-delivery-container__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 38px;
	}
}

.product-card-tab-delivery-container__text {
	display: flex;
	flex-flow: column;
	gap: 10px;
	margin-top: 16px;

	@include desktop {
		margin-top: 24px;
	}

	p {
		font-size: 14px;
		line-height: 150%;

		@include desktop {
			font-size: 16px;
		}
	}
}

.product-card-tab-delivery-container__grid {
	display: flex;
	flex-flow: column;
	gap: 8px;
	margin-top: 18px;

	@include desktop {
		flex-flow: row nowrap;
		gap: 20px;
		margin-top: 24px;
	}
}

.product-card-tab-delivery-container__item {
	display: flex;
	flex-flow: column;
	padding: 20px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		flex: 1;
		min-height: 158px;
		padding: 24px;
		height: 158px;
		border-radius: 32px;
	}

	span {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 20px;
		}
	}

	p {
		margin-top: 10px;
		font-size: 14px;
		line-height: 16px;

		@include desktop {
			margin-top: auto;
			font-size: 16px;
			line-height: 18px;
		}
	}
}

.product-card-tab-delivery-container__conditions {
	display: flex;
	flex-flow: column;
	gap: 16px;
	margin-top: 16px;

	@include desktop {
		gap: 12px;
		margin-top: 24px;
	}
}

.product-card-tab-delivery-container__condition-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-bottom: 2px;

	@include desktop {
		font-size: 28px;
		margin-bottom: 19px;
	}
}

.product-card-tab-delivery-container__condition {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;

	@include desktop {
		gap: 10px;
		font-size: 16px;
		line-height: 18px;
	}

	&::before {
		content: '';
		width: 20px;
		height: 20px;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11472_38764)'%3E%3Cpath d='M18.3327 10.0003C18.3327 5.39795 14.6017 1.66699 9.99935 1.66699C5.39697 1.66699 1.66602 5.39795 1.66602 10.0003C1.66602 14.6027 5.39697 18.3337 9.99935 18.3337C14.6017 18.3337 18.3327 14.6027 18.3327 10.0003Z' stroke='%231F895B' stroke-width='1.5'/%3E%3Cpath d='M6.66602 10.4167L8.74935 12.5L13.3327 7.5' stroke='%231F895B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11472_38764'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	}

	p {
		flex: 1;
	}
}

.product-card-tab-delivery-container__warning {
	display: flex;
	flex-flow: column;
	gap: 16px;
	padding: 24px;
	margin-top: 24px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		margin-top: 32px;
		border-radius: 32px;
	}
}

.product-card-tab-delivery-container__warning__title {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;

	@include desktop {
		gap: 12px;
	}

	svg {
		width: 24px;
		height: 24px;
		color: $color-warning-primary;
	}

	span {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.03em;

		@include desktop {
			font-size: 20px;
		}
	}
}

.product-card-tab-delivery-container__warning__text {
	font-size: 14px;
	line-height: 16px;

	@include desktop {
		font-size: 16px;
		line-height: 18px;
	}

	&--gray {
		color: $color-gray-md;
	}
}

.product-card-tab-delivery-container__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0px 18px;
	margin-top: 16px;
	border-radius: 14px;
	background-color: $color-green;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: $color-white;
	box-sizing: border-box;

	@include desktop {
		align-self: flex-start;
		min-height: 64px;
		padding: 0px 24px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;

		@include desktop {
			&:hover {
				background-color: $color-green-hover;
			}
		}
	}
}

// Совместимость

.product-card-tab-compatibility-container {
	display: flex;
	flex-flow: column;
	gap: 16px;

	@include mobile {
		padding: 0 16px;
	}

	@include desktop {
		gap: 24px;
	}
}

.product-card-tab-compatibility-container__title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 38px;
	}
}

.product-card-tab-compatibility-container__grid {
	display: flex;
	flex-flow: column;
	gap: 8px;

	@include desktop {
		gap: 16px;
	}
}

.product-card-tab-compatibility-container__block {
	display: flex;
	flex-flow: column;
	gap: 10px;
	padding: 18px;
	border-radius: 28px;
	background-color: $color-surface;

	@include desktop {
		gap: 12px;
		padding: 24px;
		border-radius: 32px;
	}
}

.product-card-tab-compatibility-container__block-title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 20px;
	}
}

.product-card-tab-compatibility-container__block-list {
	display: flex;
	flex-flow: row wrap;
	gap: 6px;

	@include desktop {
		gap: 10px;
	}
}

.product-card-tab-compatibility-container__block-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 14px;
	min-height: 32px;
	border-radius: 14px;
	background-color: $color-white;
	font-size: 14px;
	line-height: 16px;
	box-sizing: border-box;

	@include desktop {
		min-height: 36px;
		padding: 0px 16px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 18px;
	}
}