/* The basket carousel's own wrapper. The slider inside it is styled by the core, so this
   is only the room around it and the one state the row can be in. */

.nssp-cart-upsell {
	margin: 28px 0 0;
	/* Reserved so an empty answer does not move the Place Order button as the shopper
	   reaches for it. */
	min-height: 1px;
}

.nssp-cart-upsell[hidden] {
	display: none;
}

.nssp-cart-upsell__title {
	margin: 0 0 14px;
	font-size: 1.15em;
	line-height: 1.3;
}

/* While the classic checkout recalculates after an add, the row is not to be used: the
   order summary and the basket disagree until updated_checkout comes back, and a second
   add in that window is how a shopper ends up authorising the wrong amount. The script
   also sets `inert`, which is what actually takes the buttons out of reach; this is the
   look of it, and the fallback where `inert` is not understood. */
.nssp-cart-upsell.is-recalculating {
	opacity: .55;
	pointer-events: none;
}

.nssp-cart-upsell.is-recalculating * {
	cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
	.nssp-cart-upsell {
		transition: opacity .18s ease;
	}
}