@charset "UTF-8";






.mobileOnly {
	display: none !important;
}

#shopping-cart {
	justify-content: space-between;
}

.cart-and-checkout main#content h1 {
	font-size: 2.188em;
}




/* Product List */

.cart-info {
	flex: 1 1 auto;
	padding: 2.5em 5vw 4.375em;
}

.cart-info .wrap {
	max-width: 55em;
}

.cart-list {
	grid-template-columns: auto 1fr auto auto auto;
}

.product {
	align-items: start;
	gap: 0.5em 1.875em;
	grid-template-areas: 
		"image info price quantity subtotal"
		"image info price remove subtotal"
	;
	padding: 1em 1.875em;
}

.product:is(:hover, :focus-within) {
	border-color: var(--light-grey);
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
	z-index: 1;
}

.product .product-image {
    width: 6em;
}

.product > * {
	align-self: start;
}

.product > *:not(.product-image),
.product > *:not(.remove) {
	padding-top: 0.75em;
}

.product .product-name {
    min-height: 2.5rem;
}

.product .remove {
    background: none;
    border: 0;
    color: var(--bright-blue);
    font-size: 0.875em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem;
    padding: 0;
    text-align: center;
    width: 4.5rem;
	justify-self: end;
}

.product .remove:is(:hover, :focus-visible) {
    background: var(--red);
	color:#ffff;
}

.product .bottom {
	padding: 0 1.25rem 1rem;
}

.product .bottom .disclaimer {
	border-top: 1px dotted #DBE1E4;
	font-size: 0.875em;
	line-height: 1.25em;
	padding-top: 1rem;
}





/* Start Checkout */

.start-checkout {
	flex-shrink: 0;
	padding: 6.75rem 5vw 4.375em; 
	min-width: 30%;
}

.start-checkout .wrap {
    max-width: 21.875em;
    position: sticky;
    top: 2em;
}

.start-checkout form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-width: 16.875em;
}





/* Donation */

.product.donation {
	grid-template-columns: auto 1fr auto auto;
	grid-template-areas: 
		"image info price add-to-cart"
		"disclaimer disclaimer disclaimer disclaimer"
	;
	padding-bottom:  1.375rem;
}

.product.donation .product-option {
	max-width: 20.6875rem;
}






/* ======================================================== */
/* 			Order Confirmation / Thank You Page				*/			
/* ======================================================== */
#shopping-cart.order-confirmation {
	padding: 3.15em 1em 6.25em;
}

#shopping-cart.order-confirmation .order-view {
	align-items: flex-start;
	gap: 3.75em;
}

#shopping-cart.order-confirmation .cart-info {
	flex: 1 1 auto;
}

#shopping-cart.order-confirmation .info-block {
	padding-top: 1.5em;
}

#shopping-cart.order-confirmation .cart-brief {
	flex-shrink: 0;
}

#shopping-cart.order-confirmation .cart-brief table {
	min-width: 16.875em;
}

#shopping-cart.order-confirmation .form-grid .half {
	grid-column: span 6;
}

#shopping-cart.order-confirmation .form-grid .third {
	grid-column: span 4;
}

#shopping-cart.order-confirmation .form-grid .quarter {
	grid-column: span 3;
}





/* 1170px */
@media screen and (max-width: 73.125em) {
	.cart-list {
		grid-template-columns: auto auto 1fr auto auto;
	}
	.product {
		gap: 0.5em;
		grid-template-areas: 
			"image info info info remove"
			" . price quantity quantity subtotal"
		;
		padding: 1em;
	}
	.product > :not(.product-image), 
	.product > :not(.info),
	.product > :not(.remove) {
		padding-top: 0;
	}
	.product .product-image {
		width: 4em;
	}
	.product .product-name {
		min-height: 0;
		padding-top: 1em;
	}
	.product .quantity {
		align-self: center;
		justify-self: center;
	}
	.product .remove {
		align-self: center;
		justify-self: end;
	}
	.product.donation {
		grid-template-columns: auto auto 1fr;
		grid-template-areas: 
			"image info info"
			"image price add-to-cart"
			"disclaimer disclaimer disclaimer"
		;
	}
	.product.donation .add-to-cart {
		padding-top: 0.75em;
	}

	#shopping-cart.order-confirmation .product {
		gap: 0.5em 1em;
	}

	#shopping-cart.order-confirmation .info-block {
		padding-top: 1em;
	}

	#shopping-cart.order-confirmation .product-name {
		padding-top: 0;
	}
	
}







/* 1000px */
@media screen and (max-width: 62.5em) {
	.cart-info,
	.start-checkout {
		padding-inline: 1.5em;
	}
}








/* 950px */
@media screen and (max-width: 59.375em) {

	#shopping-cart.order-confirmation .form-grid .half,
	#shopping-cart.order-confirmation .form-grid .third {
		grid-column: span 12;
	}

	#shopping-cart.order-confirmation .form-grid .expiration .half,
	#shopping-cart.order-confirmation .form-grid .quarter {
		grid-column: span 6;
	}

}