@charset "UTF-8";





.desktopOnly {
	display: none !important;
}

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

#shopping-cart {
	flex-direction: column;
}

#shopping-cart > * {
	padding: 2em 1.25em;
}






/* Product List */

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

.product {
	grid-template-areas: 
		"image info remove"
		". price price"
		"quantity quantity subtotal"
	;
	padding: 1em;
}

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

.product .remove {
    border: 0;
    color: transparent;
    height: 2.5rem;
    overflow: hidden;
    width: 2.5rem;
    display: flex;
    justify-content: center;
	justify-self: end;
	margin-top: 0.125rem;
    padding: 0;	
	position: relative;
}

.product .remove:before {
    background: var(--red);
    content: "";
    display: block;
    height: 1rem;
    left:50%;
    mask-image: var(--x-circle);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
}

.product .info-block {
	padding-top: 0.75em;
}

.product .price:not(.subtotal) {
	display: block;
	font-size: 0.875em;
	line-height: 1.25em;
}

.product .product-option {
	margin-bottom: 0.25rem;
}

.product .price:not(.subtotal) {
	margin-bottom: 1rem;
}

.product .quantity {
	align-items: center;
    align-items: center;
    display: grid;
	gap: 0 0.75em;
	grid-template-columns: 3.75em 1fr;
	margin: 0 -1rem;
	border-top: 1px solid var(--border-color);
	padding: 1rem 0 0 1rem;
}

.product .quantity span {
	justify-self: center;
}

.product .subtotal {
	margin-right: -1rem;
	border-top: 1px solid var(--border-color);
	padding: 1rem 1rem 0 0;
}


/* Donation */
.product.donation {
	gap: 1em 0.5em;
	grid-template-columns: auto 1fr 1fr 1fr;
	grid-template-areas: 
		"image info info info"
		"price price add-to-cart add-to-cart"
		"disclaimer disclaimer disclaimer disclaimer"
	;
}

.product.donation .price {
	line-height: 2.5rem;
	font-size: 1rem;
	margin: 0;
}

.product.donation .add-to-cart button {
	width: 100%;
}






/* Start Checkout */

.start-checkout {
    border-top: 2px solid var(--border-color);
}





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

#shopping-cart.order-confirmation .order-view {
	flex-direction: column;
	gap: 2em;
}


#shopping-cart.order-confirmation .form-grid {
	gap: 0.5em;
}

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

#shopping-cart.order-confirmation .thank-you-text {
	margin-top: 1.875em;
}


/* 350px */
@media screen and (max-width: 21.875em) {
	.product .product-name {
		font-size: 1em;
		line-height: 1em;
	}

}