/*
 * Mobile-first finishing layer for the public commercial site.
 *
 * Every rule is scoped to #cpp-marketing-page so it cannot affect restaurant
 * catalogues, checkout, tracking, dashboards or any operational product flow.
 * This file loads after each product theme and normalises the parts visitors
 * encounter first: hero hierarchy, calls to action, section rhythm and
 * non-essential floating controls.
 */

@media (max-width: 700px) {
	html { overflow-x: clip; }

	body#cpp-marketing-page.mk-page {
		overflow-x: clip;
	}

	body#cpp-marketing-page.mk-page .mk-shell {
		width: 100%;
		padding-right: clamp(18px, 5.1vw, 22px);
		padding-left: clamp(18px, 5.1vw, 22px);
	}

	body#cpp-marketing-page.mk-page .mk-header__inner {
		min-height: 68px;
	}

	body#cpp-marketing-page.mk-page .mk-brand img {
		width: 148px;
	}

	body#cpp-marketing-page.mk-page .mk-menu-button {
		width: 46px;
		height: 46px;
		margin-right: -8px;
	}

	/* Dark photographic heroes need a visible menu affordance before opening. */
	body#cpp-marketing-page.mk-editorial-home .mk-header:not(.is-open):not(.is-scrolled) .mk-menu-button span,
	body#cpp-marketing-page.mk-delivery2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-loyalty2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-menu2-page .mk-header:not(.is-open):not(.is-scrolled) .mk-menu-button span,
	body#cpp-marketing-page.mk-pos2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-counter2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-orderscreen-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-kds2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-team2-page .mk-header:not(.is-open) .mk-menu-button span,
	body#cpp-marketing-page.mk-customers2-page .mk-header:not(.is-open) .mk-menu-button span {
		background: #fff !important;
		box-shadow: 0 1px 12px rgba(0, 0, 0, .2);
	}

	/* One compact first screen instead of a different near-full-screen hero per product. */
	body#cpp-marketing-page.mk-page .mk-delivery2-hero,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero,
	body#cpp-marketing-page.mk-page .mk-customers2-hero,
	body#cpp-marketing-page.mk-page .mk-kds2-hero,
	body#cpp-marketing-page.mk-page .mk-team2-hero,
	body#cpp-marketing-page.mk-page .mk-reports2-hero,
	body#cpp-marketing-page.mk-page .mk-pos2-hero,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero,
	body#cpp-marketing-page.mk-page .mk-counter2-hero,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero,
	body#cpp-marketing-page.mk-page .mk-menu2-hero {
		min-height: clamp(620px, 76svh, 680px) !important;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero__content,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero__content,
	body#cpp-marketing-page.mk-page .mk-customers2-hero__content,
	body#cpp-marketing-page.mk-page .mk-kds2-hero__content,
	body#cpp-marketing-page.mk-page .mk-team2-hero__content,
	body#cpp-marketing-page.mk-page .mk-reports2-hero__content,
	body#cpp-marketing-page.mk-page .mk-pos2-hero__content,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero__content,
	body#cpp-marketing-page.mk-page .mk-counter2-hero__content,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero__content,
	body#cpp-marketing-page.mk-page .mk-menu2-hero__content {
		align-self: end;
		padding-top: 104px !important;
		padding-bottom: 34px !important;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero h1,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero h1,
	body#cpp-marketing-page.mk-page .mk-customers2-hero h1,
	body#cpp-marketing-page.mk-page .mk-kds2-hero h1,
	body#cpp-marketing-page.mk-page .mk-team2-hero h1,
	body#cpp-marketing-page.mk-page .mk-reports2-hero h1,
	body#cpp-marketing-page.mk-page .mk-pos2-hero h1,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero h1,
	body#cpp-marketing-page.mk-page .mk-counter2-hero h1,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero h1,
	body#cpp-marketing-page.mk-page .mk-menu2-hero h1 {
		max-width: 100%;
		margin-top: 15px;
		margin-bottom: 18px;
		font-size: clamp(36px, 10.15vw, 42px) !important;
		font-weight: 550 !important;
		font-stretch: 96%;
		letter-spacing: -.047em;
		line-height: 1.01 !important;
		text-wrap: balance;
		overflow-wrap: normal;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-customers2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-kds2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-team2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-reports2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-pos2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-counter2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero__content > p,
	body#cpp-marketing-page.mk-page .mk-menu2-hero__content > p {
		font-size: 15px !important;
		line-height: 1.52;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-customers2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-kds2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-team2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-reports2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-pos2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-counter2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero .mk-actions,
	body#cpp-marketing-page.mk-page .mk-menu2-hero .mk-actions {
		gap: 7px;
		margin-top: 23px;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-customers2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-kds2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-team2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-reports2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-pos2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-counter2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero .mk-button,
	body#cpp-marketing-page.mk-page .mk-menu2-hero .mk-button {
		min-height: 51px;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-customers2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-kds2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-team2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-reports2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-pos2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-counter2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero__content > small,
	body#cpp-marketing-page.mk-page .mk-menu2-hero__content > small {
		margin-top: 13px;
		font-size: 10px;
		line-height: 1.4;
	}

	/* Home has two actions and proof points, so it gets a little more room. */
	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero {
		min-height: clamp(675px, 82svh, 720px) !important;
		padding: 82px 0 22px !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__grid {
		min-height: 0 !important;
		align-items: center !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy {
		padding: 10px 0 20px !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy h1 {
		margin: 15px auto 18px;
		font-size: clamp(38px, 10.6vw, 45px) !important;
		font-weight: 550 !important;
		font-stretch: 96%;
		letter-spacing: -.05em;
		line-height: 1 !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy h1 span {
		font-weight: 600 !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy > p {
		max-width: 345px;
		margin-bottom: 22px;
		font-size: 15px !important;
		line-height: 1.52;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy .mk-actions {
		gap: 9px;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy .mk-button {
		min-height: 51px;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__trust {
		display: flex;
		justify-content: center;
		gap: 7px 14px;
		margin-top: 18px;
		font-size: 11px;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-order-card {
		display: none;
	}

	/* Canal propio keeps its photographic breathing room, but not a full screen. */
	body#cpp-marketing-page.mk-channel2-page .mk-channel2-hero {
		min-height: 660px !important;
	}

	body#cpp-marketing-page.mk-channel2-page .mk-channel2-hero__content {
		padding-top: 246px !important;
		padding-bottom: 38px !important;
	}

	body#cpp-marketing-page.mk-channel2-page .mk-channel2-hero h1,
	body#cpp-marketing-page.mk-tables2-page .mk-tables2-hero h1 {
		font-size: clamp(36px, 10.15vw, 42px) !important;
		font-weight: 550 !important;
		font-stretch: 96%;
		letter-spacing: -.047em;
		line-height: 1.01 !important;
	}

	body#cpp-marketing-page.mk-tables2-page .mk-tables2-hero {
		padding: 32px 0 50px !important;
	}

	/* Product navigation remains useful without stealing vertical space. */
	body#cpp-marketing-page.mk-page [class*="-subnav"] > div {
		min-height: 54px !important;
		scrollbar-width: none;
	}

	body#cpp-marketing-page.mk-page [class*="-subnav"] > div > strong {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	body#cpp-marketing-page.mk-page [class*="-subnav"] > div::-webkit-scrollbar {
		display: none;
	}

	/* A consistent editorial rhythm makes long product pages easier to scan. */
	body#cpp-marketing-page.mk-page:not(.mk-page--home):not(.mk-links-page) main > section:not([class*="hero"]):not([class*="subnav"]) {
		padding-top: clamp(58px, 15vw, 68px) !important;
		padding-bottom: clamp(58px, 15vw, 68px) !important;
	}

	body#cpp-marketing-page.mk-page:not(.mk-links-page) main > section h2 {
		font-size: clamp(32px, 8.9vw, 38px) !important;
		font-weight: 550 !important;
		font-stretch: 96%;
		letter-spacing: -.043em;
		line-height: 1.04 !important;
		text-wrap: balance;
	}

	body#cpp-marketing-page.mk-page:not(.mk-links-page) main > section h3 {
		line-height: 1.12;
		text-wrap: balance;
	}

	/* The warm, light photo treatments need a stable label background on mobile. */
	body#cpp-marketing-page.mk-reports2-page .mk-reports2-eyebrow,
	body#cpp-marketing-page.mk-feedback2-page .mk-feedback2-eyebrow {
		width: max-content;
		max-width: 100%;
		margin-bottom: 3px;
		padding: 6px 9px;
		border: 1px solid rgba(74, 53, 42, .1);
		border-radius: 999px;
		background: rgba(255, 252, 246, .76);
		box-shadow: 0 8px 24px rgba(41, 29, 23, .05);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	/* Conversion stays reachable; the personal credit no longer covers copy or CTAs. */
	body#cpp-marketing-page.mk-page:not(.mk-links-page) .mk-author-signature {
		position: fixed !important;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom));
		display: flex !important;
		width: max-content;
		max-width: calc(100% - 32px);
		min-height: 42px;
		margin: 0;
		padding: 5px 11px 5px 5px;
		white-space: nowrap;
		transform: none !important;
	}

	body#cpp-marketing-page.mk-page:not(.mk-links-page) .mk-author-signature img {
		width: 31px;
		height: 31px;
	}

	body#cpp-marketing-page.mk-page .mk-whatsapp {
		right: 14px !important;
		bottom: max(68px, calc(env(safe-area-inset-bottom) + 68px)) !important;
		width: 50px !important;
		height: 50px !important;
		min-height: 50px !important;
		padding: 0 !important;
		border: 2px solid rgba(255, 255, 255, .92);
		border-radius: 50%;
	}

	body#cpp-marketing-page.mk-page .mk-whatsapp span {
		display: none !important;
	}

	body#cpp-marketing-page.mk-page .mk-whatsapp i {
		margin: auto;
		font-size: 19px;
	}
}

@media (max-width: 390px) {
	body#cpp-marketing-page.mk-page .mk-delivery2-hero,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero,
	body#cpp-marketing-page.mk-page .mk-customers2-hero,
	body#cpp-marketing-page.mk-page .mk-kds2-hero,
	body#cpp-marketing-page.mk-page .mk-team2-hero,
	body#cpp-marketing-page.mk-page .mk-reports2-hero,
	body#cpp-marketing-page.mk-page .mk-pos2-hero,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero,
	body#cpp-marketing-page.mk-page .mk-counter2-hero,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero,
	body#cpp-marketing-page.mk-page .mk-menu2-hero {
		min-height: 610px !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero {
		min-height: 665px !important;
	}

	body#cpp-marketing-page.mk-page .mk-delivery2-hero h1,
	body#cpp-marketing-page.mk-page .mk-feedback2-hero h1,
	body#cpp-marketing-page.mk-page .mk-customers2-hero h1,
	body#cpp-marketing-page.mk-page .mk-kds2-hero h1,
	body#cpp-marketing-page.mk-page .mk-team2-hero h1,
	body#cpp-marketing-page.mk-page .mk-reports2-hero h1,
	body#cpp-marketing-page.mk-page .mk-pos2-hero h1,
	body#cpp-marketing-page.mk-page .mk-orderscreen-hero h1,
	body#cpp-marketing-page.mk-page .mk-counter2-hero h1,
	body#cpp-marketing-page.mk-page .mk-loyalty2-hero h1,
	body#cpp-marketing-page.mk-page .mk-menu2-hero h1,
	body#cpp-marketing-page.mk-channel2-page .mk-channel2-hero h1,
	body#cpp-marketing-page.mk-tables2-page .mk-tables2-hero h1 {
		font-size: 36px !important;
	}

	body#cpp-marketing-page.mk-editorial-home .mk-editorial-hero__copy h1 {
		font-size: 38px !important;
	}
}