#cart {
	display: flex;
	flex-direction: row;
	
	background-color: #F4F4F4;
}

/*-----------------------------------------------------------------------------------------*/

#cart > .checkout {
	flex: 0 0 450px;
	padding: calc(var(--nav-padding) * 2 + var(--home-btn-height) + 50px) 0 50px;
	
	background-color: #FFF;
	box-shadow: inset 1px 0 0 rgba(0,0,0,.1);
}

#cart > .checkout > .payment {
	padding: 0 50px 50px;
	border-bottom: solid 1px rgba(0,0,0,.1);
}
#cart > .checkout > .payment > .options {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 10px;
	margin-bottom: 30px;
}
#cart > .checkout > .payment > .options > .option {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#cart > .checkout > .payment > .options > .option:before {
	content: attr(data-label);
	display: inline-block;
}
#cart > .checkout > .payment > .options > .option:not(:last-child):before {
	font-weight: 400;
}
#cart > .checkout > .payment > .options > .option:last-child {
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 500;
}
#cart > .checkout > .payment > .submit-btn { display: block; }

#cart > .checkout > .info-links {}
#cart > .checkout > .info-links > .info-link {
	position: relative;
	display: flex; height: 70px; width: 100%;
	flex-direction: row;
	align-items: center;
	column-gap: 30px;
	padding: 0 50px;
	
	border-bottom: solid 1px rgba(0,0,0,.1);
	
	font-size: 16px;
	font-weight: 400;
}
#cart > .checkout > .info-links > .info-link:before {
	content: '';
	display: block; height: 22px; flex: 0 0 22px;
	
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#cart > .checkout > .info-links > .delivery:before { background-image: url("../../images/icons/delivery.svg"); }
#cart > .checkout > .info-links > .security:before { background-image: url("../../images/icons/security.svg"); }

/*-----------------------------------------------------------------------------------------*/

#cart > .products {
	flex: 1;
	padding: calc(var(--nav-padding) * 2 + var(--home-btn-height) + 50px) 50px 50px;
}

#cart > .products > header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 20px;
	margin-bottom: 30px;
}
#cart > .products > header > .title {
	margin: 0;
	
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 400;
}
#cart:not(.empty) > .products > header > .title:after { content: " (" attr(data-count) ")"; }
#cart > .products > header > .cta-link {
	font-size: 16px;
	font-weight: 400;
}

#cart > .products > .list {}
#cart > .products > .list:empty:after {
	content: attr(data-empty);
	display: flex; min-height: 500px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	font-size: 36px;
	font-weight: 400;
	color: #CCC;
}
#cart > .products > .list > .product:not(:last-child) { margin-bottom: 20px; }

/*-----------------------------------------------------------------------------------------*/

#cart > .products > .list > .painting {
	display: grid; min-height: 500px;
	grid-template-areas:
		'thumbnail details details'
		'thumbnail remove price';
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 20px;
	
	background-color: #FFF;
}
#cart > .products > .list > .painting > .thumbnail {
	position: relative;
	grid-area: thumbnail;
	height: 100%;
	
	background-color: #F4F4F4;
}
#cart > .products > .list > .painting > .thumbnail > .media-element {
	position: absolute; top: 75px; left: 75px;
	height: calc(100% - 150px); width: calc(100% - 150px);
	
	filter: drop-shadow(10px 10px 5px rgba(0,0,0,.3));
}
#cart > .products > .list > .painting > .thumbnail > .media-element img { object-fit: contain; }
#cart > .products > .list > .painting > .details {
	grid-area: details;
}
#cart > .products > .list > .painting > .details > .title {
	margin: 0 0 10px;
	
	font-size: 20px;
	font-weight: 400;
}
#cart > .products > .list > .painting > .details > .by {}
#cart > .products > .list > .painting > .details > .by > .generic-link { font-weight: 400; }
#cart > .products > .list > .painting > .details > .summary { margin-bottom: 25px; }
#cart > .products > .list > .painting > .details > .options {
	padding: 10px 20px;
	margin: 0 0 auto;
	background-color: #F4F4F4;
}
#cart > .products > .list > .painting > .details > .options > .option { line-height: 24px; }
#cart > .products > .list > .painting > .details > .options > .option:before {
	content: attr(data-label) ' ';
	font-weight: 400;
}
#cart > .products > .list > .painting > .remove-btn {
	grid-area: remove;
	font-weight: 400;
}
#cart > .products > .list > .painting > .price {
	grid-area: price;
	justify-self: end;
	font-weight: 400;
}