#cart-modal {
	left: unset; right: 0;
	max-width: 700px;
	
	background-color: #FFF;
	clip-path: inset(0 0 0 100%);
}
.cart-open #cart-modal {
    opacity: 1;
	clip-path: inset(0 0 0 0);
    pointer-events: auto;
}
@media (min-width: 900px)	 { #cart-modal { padding: 0 50px; } }
@media (max-width: 899.99px) { #cart-modal { padding: 0 25px; } }

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

#cart-modal > .modal-wrapper {
    display: flex; min-height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
	
	transform: translateY(50px);
	opacity: 0;
	
	transition:
		transform .4s cubic-bezier(0.38, 0.005, 0.215, 1) .2s,
		opacity	  .4s cubic-bezier(0.38, 0.005, 0.215, 1) .2s;
}
.cart-open #cart-modal > .modal-wrapper {
	transform: translateY(0);
	opacity: 1;
}

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

#cart-modal > .modal-wrapper > .inner-wrapper {
	width: 100%;
	text-align: left;
}

#cart-modal > .modal-wrapper > .inner-wrapper > .header {
	position: sticky; top: 0px; z-index: 1;
	padding: 45px 0 20px;
	
	background-color: #FFF;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .header > .close-btn {
	position: absolute; right: 0;
	display: block;
	
	background-image: url("../../images/icons/close.svg");
	background-position: center;
	background-size: 20px auto;
	background-repeat: no-repeat;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .header > .title {
	margin: 0;
	font-weight: 400;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .header > .title:after { content: " (" attr(data-count) ")"; }
@media (min-width: 900px) {
	#cart-modal > .modal-wrapper > .inner-wrapper > .header > .close-btn {
		height: 40px; width: 40px;
	}
	#cart-modal > .modal-wrapper > .inner-wrapper > .header > .title {
		padding-right: 60px;
		
		line-height: 40px;
		font-size: 32px;
	}
}
@media (max-width: 899.99px) {
	#cart-modal > .modal-wrapper > .inner-wrapper > .header > .close-btn {
		height: 30px; width: 30px;
	}
	#cart-modal > .modal-wrapper > .inner-wrapper > .header > .title {
		padding-right: 50px;
		
		line-height: 30px;
		font-size: 24px;
	}
}

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

#cart-modal > .modal-wrapper > .inner-wrapper > .products {}
#cart-modal > .modal-wrapper > .inner-wrapper > .products:empty {
	font-size: 16px;
	font-weight: 400;
	color: #666;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products:empty:after {
	content: attr(data-empty);
}

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

#cart-modal > .modal-wrapper > .inner-wrapper > .products > .product {
	padding: 25px 0;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .product:not(:last-child) {
	border-bottom: solid 1px rgba(0,0,0,.2);
}

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

#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting {
	position: relative;
	display: flex; min-height: 150px;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 175px;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .image {
	position: absolute; top: 25px; left: 0;
	height: calc(100% - 50px); width: 150px;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .title {
	font-size: 16px;
	font-weight: 400;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .by {}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .by > span { font-weight: 400; }
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .options {
	width: 100%;
	margin: 20px 0;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .options > .option {
	display: flex;
	flex-direction: row;
	column-gap: 25px;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .options > .option > .label {
	flex: 0 0 50px;
	font-weight: 400;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .products > .painting > .price {
	margin-top: auto;
	
	font-size: 16px;
	font-weight: 400;
}

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

#cart-modal > .modal-wrapper > .inner-wrapper > .footer {
	position: sticky; bottom: 0px; z-index: 1;
	background-color: #FFF;
}
@media (min-width: 900px)	 { #cart-modal > .modal-wrapper > .inner-wrapper > .footer { padding: 20px 0 45px; } }
@media (max-width: 899.99px) { #cart-modal > .modal-wrapper > .inner-wrapper > .footer { padding: 20px 0 25px; } }

#cart-modal > .modal-wrapper > .inner-wrapper > .footer > .total {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px 0;
	
	border-top: solid 1px rgba(0,0,0,.2);
	
	font-size: 16px;
}
#cart-modal > .modal-wrapper > .inner-wrapper > .footer > .total > .label { font-weight: 400; }
#cart-modal > .modal-wrapper > .inner-wrapper > .footer > .total > .value {}
#cart-modal > .modal-wrapper > .inner-wrapper > .footer > .cta-btn { display: block; }
#cart-modal > .modal-wrapper > .inner-wrapper > .footer > .cta-btn.disabled {
	pointer-events: none;
	opacity: .5;
}