/* Mobile cards stack vertically so media and copy never compete for width. */
@media (max-width: 760px) {
	body:has(.kbm-page) {
		padding-bottom: 92px;
	}

	.kbm-menu-grid {
		gap: 22px;
	}

	.kbm-menu-card {
		display: flex;
		flex-direction: column;
		min-width: 0;
		border-radius: 18px;
	}

	.kbm-menu-card__image {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.kbm-menu-card__body {
		width: 100%;
		min-width: 0;
		min-height: 0;
		box-sizing: border-box;
		padding: 22px 20px 26px;
	}

	.kbm-menu-card__body h3 {
		font-size: clamp(24px, 7vw, 30px);
	}

	.kbm-menu-card__body > span {
		font-size: 13px;
	}

	.kbm-footer {
		padding-bottom: 120px;
	}
}

/* On narrow phones the order control becomes a compact pill instead of covering the card. */
@media (max-width: 560px) {
	.kbm-mobile-bar {
		left: auto;
		right: 12px;
		bottom: max(10px, env(safe-area-inset-bottom));
		width: auto;
		min-height: 0;
		padding: 4px;
	}

	.kbm-mobile-bar > span {
		display: none;
	}

	.kbm-mobile-bar .kbm-button {
		min-height: 48px;
		padding-inline: 20px;
		font-size: 12px;
	}
}