#custom-cart-popup {

	& {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		display: none;
	}

	& .popup-content {
		background: white;
		width: 90%;
		display: flex;
		flex-direction: column;
		border-radius: 25px;
		max-width: 1000px;
		overflow: hidden;
	}

	.popup-header {
		background: #E6A6A1;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		color: white;
	}

	.popup-header .close-popup {
		font-size: 20px;
		cursor: pointer;
	}

	.popup-body {
		display: flex;
	}

	& .popup-left {
		width: 60%;
		padding: 30px;
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: auto;
		grid-template-areas: "img info" "related related";
		gap: 10px;
	}

	& h2, & h3 {
		font-family: inherit;
		color:#333;
	}

	& p, & button {
		margin-bottom: 0;
	}

	& .popup-left .product-image {
		width: 100%;
		border-radius: 5px;
		grid-area: img;
	}

	& .popup-left .product-info {
		grid-area: info;
	}

	& h3 {
		grid-area: related;
	}

	& .size-color {
		font-size: 14px;
		color: #333;
		grid-area: size-color;
		align-self: start;
	}

	& .related-products {
		margin-top: 10px;
		grid-area: related;
	}

	& .related-items {
		display: flex;
		gap: 10px;
	}

	& .related-items .related-item {
		max-width: 150px;
		text-align: center;
		flex: 1;
	}

	.related-item img {
		width: 100%;
		border-radius: 5px;
	}

	& .popup-right {
		width: 40%;
		background: #D1E5E2;
		padding: 30px;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
	}

	& .button {
		margin:0 !important;
		width: 100%;
	}

}

@media (max-width: 849px) {
	#custom-cart-popup {

		& .popup-body {
			flex-direction: column;
		}

		& .popup-left,
		& .popup-right {
			width: 100%;
			padding: 15px;
			gap: 10px;
		}

		& .popup-left .description{
			display:none;
		}

		& .related-products {
			margin-top: none;
		}

		& .related-items .related-item {
			max-width: 100px;
			font-size: 13px;
			line-height: 1.3;
		}
		
		& .popup-right h3 {
			margin:0;
		}

}

}