/* Preserve the existing desktop/tablet grid participation. */
.cart-scroll-region {
	display: contents;
}

/* Cart and checkout viewport fixes are intentionally limited to portrait phones. */
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
	body.cart-open,
	body.checkout-open {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	.cart-overlay,
	.cart-overlay.open,
	.cart-backdrop {
		position: fixed !important;
		inset: 0 !important;
		z-index: 5000 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: 100vh !important;
		height: 100dvh !important;
		overflow: hidden !important;
	}

	.cart-drawer,
	.cart-panel {
		top: 0 !important;
		bottom: auto !important;
		z-index: 5001 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		padding-top: max(12px, env(safe-area-inset-top)) !important;
		padding-right: max(12px, env(safe-area-inset-right)) !important;
		padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
		padding-left: max(12px, env(safe-area-inset-left)) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		overscroll-behavior: contain !important;
	}

	.cart-scroll-region {
		display: block;
		flex: 1 1 auto;
		min-height: 0 !important;
		max-height: none !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.cart-items {
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.cart-drawer-head,
	.cart-totals,
	.cart-drawer-foot,
	.cart-checkout-message {
		flex: 0 0 auto;
		min-width: 0;
	}

	.cart-referral-card {
		max-height: none !important;
		overflow: visible !important;
	}

	.cart-drawer-foot {
		grid-template-columns: 1fr !important;
	}

	.cart-drawer-foot .button,
	.cart-qty-btn,
	.cart-close {
		touch-action: manipulation;
	}

	.checkout-modal {
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: auto !important;
		max-height: 100dvh !important;
		padding-top: max(16px, env(safe-area-inset-top)) !important;
		padding-right: max(12px, env(safe-area-inset-right)) !important;
		padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
		padding-left: max(12px, env(safe-area-inset-left)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch;
		transform: none !important;
		border-radius: 0 !important;
	}

	.checkout-modal.open {
		transform: none !important;
	}
}

/* Portrait tablets inherit the existing inset modal, but must retain a viewport cap. */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
	.checkout-modal {
		box-sizing: border-box !important;
		max-height: 100dvh !important;
		padding-top: max(16px, env(safe-area-inset-top)) !important;
		padding-right: max(16px, env(safe-area-inset-right)) !important;
		padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
		padding-left: max(16px, env(safe-area-inset-left)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch;
	}
}