/*
 * Commercial-site visual QA guardrails.
 * Keep these rules isolated from restaurant ordering and operational screens.
 */

/* The base button component uses an !important foreground. Reassert the
 * intentional foregrounds for dark, product-specific conversion sections. */
body#cpp-marketing-page .mk-giftcards2-final .mk-button:not(.mk-button--secondary) {
	color: #321821 !important;
}

body#cpp-marketing-page .mk-vouchers2-final .mk-button:not(.mk-button--secondary) {
	color: #303728 !important;
}

body#cpp-marketing-page .mk-wallet2-final .mk-button:not(.mk-button--secondary) {
	color: #0d2840 !important;
}

body#cpp-marketing-page .mk-giftcards2-final .mk-button--secondary,
body#cpp-marketing-page .mk-vouchers2-final .mk-button--secondary,
body#cpp-marketing-page .mk-wallet2-final .mk-button--secondary,
body#cpp-marketing-page .mk-tables2-final .mk-button--secondary {
	color: #fff !important;
}

/* Floating conversion and social controls keep readable contrast and a
 * comfortable touch area at every viewport. */
body#cpp-marketing-page .mk-whatsapp:not(.mk-editorial-home .mk-whatsapp) {
	background: #08756c;
}

body#cpp-marketing-page .mk-whatsapp:not(.mk-editorial-home .mk-whatsapp):hover {
	background: #065c55;
}

body#cpp-marketing-page .mk-footer__social a {
	height: 44px;
	min-height: 44px;
	min-width: 44px;
	width: 44px;
}

body#cpp-marketing-page.mk-links-page .links-bio__social a {
	min-height: 44px;
	min-width: 44px;
}

/* Keyboard focus remains visible without producing a white rectangular patch
 * over dark product artwork. */
body#cpp-marketing-page :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid #28c7b3;
	outline-offset: 3px;
}

/* Product-local navigation uses a soft tinted surface instead of the white
 * strip/tile that visually cut into the individual product hero. */
body#cpp-marketing-page nav[class*="-subnav"] {
	border-block-color: rgba(20, 67, 58, .12);
	background: rgba(239, 244, 241, .96);
}

body#cpp-marketing-page nav[class*="-subnav"] > .mk-shell > div > a:not(.mk-button) {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
	padding-inline: 7px;
}

@media (max-width: 720px) {
	/* Product section navigation is horizontal on phones. Every label is a
	 * proper touch target and the title no longer becomes a detached white tile. */
	body#cpp-marketing-page nav[class*="-subnav"] > .mk-shell > strong {
		position: static !important;
		padding-right: 0 !important;
		background: transparent !important;
	}

}