.woocommerce-cart .db-booking-cart-item dl.variation,
.woocommerce-checkout .db-booking-cart-item dl.variation {
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 0.45em;
	row-gap: 0.15em;
	align-items: baseline;
	margin: 0.5em 0 0;
}

.woocommerce-cart .db-booking-cart-item dl.variation dt,
.woocommerce-cart .db-booking-cart-item dl.variation dd,
.woocommerce-checkout .db-booking-cart-item dl.variation dt,
.woocommerce-checkout .db-booking-cart-item dl.variation dd {
	float: none !important;
	clear: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-cart .db-booking-cart-item dl.variation dd p,
.woocommerce-checkout .db-booking-cart-item dl.variation dd p {
	margin: 0 !important;
}

@media (min-width: 783px) {
	.woocommerce-checkout .db-booking-cart-item dl.variation {
		grid-template-columns: max-content max-content;
		width: max-content;
		max-width: none;
	}

	.woocommerce-checkout .db-booking-cart-item dl.variation dd {
		white-space: nowrap;
	}

	/* The deposit note is a full sentence; keep it wrapping even on the desktop checkout grid. */
	.woocommerce-checkout .db-booking-cart-item dl.variation dd .db-hotel-deposit-note {
		white-space: normal;
	}
}

/*
 * Informational security-deposit note (plan §27.5-U2). Rendered on its own line beneath the
 * "Security deposit" label, muted and full-width, so the "collected on arrival…" sentence reads
 * as a distinct block rather than running on next to the amount. Works on both the classic cart
 * and the Cart/Checkout blocks (this stylesheet loads on both); the class is unique to this row.
 */
.db-hotel-deposit-note {
	display: block;
	white-space: normal;
	margin-top: 0.15em;
	font-size: 0.9em;
	opacity: 0.85;
}