.ppcp-r-select-box-wrapper {
	--box-border-color: var(--color-gray-200);
	--box-outline-color: transparent;
	--box-shadow: 0;

	margin: 0 auto;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.ppcp-r-select-box {
	border: 1px solid var(--box-border-color);
	outline: 1px solid var(--box-outline-color);
	box-shadow: var(--box-shadow);

	position: relative;
	width: 100%;
	border-radius: 4px;
	display: flex;
	gap: 16px;
	padding: 24px 16px 24px 16px;
	transition: all 0.3s;
	cursor: pointer;

	&:hover {
		--box-border-color: var(--color-gray-500);
		--box-shadow: var(--box-shadow-active-item);
	}

	&.ppcp--selected {
		--box-border-color: var(--color-blueberry);
		--box-outline-color: var(--color-blueberry);
		--box-shadow: var(--box-shadow-active-item);
	}

	.ppcp--box-content {
		display: flex;
		position: relative;
		pointer-events: none;

		*:not(a) {
			pointer-events: none;
		}

		a {
			pointer-events: all;
		}
	}

	.ppcp--box-title {
		@include font(14, 20, 700);
		color: $color-black;
		margin: 0 0 4px 0;
		display: block;
	}

	.ppcp--box-description {
		@include font(13, 20, 400);
		color: $color-gray-700;
		margin: 0;

		&:not(:last-child) {
			margin-block-end: 18px;
		}
	}

	.ppcp--box-details {
		position: relative;
		z-index: 1;
	}

	@media screen and (max-width: 480px) {
		gap: 16px;
		padding: 18px 16px;

		.ppcp--box-description {
			margin: 0 0 8px 0;
		}

		.ppcp--box-content {
			gap: 12px;
		}
	}

	@media screen and (max-width: 380px) {
		.ppcp--box-content > img {
			max-width: 32px;
		}
	}
}