.cartItem {
	display:grid;
	grid-template-columns: 150px repeat(6, 1fr);
	grid-auto-rows: minmax(10px, auto);
	grid-template-areas:
	  "picture name name name name name name"
	  "picture amount amount price price total total"
	  "picture none none none none none none";
	margin-bottom:1em;
}

.cartItemPicture {
	grid-area:picture;
}

.cartItemPicture img {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width:100%;
	margin:0;
}

.cartItemAmount {
	grid-area:amount;
	padding:.5em;
}

.cartItemAmount input {
	width:80%;
}

.cartItemAmount svg {
	vertical-align: middle;
}

.cartItemPiceActual {
	display: block;
}

.cartItemTotal .cartItemPiceActual {
	font-weight:bold;
}

.cartItemName {
	grid-area:name;
}

.cartItemName h2 {
	border-top-left-radius: 0;
	padding:.5em;
}

.cartItemPrice {
	grid-area:price;
	text-align:right;
	padding:.5em;
}

.cartItemTotal {
	grid-area:total;
	text-align:right;
	padding:.5em;
}

.cartSum {
	margin-bottom:1em;
}

.cartSum h2 {
	padding:.5em;
}


#cartPreview {
	width:150px;
	border-left:1px solid #ccc;
}

.cartPreviewItem {
	margin-bottom:1em;
	margin:.6rem;
	border:1px solid #ccc;
	border-radius:5px;
	display:grid;
	box-sizing: border-box;
	grid-template-columns: 100%;
	grid-auto-rows: minmax(10px, auto);
	grid-template-areas:
	  "picture"
	  "info";
}

.cartPreviewItemImage {
	grid-area:picture;
}

.cartPreviewItemInfo {
	grid-area:info;
	padding:.5em;
}

.cartPreviewHeader h2 {
	margin:0;
	padding:.6rem;
}

.cartPreviewHeaderCheckout {
	margin:.6rem;
	width:calc(100% - 1.2rem);
	max-width:130px;
}

.cartPreviewHeaderOpenClose {
	padding:.6rem;
	text-align:center;
	max-width:150px;
}

.cartPreviewHeaderTotal {
	flex:1;
	font-size:80%;
	padding-left:.6rem;
}

.cartPreviewHeaderClose {
	display:none;
}

#showCartPreview:checked ~ #cartPreview .cartPreviewHeaderOpen {
	display:none;
}

#showCartPreview:checked ~ #cartPreview .cartPreviewHeaderClose {
	display:inline;
}

@media (max-width: 750px) {
	#cartPreview {
		position:fixed;
		bottom:0px;
		left:0px;
		width:100%;
		height:50px;
		background-color:white;
		border:0;
		border-top: 1px solid #ccc;
		box-shadow:var(--shadow-elevation-medium);
		transition: height 300ms;
	}
	
	.cartPreviewHeader {
		display:flex;
		align-items:center;
		height: 50px;
	}
	
	.cartPreviewItem {
		grid-template-columns: 80px repeat(3, 1fr);
		grid-template-areas:
		  "picture info info info";
	}

	.cartPreviewList {
		display:flex;
		flex-direction: column;
		overflow:auto;
		max-height:calc(60vh - 50px - 1px);
	}
	
	#showCartPreview:checked ~ #cartPreview {
		height:60vh;
		transition: height 300ms ease-out;
	}
}