/* Final spacing and colour pass for MBK's retail homepage. */
html,
body,
.mbk-home {
	color-scheme: only light;
}

:root {
	--mbk-red: #e31b23;
	--mbk-yellow: #ffb703;
	--mbk-charcoal: #1a1b1c;
	--mbk-ink: #171819;
	--mbk-paper: #fff3df;
	--mbk-wrap: 1320px;
}

.mbk-home {
	background: #fff;
	color: var(--mbk-ink);
}

.mbk-utility-bar {
	background: #101213;
}

.mbk-utility-bar .mbk-wrap {
	padding: 0.72rem 0;
}

.mbk-hero {
	min-height: 34rem;
	background: #fff8ed;
}

.mbk-hero__grid {
	min-height: 34rem;
	grid-template-columns: 48% 52%;
}

/* Keep the photo comfortably clear of the largest headline at 100% desktop zoom. */
@media (min-width: 921px) {
	.mbk-hero::after {
		inset: 0 0 0 53%;
	}
}

.mbk-hero__copy {
	max-width: 35rem;
	padding: clamp(4rem, 5vw, 5.6rem) 3.4rem clamp(4rem, 5vw, 5.6rem) clamp(3.8rem, 5vw, 6rem);
}

.mbk-eyebrow {
	margin-bottom: 0.9rem;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
}

.mbk-hero h1 {
	max-inline-size: min(100%, 31.5rem);
	margin-bottom: 1.25rem;
	font-size: clamp(2.55rem, 2.75vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.048em;
}

.mbk-hero__copy > p:not(.mbk-eyebrow) {
	max-width: 29rem;
	margin-bottom: 1.9rem;
	font-size: clamp(0.98rem, 1.05vw, 1.08rem);
	line-height: 1.65;
}

.mbk-button {
	min-height: 3.25rem;
	padding-inline: 1.8rem;
	border-radius: 0.3rem;
	box-shadow: 0 8px 18px rgba(227, 27, 35, 0.16);
}

.mbk-button--yellow {
	box-shadow: 0 8px 18px rgba(255, 191, 0, 0.18);
}

.mbk-hero::before {
	width: 3.8rem;
	opacity: 0.9;
}

.mbk-preview-hero-image {
	inset: 0 0 0 53%;
	width: 47%;
	object-position: center;
}

.mbk-categories {
	gap: 1.4rem;
	padding-block: 2rem 3.7rem;
}

.mbk-category {
	min-height: 18.5rem;
	border-radius: 0.7rem;
	box-shadow: 0 12px 28px rgba(18, 21, 22, 0.13);
}

.mbk-category span {
	min-height: 4.35rem;
	padding: 1rem 1.6rem 1.08rem;
	font-size: clamp(1.35rem, 1.55vw, 1.85rem);
	letter-spacing: -0.02em;
}

.mbk-benefits {
	padding: 5.4rem 0 5rem;
	background: var(--mbk-paper);
}

.mbk-benefits h2 {
	margin-bottom: 3.25rem;
	font-size: clamp(2.1rem, 3vw, 3.2rem);
	line-height: 1.02;
}

.mbk-benefits h2::after {
	width: 4.7rem;
	height: 0.28rem;
	margin-top: 1.35rem;
}

.mbk-benefit {
	padding: 0.5rem 3.2rem;
}

.mbk-benefit h3 {
	margin-bottom: 0.7rem;
	font-size: 1.42rem;
}

.mbk-benefit p {
	line-height: 1.65;
	color: #42474a;
}

.mbk-story__copy {
	padding: clamp(3.8rem, 6vw, 6.5rem);
	background: #fff8ed;
}

.mbk-story h2 {
	max-width: 11ch;
	margin-bottom: 1.35rem;
	font-size: clamp(2.15rem, 3.25vw, 3.75rem);
}

.mbk-story__copy > p:not(.mbk-eyebrow) {
	max-width: 32rem;
	margin-bottom: 2rem;
	line-height: 1.7;
	color: #3f4446;
}

.mbk-project-cta {
	padding: 5.5rem 0;
	background-color: #1a1b1c;
}

.mbk-project-cta h2 {
	margin-bottom: 2rem;
	font-size: clamp(2.25rem, 3.4vw, 3.85rem);
	line-height: 1;
}

.mbk-local-bar {
	padding: 1.65rem 0;
	background: #111213;
}

.mbk-local-bar strong {
	font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}

.mbk-footer {
	padding-top: 4.4rem;
	background: #0d0f10;
}

.mbk-footer__grid {
	gap: 3.5rem;
}

/* Local preview header uses the same spacing rhythm as the WordPress hero. */
.mbk-preview-header__inner {
	width: min(calc(100% - 48px), 1400px);
	min-height: 7.7rem;
	grid-template-columns: 12.5rem minmax(16rem, 1fr) auto;
	gap: 2.2rem;
}

.mbk-preview-logo {
	width: 11rem;
	height: 6.9rem;
}

.mbk-preview-nav {
	gap: 2.15rem;
}

.mbk-preview-tools {
	gap: 0.9rem;
}

.mbk-preview-search {
	width: 17.5rem;
	height: 2.95rem;
	border-color: #d7d1c5;
}

.mbk-preview-cart {
	padding: 0.82rem 1rem;
}

/* Prevent the preview's legacy 1120px rule from prematurely dropping the photo below desktop copy. */
@media (min-width: 921px) and (max-width: 1120px) {
	.mbk-preview-hero-image {
		inset: 0 0 0 53% !important;
		width: 47% !important;
		height: 100% !important;
	}
}

@media (max-width: 920px) {
	.mbk-hero,
	.mbk-hero__grid {
		min-height: 0;
	}

	.mbk-hero {
		display: flex;
		flex-direction: column;
	}

	.mbk-hero__grid {
		order: 1;
		display: block;
	}

	.mbk-hero__copy {
		max-width: 39rem;
		padding: 3.8rem 3rem 3.5rem;
	}

	.mbk-preview-hero-image {
		position: relative !important;
		inset: auto !important;
		order: 2;
		width: 100% !important;
		height: 22rem !important;
		object-position: center;
	}

	.mbk-category {
		min-height: 14.5rem;
	}

	.mbk-benefit {
		padding-inline: 1.6rem;
	}
}

@media (max-width: 680px) {
	.mbk-hero,
	.mbk-hero__grid {
		min-height: 0;
	}

	.mbk-hero {
		display: flex;
		flex-direction: column;
	}

	.mbk-hero__grid {
		order: 1;
		display: block;
	}

	.mbk-hero__copy {
		padding: 3.5rem 1.6rem 3.4rem 2.4rem;
	}

	.mbk-hero h1 {
		max-inline-size: 10.7ch;
		font-size: clamp(2.2rem, 11.2vw, 3.05rem);
	}

	.mbk-hero__copy > p:not(.mbk-eyebrow) {
		font-size: 0.98rem;
	}

	.mbk-hero::before {
		width: 2.3rem;
	}

	.mbk-preview-hero-image {
		position: relative !important;
		inset: auto !important;
		order: 2;
		width: 100% !important;
		height: 15rem !important;
		object-position: center;
	}

	.mbk-categories {
		gap: 1rem;
		padding-block: 1.2rem 2.7rem;
	}

	.mbk-category {
		min-height: 14rem;
	}

	.mbk-benefits {
		padding-block: 4rem;
	}

	.mbk-benefits h2 {
		margin-bottom: 2.4rem;
	}

	.mbk-benefit {
		padding: 1.8rem 1rem;
	}

	.mbk-story__copy {
		padding: 3.5rem 2rem;
	}

	.mbk-project-cta {
		padding: 4rem 0;
	}

	.mbk-preview-header__inner {
		width: min(calc(100% - 28px), 1400px);
	}
}