/*
 * Misty Gully — supplementary styles.
 *
 * theme.json carries the design tokens. This file carries only what core
 * blocks cannot express: the auto-fit grid formulas, hover states, the
 * split full-bleed sections and the two carousels.
 */

/*
 * Anchor links (the header's Our Range jump, the range nav, the recipe
 * breadcrumbs) glide rather than snap. Honoured only where the viewer has not
 * asked for less motion.
 */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Anything an anchor link lands on stops below the sticky header. */
[id] { scroll-margin-top: calc(var(--mg-header-h) + 24px); }

:root {
	/*
	 * The width system lives in theme.json, not here:
	 *   root padding  -> the gutter
	 *   contentSize   -> the 1640px cap, applied by .is-layout-constrained
	 *   .alignfull    -> the escape hatch for bands that must bleed
	 *
	 * --mg-gutter mirrors core's property so bands that DO bleed can re-inset
	 * their own content to the same rhythm. The fallback covers the editor
	 * iframe, where the custom property is not always present.
	 */
	--mg-gutter: var(--wp--style--root--padding-left, clamp(24px, 7.3vw, 140px));
	--mg-shell: 1640px;
	--mg-band-space: 130px;
	--mg-header-h: 121px;
}

/* ---------------------------------------------------------------- Shared */

.mg-eyebrow {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.mg-eyebrow--dark { color: var(--wp--preset--color--on-dark-dim); }

/* Eyebrow with the 46px leading rule, as used in the hero and award band. */
.mg-eyebrow--ruled {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mg-eyebrow--ruled::before {
	content: "";
	width: 46px;
	height: 1px;
	background: var(--wp--preset--color--on-dark-dim);
	flex: none;
}

/* Section header: title block left, action right, hairline under. */
.mg-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px 60px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 56px;
}

.mg-section-head--flush { border-bottom: 0; padding-bottom: 0; margin-bottom: 40px; }

.mg-section-head__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 860px;
}

.mg-section-head__text > * { margin: 0; }

/* Buttons ---------------------------------------------------------------- */

.mg-btn {
	display: inline-block;
	font-size: 12.5px;
	text-transform: uppercase;
	padding: 19px 38px;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mg-btn--ember { background: var(--wp--preset--color--ember); color: var(--wp--preset--color--on-dark); }
/* The bark hover would vanish into the dark bands, so the ember edge is kept
   to hold the button's shape on every ground it sits on. */
.mg-btn--ember:hover {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	border-color: var(--wp--preset--color--ember);
}

.mg-btn--ink { background: var(--wp--preset--color--bark); color: var(--wp--preset--color--on-dark); }
.mg-btn--ink:hover { background: var(--wp--preset--color--ember); color: var(--wp--preset--color--on-dark); }

.mg-btn--outline { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.mg-btn--outline:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); }

.mg-btn--outline-dark { border-color: var(--wp--preset--color--rule-dark-2); color: var(--wp--preset--color--on-dark); }
.mg-btn--outline-dark:hover { border-color: var(--wp--preset--color--on-dark); color: var(--wp--preset--color--on-dark); }

.mg-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Inline "View range ↗" style link. */
.mg-link-arrow {
	font-size: 12px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	text-decoration: none;
}

/* Carousel arrows -------------------------------------------------------- */

.mg-arrow {
	width: 58px;
	height: 58px;
	border: 1px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background-color .18s ease, color .18s ease;
}

.mg-arrow:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); }
.mg-arrow-row { display: flex; gap: 12px; }

/*
 * Below the nav breakpoint the arrows drop out of the section head and pin
 * underneath the cards. Taking them out of flow leaves the head's rule line
 * and spacing exactly as they are on desktop.
 */
@media (max-width: 1000px) {
	.mg-carousel-band { position: relative; padding-bottom: 90px; }

	.mg-carousel-band .mg-arrow-row {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: center;
	}
}

/* ------------------------------------------------------------ Announce bar */

.mg-announce {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark-dim);
	text-align: center;
	padding: 14px 24px;
	font-size: 12px;
	text-transform: uppercase;
	margin: 0;
}

.mg-announce a { color: var(--wp--preset--color--ember); text-decoration: none; }

/* ----------------------------------------------------------------- Header */

/*
 * Sticky below the announcement bar, which is free to scroll away. Sits under
 * the nav panel (100) and its backdrop (99) so an open menu still covers it.
 */
.mg-header {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px clamp(20px, 2.4vw, 48px);
	padding: 26px var(--mg-gutter);
	background: var(--wp--preset--color--bark);
	border-bottom: 1px solid var(--wp--preset--color--rule-dark);
}

.mg-header__brand { display: flex; align-items: center; gap: 18px; }
.mg-header__brand img { width: 68px; height: 68px; object-fit: contain; }

/*
 * The brand row, wordmark and CTA are core blocks now, so shed the wrappers
 * core adds: a <figure> around the logo, a <p> around the wordmark and a
 * flex row around the button.
 */
.mg-header__brand .wp-block-image { margin: 0; line-height: 0; }
.mg-header__cta { margin: 0; }

/*
 * The one deliberate exception to the single button size: the header CTA sits
 * in a nav bar, not a content band, so it takes the design's compact size.
 * Every other button on the site is 19px/38px.
 */
.mg-header__cta .wp-block-button__link { padding: 16px 30px; }

p.mg-header__wordmark { margin: 0; }

.mg-header__wordmark a {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
}

.mg-header__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 23px;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.mg-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px clamp(20px, 2.1vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mg-nav a {
	font-size: 13px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--on-dark-soft);
	text-decoration: none;
	padding-bottom: 4px;
}

.mg-nav a:hover { color: var(--wp--preset--color--on-dark); }

.mg-nav .current-menu-item a,
.mg-nav a[aria-current="page"] {
	color: var(--wp--preset--color--on-dark);
	border-bottom: 1px solid var(--wp--preset--color--on-dark);
}

/* --- Nav toggle, below 1000px -------------------------------------------- */

.mg-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule-dark-2);
	color: var(--wp--preset--color--on-dark);
	cursor: pointer;
	/* Above the panel, so the bars turn into the close control. */
	position: relative;
	z-index: 101;
}

.mg-nav-toggle:hover { border-color: var(--wp--preset--color--on-dark); }

.mg-nav-toggle__bars { position: relative; }

.mg-nav-toggle__bars,
.mg-nav-toggle__bars::before,
.mg-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 1px;
	background: currentColor;
	transition: transform .2s ease, background-color .2s ease;
}

.mg-nav-toggle__bars::before { content: ""; position: absolute; top: -6px; }
.mg-nav-toggle__bars::after { content: ""; position: absolute; top: 6px; }

.mg-nav-toggle.is-open .mg-nav-toggle__bars { background: transparent; }
.mg-nav-toggle.is-open .mg-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.mg-nav-toggle.is-open .mg-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.mg-nav-backdrop { display: none; }

.mg-nav-panel__cta { display: none; }

/* --- Sticky action bar, below 1200px ------------------------------------- */

.mg-sticky-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Under the nav panel and its backdrop, so an open menu covers it. */
	z-index: 90;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--bark);
	border-top: 1px solid var(--wp--preset--color--rule-dark);
}

.mg-sticky-cta .mg-btn {
	flex: 1 1 0;
	min-width: 0;
	/* Flex sets the width, so only the 19px height has to match the rest of
	   the site's buttons. Labels may wrap on a 320px screen rather than
	   spilling out of the button. */
	padding: 19px 10px;
	text-align: center;
	white-space: normal;
	line-height: 1.2;
}

/*
 * Guarded on .mg-js: without the script the button cannot open anything, so
 * the menu stays a plain wrapping list instead of vanishing behind it.
 */
/*
 * The CTA leaves the header before the nav does. Brand + six menu items + a
 * button stop fitting on one row at about 1100px, and wrapping the button to
 * its own line looks broken. nowrap is not the answer either: the links carry
 * white-space: nowrap, so they would overflow sideways instead of wrapping.
 * Below 1200px the sticky bar carries both actions.
 */
@media (max-width: 1200px) {
	/* .mg-header is needed to outrank core's own `body .is-layout-flex`, which
	   sets display:flex on every buttons block. */
	.mg-header .mg-header__cta { display: none; }

	.mg-sticky-cta { display: flex; }

	/* Clear the bar so it never sits over the footer's last line. */
	.mg-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 1000px) {
	.mg-js .mg-nav-toggle { display: inline-flex; }

	.mg-js .mg-nav-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		width: min(340px, 84vw);
		padding: 96px 32px 40px;
		background: var(--wp--preset--color--bark);
		border-left: 1px solid var(--wp--preset--color--rule-dark);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .28s ease, visibility .28s ease;
	}

	.mg-js .mg-nav-panel.is-open { transform: none; visibility: visible; }

	.mg-js .mg-nav-panel .mg-nav { flex-direction: column; align-items: stretch; gap: 0; }
	.mg-js .mg-nav-panel .mg-nav li { border-bottom: 1px solid var(--wp--preset--color--rule-dark); }

	.mg-js .mg-nav-panel .mg-nav a {
		display: block;
		padding: 18px 0;
		font-size: 15px;
	}

	.mg-js .mg-nav-panel__cta {
		display: block;
		margin-top: 28px;
		text-align: center;
	}

	/* The desktop underline reads as a stray rule in a stacked list. */
	.mg-js .mg-nav-panel .mg-nav .current-menu-item a,
	.mg-js .mg-nav-panel .mg-nav a[aria-current="page"] {
		border-bottom: 0;
		color: var(--wp--preset--color--ember-glow);
	}

	.mg-js .mg-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99;
		background: rgba(23, 19, 15, .72);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
	}

	.mg-js .mg-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Narrow phones: the wordmark shrinks rather than disappearing, which keeps
   the brand intact beside the toggle down to 320px. */
@media (max-width: 600px) {
	:root { --mg-header-h: 101px; }
	.mg-header { gap: 16px 14px; }
	.mg-header__wordmark { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-nav-panel,
	.mg-nav-backdrop,
	.mg-nav-toggle__bars,
	.mg-nav-toggle__bars::before,
	.mg-nav-toggle__bars::after { transition: none; }
}

/* ------------------------------------------------------------------- Hero */

.mg-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(680px, 42%)), 1fr));
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	min-height: 760px;
}

.mg-hero__body {
	padding: 110px 60px 110px var(--mg-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.mg-hero__body h1 {
	font-size: min(74px, 9.5vw);
	line-height: 1.04;
	margin: 0;
	color: var(--wp--preset--color--on-dark);
	text-wrap: pretty;
}

.mg-hero__body h1 em { font-style: normal; color: var(--wp--preset--color--ember); }

.mg-hero__body p {
	margin: 0;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--wp--preset--color--on-dark-muted);
	max-width: 620px;
}

.mg-hero__media { position: relative; min-height: 520px; }

.mg-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #17130F 0%, rgba(23, 19, 15, 0) 32%);
}

/* ------------------------------------------------------------- Stats strip */

.mg-stats {
	background: var(--wp--preset--color--bark-deep);
	color: var(--wp--preset--color--on-dark);
	border-top: 1px solid var(--wp--preset--color--rule-dark);
	padding: 0 var(--mg-gutter);
}

.mg-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, 22%)), 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule-dark);
}

.mg-stat {
	padding: 34px 40px;
	text-align: center;
	background: var(--wp--preset--color--bark-deep);
}

/*
 * Each selling point carries a mark above the figure: the two accreditation
 * logos as supplied, and two outline icons that ship with the theme so they
 * can be swapped for commissioned artwork without touching the page.
 */
.mg-stat::before {
	content: "";
	display: block;
	height: 42px;
	margin: 0 auto 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.mg-stat--stores::before { background-image: url("../img/icon-store.svg"); }
.mg-stat--local::before  { background-image: url("../img/icon-australia.svg"); }
.mg-stat--aba::before    { background-image: url("/wp-content/uploads/2026/09/aba-alliance-white-300x194.png"); }
.mg-stat--haccp::before  { background-image: url("/wp-content/uploads/2026/09/haccp-white.png"); }

@media (max-width: 781px) {
	.mg-stat::before { height: 34px; margin-bottom: 12px; }
}

.mg-stat__figure {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: min(38px, 9.5vw);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mg-stat__label {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-faint);
	margin-top: 8px;
}

/* ------------------------------------------------------------------ Bands */

/* Horizontal space comes from the constrained <main>; only rhythm is set here. */
.mg-band { padding-block: var(--mg-band-space); }
.mg-band--top-flush { padding-top: 0; }
.mg-band--bottom-flush { padding-bottom: 0; }
.mg-band__shell { max-width: var(--mg-shell); margin: 0 auto; }

/* Two-column intro / story split. */
.mg-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(460px, 42%)), 1fr));
	gap: clamp(56px, 6vw, 120px);
	align-items: start;
}

.mg-split--centred { align-items: center; gap: clamp(56px, 6vw, 110px); }
.mg-split__col { display: flex; flex-direction: column; gap: 26px; }
.mg-split__col > * { margin: 0; }
.mg-split__col p { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--ink-soft); max-width: 620px; }
.mg-split__prose { gap: 24px; padding-top: 12px; }

/* ------------------------------------------------------------------ Cards */

.mg-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(480px, 30%)), 1fr));
}

.mg-grid--tight { gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 23%)), 1fr)); }
.mg-grid--logos { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 21%)), 1fr)); }
.mg-grid--awards { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.mg-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--rule);
	transition: border-color .18s ease;
}

.mg-card:hover { border-color: var(--wp--preset--color--ink); }

.mg-card__media { height: 360px; background: var(--wp--preset--color--bark); overflow: hidden; position: relative; }
.mg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-card__media--short { height: 340px; }

.mg-card__tag {
	position: absolute;
	left: 0;
	top: 22px;
	padding: 9px 16px;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
	font-size: 10.5px;
	text-transform: uppercase;
}

.mg-card__body {
	padding: 34px 34px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.mg-card__body h3 { font-size: 24px; margin: 0; line-height: 1.25; }
.mg-card__body p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--ink-muted); flex: 1; }
.mg-card__body .mg-link-arrow { margin-top: 10px; }

/* ------------------------------------------------------------ Award band */

.mg-award {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(520px, 42%)), 1fr));
	align-items: stretch;
}

.mg-award__media { position: relative; min-height: 720px; }
.mg-award__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mg-award__body {
	padding: 130px var(--mg-gutter) 130px clamp(56px, 6vw, 120px);
	display: flex;
	flex-direction: column;
	gap: 26px;
	justify-content: center;
}

.mg-award__body h2 { font-size: min(54px, 9.5vw); margin: 0; color: var(--wp--preset--color--on-dark); }
.mg-award__body h2 em { font-style: normal; color: var(--wp--preset--color--ember); }
.mg-award__body p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--on-dark-muted); max-width: 600px; }

.mg-award__accreditations {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 18px;
	padding-top: 30px;
	border-top: 1px solid #2A2420;
}

.mg-badge {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 24px;
	min-height: 108px;
	background: var(--wp--preset--color--bark-deep);
	border: 1px solid #2A2420;
	min-width: 0;
}

.mg-badge img { height: 92px; width: auto; max-width: 92px; object-fit: contain; }

/* A photographed award is shot on white, so it gets a light tile to sit on
   rather than floating as a pale rectangle on the dark one. */
.mg-badge--photo img {
	background: #FFFFFF;
	padding: 6px;
	border-radius: 2px;
}
.mg-badge__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 19px; text-transform: uppercase; color: var(--wp--preset--color--on-dark); line-height: 1.4; }
.mg-badge__year { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--on-dark-faint); font-variant-numeric: tabular-nums; }
.mg-badge__text { display: flex; flex-direction: column; gap: 7px; }

/* ------------------------------------------------------------ Story images */

.mg-story-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mg-story-mosaic img { width: 100%; object-fit: cover; display: block; }
.mg-story-mosaic img:first-child { height: 460px; grid-column: span 2; }
.mg-story-mosaic img:not(:first-child) { height: 300px; }

/* ---------------------------------------------------------------- Recipes */

.mg-recipes {
	background: var(--wp--preset--color--bark-deep);
	color: var(--wp--preset--color--on-dark);
	padding: 90px clamp(40px, 4.5vw, 80px) 96px;
}

.mg-recipes h2, .mg-recipes h3 { color: var(--wp--preset--color--on-dark); }
.mg-recipes p { color: var(--wp--preset--color--on-dark-muted); }

.mg-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }

.mg-chip {
	font-size: 13px;
	text-transform: uppercase;
	padding: 14px 26px;
	border: 1px solid var(--wp--preset--color--rule-dark-2);
	color: var(--wp--preset--color--on-dark-soft);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mg-chip:hover { background: var(--wp--preset--color--ember); border-color: var(--wp--preset--color--ember); color: var(--wp--preset--color--on-dark); }

.mg-recipe-card { display: flex; flex-direction: column; background: var(--wp--preset--color--bark); }
.mg-recipe-card img { width: 100%; height: 280px; object-fit: cover; display: block; }
.mg-recipe-card__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mg-recipe-card__meta { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--on-dark-faint); font-variant-numeric: tabular-nums; }
.mg-recipe-card__body h3 { font-size: 21px; margin: 0; line-height: 1.3; flex: 1; }

/* --------------------------------------------------------------- Partners */

.mg-partners { text-align: center; }
.mg-partners h2 { font-size: min(46px, 9.5vw); margin: 18px 0 20px; }
.mg-partners > p { margin: 0 auto 56px; max-width: 720px; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--ink-muted); }

.mg-partners__hero {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 48px;
	padding-bottom: 54px;
	margin-bottom: 46px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mg-partners__hero span { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }

.mg-logo-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 26px;
	min-height: 140px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--panel);
}

.mg-logo-tile img { max-width: 240px; width: 100%; height: 84px; object-fit: contain; }

/* Logo treatments, matching the design's four cases. */
.mg-logo--ink { filter: grayscale(1); }
.mg-logo--reverse { filter: grayscale(1) invert(1); }
.mg-logo--short { height: 40px; }

/* ---------------------------------------------------------------- Reviews */

.mg-reviews-band {
	background: var(--wp--preset--color--panel);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 120px var(--mg-gutter);
}

.mg-score { display: flex; align-items: center; gap: 24px; }
.mg-score__figure { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.mg-score__stars { color: var(--wp--preset--color--ember); font-size: 21px; }
.mg-score__text { display: flex; flex-direction: column; gap: 6px; }
.mg-score__count { font-size: 12px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }

.mg-review {
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 40px 38px 44px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mg-review__stars { color: var(--wp--preset--color--ember); font-size: 17px; }
.mg-review blockquote { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--ink-soft); flex: 1; }
.mg-review__by { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid var(--wp--preset--color--rule); }
.mg-review__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; text-transform: uppercase; font-size: 13.5px; }
.mg-review__meta { font-size: 12px; color: var(--wp--preset--color--ink-muted); }

.mg-reviews-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 48px; flex-wrap: wrap; }

/* On a phone the arrows sit together and the link takes its own full row,
   rather than the three of them wrapping into a ragged stack. */
@media (max-width: 781px) {
	.mg-reviews-controls { gap: 14px; }
	.mg-reviews-controls .mg-btn { order: 3; flex-basis: 100%; text-align: center; }
}

/* -------------------------------------------------------------------- CTA */

.mg-cta {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	padding: 90px var(--mg-gutter);
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
}

.mg-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mg-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #17130F 18%, rgba(23, 19, 15, .55) 70%); }
.mg-cta__inner { position: relative; z-index: 1; max-width: var(--mg-shell); margin: 0 auto; width: 100%; }
.mg-cta__body { max-width: 760px; display: flex; flex-direction: column; gap: 26px; }
.mg-cta__body h2 { font-size: min(58px, 9.5vw); line-height: 1.08; margin: 0; color: var(--wp--preset--color--on-dark); }
.mg-cta__body > p { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--on-dark-soft); }

.mg-signup { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.mg-signup__form { display: flex; max-width: 560px; border: 1px solid var(--wp--preset--color--rule-dark-2); }
.mg-signup__form input[type="email"] {
	flex: 1;
	padding: 20px 26px;
	font-size: 15px;
	font-family: inherit;
	color: var(--wp--preset--color--on-dark);
	background: transparent;
	border: 0;
	min-width: 0;
}
.mg-signup__form input::placeholder { color: var(--wp--preset--color--on-dark-faint); }
.mg-signup__form input:focus-visible { outline: 2px solid var(--wp--preset--color--ember); outline-offset: -2px; }
.mg-signup__form button {
	font-size: 12.5px;
	text-transform: uppercase;
	padding: 19px 38px;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	transition: background-color .18s ease;
}
.mg-signup__form button:hover { background: var(--wp--preset--color--bark); }

/* ----------------------------------------------------------------- Footer */

.mg-footer {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark-faint);
	padding: 96px var(--mg-gutter) 40px;
}

.mg-footer__shell { max-width: var(--mg-shell); margin: 0 auto; }
.mg-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 64px 48px; }
.mg-footer__brand { display: flex; flex-direction: column; gap: 22px; }
.mg-footer__brand-row { display: flex; align-items: center; gap: 16px; }
.mg-footer__brand-row img { width: 60px; height: 60px; object-fit: contain; }
.mg-footer__wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 600; text-transform: uppercase; font-size: 21px; color: var(--wp--preset--color--on-dark); }
.mg-footer__brand p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; max-width: 380px; }

.mg-footer__col { display: flex; flex-direction: column; gap: 14px; }
.mg-footer__heading { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--on-dark-dim); margin-bottom: 6px; }
.mg-footer__col a, .mg-footer__col span { color: var(--wp--preset--color--on-dark-faint); font-size: 15px; text-decoration: none; }
.mg-footer__col a:hover { color: var(--wp--preset--color--on-dark); }
.mg-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.mg-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: center;
	margin-top: 72px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--rule-dark);
	font-size: 13px;
	color: #7A736A;
}

/* -------------------------------------------------------------- Carousels */

.mg-swiper { width: 100%; overflow: hidden; }
.mg-swiper .swiper-wrapper { align-items: stretch; transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important; }
.mg-products .swiper-slide { width: 380px; height: auto; display: flex; }
.mg-reviews .swiper-slide { width: min(100%, 520px); height: auto; display: flex; }

/* Before Swiper initialises (or if it fails to load) the slides still read
   as a horizontally scrollable row rather than collapsing. */
.mg-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.mg-swiper:not(.swiper-initialized) .swiper-slide { scroll-snap-align: start; flex: none; }

/* -------------------------------------------------------------- Utilities */

.mg-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Narrow view */

@media (max-width: 781px) {
	:root { --mg-band-space: 80px; }

	/*
	 * Two stacked bands each contributing their own padding reads as a gap
	 * twice the size on a phone, where there is no width to balance it. On
	 * desktop the design's full 130px either side is kept.
	 */
	.mg-band + .mg-band { padding-top: 0; }
	.mg-hero { min-height: 0; }
	.mg-hero__body { padding: 72px var(--mg-gutter); }
	.mg-hero__media { min-height: 380px; }
	.mg-hero__media::after { background: linear-gradient(0deg, rgba(23, 19, 15, 0) 40%, #17130F 100%); }
	.mg-award__media { min-height: 420px; }
	.mg-award__body { padding: 80px var(--mg-gutter); }
	.mg-recipes { padding: 64px 28px 72px; }
	.mg-reviews-band { padding-top: 80px; padding-bottom: 80px; }
	.mg-story-mosaic img:first-child { height: 320px; }
	.mg-story-mosaic img:not(:first-child) { height: 200px; }
	.mg-footer { padding-top: 72px; }
	.mg-footer__base { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-swiper .swiper-wrapper { transition-duration: 0ms !important; }
	.mg-btn, .mg-arrow, .mg-chip, .mg-card { transition: none; }
}

/* ------------------------------------------------- Pending photography
 * Rendered in place of an image that has not been supplied yet, so layout
 * and spacing stay truthful while the shoot is outstanding.
 */
.mg-image-pending {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background-color: #241E19;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(201, 72, 26, .16) 0 12px,
			transparent 12px 24px
		);
}

.mg-image-pending::after {
	content: attr(data-file);
	display: block;
	padding: 10px 12px;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7A736A;
	word-break: break-all;
}

.mg-logo-tile .mg-image-pending { min-height: 66px; background-color: #E3E4DF; }
.mg-logo-tile .mg-image-pending::after { color: #8B8F86; }

/* Award slot still awaiting artwork, per the design's dashed placeholder. */
.mg-badge--pending {
	background: transparent;
	border: 1px dashed #45403A;
}

.mg-badge--pending .mg-badge__slot {
	width: 68px;
	height: 68px;
	border: 1px dashed #45403A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9.5px;
	text-transform: uppercase;
	color: #7A736A;
	text-align: center;
	line-height: 1.6;
	flex: none;
}

.mg-badge--pending .mg-badge__name { font-size: 15px; color: var(--wp--preset--color--on-dark-soft); }
.mg-badge--pending .mg-badge__year { color: #7A736A; }

/* The two headline retailers sit larger than the tiled logos below them, and
   in full colour: these are the ones worth shouting about. */
.mg-logo-hero {
	height: 88px;
	width: auto;
	max-width: 300px;
	object-fit: contain;
}

.mg-partners__hero-label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	letter-spacing: .02em;
}

@media (max-width: 781px) {
	.mg-logo-hero { height: 64px; max-width: 220px; }
	.mg-partners__hero-label { font-size: 15px; }
}

/* ============================================================ Core blocks
 * The homepage prose is authored as core blocks so it can be edited in
 * Gutenberg. Core wraps buttons in a div and images in a <figure>, so these
 * rules re-seat that markup inside the layout the design expects.
 */

/* --- Buttons ------------------------------------------------------------ */

.wp-block-buttons.mg-btn-row { gap: 14px; }

.wp-block-button .wp-block-button__link {
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Ember keeps its edge on hover so it cannot vanish into a dark band. */
.wp-block-button.mg-btn--ember .wp-block-button__link:hover {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	border-color: var(--wp--preset--color--ember);
}

.wp-block-button.mg-btn--ink .wp-block-button__link { background: var(--wp--preset--color--bark); }
.wp-block-button.mg-btn--ink .wp-block-button__link:hover { background: var(--wp--preset--color--ember); }

.wp-block-button.mg-btn--outline .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.mg-btn--outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}

.wp-block-button.mg-btn--outline-dark .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--rule-dark-2);
	color: var(--wp--preset--color--on-dark);
}
.wp-block-button.mg-btn--outline-dark .wp-block-button__link:hover { border-color: var(--wp--preset--color--on-dark); }

/* --- Images ------------------------------------------------------------- */

/* Figures that fill a positioned media box (hero, award band, CTA ground). */
.mg-hero__media .wp-block-image,
.mg-award__media .wp-block-image,
.mg-cta > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.mg-hero__media .wp-block-image img,
.mg-award__media .wp-block-image img,
.mg-cta > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mg-cta > .wp-block-image img { opacity: .55; }

/* The story mosaic: three figures on a two-column grid. */
.mg-story-mosaic .wp-block-image { margin: 0; }
.mg-story-mosaic .wp-block-image:first-child { grid-column: span 2; }
.mg-story-mosaic .wp-block-image img { width: 100%; display: block; object-fit: cover; }
.mg-story-mosaic .wp-block-image:first-child img { height: 460px; }
.mg-story-mosaic .wp-block-image:not(:first-child) img { height: 300px; }

/* --- Group wrappers ----------------------------------------------------- */

/* Core adds .wp-block-group to every group; these carry no spacing of their
   own so the section rules stay in charge. */
.mg-hero > .wp-block-group,
.mg-award > .wp-block-group { margin: 0; }

@media (max-width: 781px) {
	.mg-story-mosaic .wp-block-image:first-child img { height: 320px; }
	.mg-story-mosaic .wp-block-image:not(:first-child) img { height: 200px; }
}

/* ========================================================== Inner pages
 * Shared furniture for About, Our Range, Stockists and Contact.
 */

/* --- Page hero: dark band, photograph behind a gradient --------------- */

.mg-page-hero {
	position: relative;
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	min-height: 480px;
	display: flex;
	align-items: center;
	padding: 110px var(--mg-gutter);
}

.mg-page-hero > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.mg-page-hero > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .4;
	display: block;
}

.mg-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #17130F 20%, rgba(23, 19, 15, .5) 78%);
}

.mg-page-hero__body {
	position: relative;
	z-index: 1;
	max-width: var(--mg-shell);
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-page-hero__body > * { margin: 0; max-width: 900px; }
.mg-page-hero__body h1 { font-size: min(68px, 9.5vw); line-height: 1.06; color: var(--wp--preset--color--on-dark); text-wrap: pretty; }
.mg-page-hero__body p:not(.mg-eyebrow) { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--wp--preset--color--on-dark-muted); max-width: 680px; }

/* Hero variant that sits content at the bottom (Our Range). */
.mg-page-hero--bottom { align-items: flex-end; min-height: 560px; padding-bottom: 90px; }
.mg-page-hero--bottom::after { background: linear-gradient(180deg, rgba(23,19,15,.85) 0%, rgba(23,19,15,.45) 45%, #17130F 100%); }
.mg-page-hero--bottom > .wp-block-image img { opacity: .5; }
.mg-page-hero--bottom h1 { font-size: min(74px, 9.5vw); line-height: 1.05; max-width: 1100px; }

/* --- Timeline (About) ------------------------------------------------- */

.mg-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 23%)), 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}

.mg-milestone {
	background: var(--wp--preset--color--base);
	padding: 40px 34px 44px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mg-milestone__year {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 30px;
	color: var(--wp--preset--color--ember);
	font-variant-numeric: tabular-nums;
}

.mg-milestone h3 { font-size: 19px; margin: 0; line-height: 1.3; }
.mg-milestone p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--ink-muted); }

/* --- Dark band used for the About awards section ---------------------- */

.mg-dark-band {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	padding: 120px var(--mg-gutter);
}

.mg-dark-band__shell {
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.mg-dark-band h2 { color: var(--wp--preset--color--on-dark); font-size: min(52px, 9.5vw); margin: 0; }
.mg-dark-band p:not(.mg-eyebrow) { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--on-dark-muted); max-width: 720px; }
.mg-dark-band .mg-badge img { height: 110px; max-width: 110px; }
.mg-dark-band .mg-badge__name { font-size: 20px; }

/* --- Facility mosaic (About) ------------------------------------------ */

.mg-facility-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mg-facility-mosaic .wp-block-image { margin: 0; }
.mg-facility-mosaic .wp-block-image img { width: 100%; height: 300px; object-fit: cover; display: block; }
.mg-facility-mosaic .wp-block-image:last-child { grid-column: span 2; }
.mg-facility-mosaic .wp-block-image:last-child img { height: 380px; }

/* --- Story image inside a split column ------------------------------- */

.mg-split__col > .wp-block-image { margin: 14px 0 0; }
.mg-split__col > .wp-block-image img { width: 100%; height: 420px; object-fit: cover; display: block; }

@media (max-width: 781px) {
	.mg-page-hero { padding-top: 72px; padding-bottom: 72px; min-height: 0; }
	.mg-page-hero--bottom { min-height: 0; }
	.mg-dark-band { padding-top: 80px; padding-bottom: 80px; }
	.mg-facility-mosaic .wp-block-image img,
	.mg-facility-mosaic .wp-block-image:last-child img { height: 220px; }
	.mg-split__col > .wp-block-image img { height: 280px; }
}

/* ============================================================== Recipes */

/* --- Filter bar (index) ----------------------------------------------- */

.mg-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mg-filters__chips { display: flex; flex-wrap: wrap; gap: 12px; }

.mg-filters .mg-chip {
	border-color: var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-muted);
}
.mg-filters .mg-chip:hover,
.mg-filters .mg-chip[aria-current="page"] {
	background: var(--wp--preset--color--ember);
	border-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
}

.mg-filters__count {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Featured recipe (index) ------------------------------------------ */

.mg-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(460px, 42%)), 1fr));
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	max-width: var(--mg-shell);
	margin: 0 auto;
}

.mg-featured__media { position: relative; min-height: 520px; }
.mg-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mg-featured__flag {
	position: absolute;
	left: 0;
	top: 30px;
	padding: 10px 20px;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
	font-size: 11px;
	text-transform: uppercase;
	z-index: 1;
}

.mg-featured__body {
	padding: 80px clamp(40px, 4.5vw, 72px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
}

.mg-featured__body h2 { font-size: min(46px, 9.5vw); margin: 0; color: var(--wp--preset--color--on-dark); text-wrap: pretty; }
.mg-featured__body p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--on-dark-muted); max-width: 560px; }

/* --- Recipe cards (index, related) ------------------------------------ */

.mg-recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, 23%)), 1fr));
	gap: 28px;
}

.mg-recipe-tile {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--rule);
	transition: border-color .18s ease;
}

.mg-recipe-tile:hover { border-color: var(--wp--preset--color--ink); }
.mg-recipe-tile__media { position: relative; height: 300px; overflow: hidden; background: var(--wp--preset--color--bark); }
.mg-recipe-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mg-recipe-tile__cat {
	position: absolute;
	left: 0;
	top: 20px;
	padding: 8px 16px;
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	font-size: 10.5px;
	text-transform: uppercase;
}

.mg-recipe-tile__body { padding: 30px 30px 34px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mg-recipe-tile__meta { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); font-variant-numeric: tabular-nums; }
.mg-recipe-tile__body h3 { font-size: 21px; margin: 0; line-height: 1.3; }
.mg-recipe-tile__body p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--ink-muted); flex: 1; }
.mg-recipe-tile__made { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }

/* --- Single recipe: breadcrumb + hero --------------------------------- */

.mg-breadcrumb {
	background: var(--wp--preset--color--bark);
	border-bottom: 1px solid var(--wp--preset--color--rule-dark);
	padding: 22px var(--mg-gutter);
}

.mg-breadcrumb__inner {
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-faint);
}

.mg-breadcrumb__inner a { color: var(--wp--preset--color--on-dark-faint); text-decoration: none; }
.mg-breadcrumb__inner a:hover { color: var(--wp--preset--color--on-dark); }
.mg-breadcrumb__inner [aria-current] { color: var(--wp--preset--color--on-dark-soft); }

.mg-recipe-hero {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(560px, 44%)), 1fr));
	align-items: stretch;
}

.mg-recipe-hero__body {
	padding: 96px clamp(40px, 5vw, 96px) 96px var(--mg-gutter);
	display: flex;
	flex-direction: column;
	gap: 26px;
	justify-content: center;
}

.mg-recipe-hero__body h1 { font-size: min(62px, 9.5vw); line-height: 1.06; margin: 0; color: var(--wp--preset--color--on-dark); text-wrap: pretty; }
.mg-recipe-hero__body > p { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--on-dark-muted); max-width: 600px; }
.mg-recipe-hero__media { position: relative; min-height: 620px; }
.mg-recipe-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Vitals strip ----------------------------------------------------- */

.mg-vitals { background: var(--wp--preset--color--bark-deep); color: var(--wp--preset--color--on-dark); padding: 0 var(--mg-gutter); }

.mg-vitals__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, 22%)), 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule-dark);
}

.mg-vital {
	padding: 34px 40px;
	background: var(--wp--preset--color--bark-deep);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

.mg-vital__label { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--on-dark-faint); }
.mg-vital__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* --- Single recipe body: the scaffold new recipes start with ---------- */

.mg-recipe-body { gap: clamp(48px, 5vw, 88px); align-items: flex-start; }

.mg-recipe-ingredients > * { position: relative; }

.mg-recipe-ingredients {
	position: sticky;
	top: calc(var(--mg-header-h) + 32px);
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 44px 40px 48px;
	align-self: flex-start;
}

.mg-recipe-ingredients h2 { font-size: 30px; margin: 0 0 8px; }
.mg-recipe-ingredients .mg-eyebrow { margin: 20px 0 10px; }
.mg-recipe-ingredients ul { list-style: none; margin: 0; padding: 0; }
.mg-recipe-ingredients li {
	padding: 15px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.6;
}
.mg-recipe-ingredients li:last-child { border-bottom: 0; }

.mg-recipe-method h2 { font-size: 30px; margin: 0 0 24px; }

.mg-recipe-method .mg-steps { list-style: none; margin: 0; padding: 0; counter-reset: mg-step; }

.mg-recipe-method .mg-steps > li {
	counter-increment: mg-step;
	position: relative;
	padding: 30px 0 30px 88px;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: 16.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wp--preset--color--ink-soft);
}

.mg-recipe-method .mg-steps > li:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }

.mg-recipe-method .mg-steps > li::before {
	position: absolute;
	left: 0;
	top: 30px;
	content: counter( mg-step, decimal-leading-zero );
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 26px;
	color: var(--wp--preset--color--ember);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.mg-recipe-method .mg-steps > li strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	margin-bottom: 8px;
}

.mg-tip {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark-muted);
	padding: 40px 44px;
	margin-top: 34px;
}

.mg-tip p { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.85; }
.mg-tip .mg-eyebrow { margin-bottom: 14px; }

/* --- Products used / More recipes bands -------------------------------- */

.mg-band--panel {
	background: var(--wp--preset--color--panel);
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 110px var(--mg-gutter);
}

@media (max-width: 781px) {
	.mg-recipe-hero__body { padding: 72px var(--mg-gutter); }
	.mg-recipe-hero__media { min-height: 380px; }
	.mg-featured__media { min-height: 320px; }
	.mg-featured__body { padding: 56px 28px; }
	.mg-recipe-ingredients { position: static; padding: 32px 28px 36px; }
	.mg-recipe-method .mg-steps > li { padding-left: 62px; }
	.mg-band--panel { padding-top: 72px; padding-bottom: 72px; }
}

/* ============================================================== Contact */

.mg-contact-form .gform_wrapper { margin: 0; }
.mg-contact-form .gform_wrapper .gform_fields { display: flex; flex-direction: column; gap: 22px; }
.mg-contact-form .gform_wrapper .gfield { display: flex; flex-direction: column; gap: 10px; }

.mg-contact-form .gform_wrapper .gfield_label,
.mg-contact-form .gform_wrapper legend.gfield_label {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	font-weight: 400;
	margin: 0;
}

.mg-contact-form .gform_wrapper .gfield_required { color: var(--wp--preset--color--ember); }

.mg-contact-form .gform_wrapper input[type="text"],
.mg-contact-form .gform_wrapper input[type="email"],
.mg-contact-form .gform_wrapper input[type="tel"],
.mg-contact-form .gform_wrapper textarea {
	width: 100%;
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--panel);
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
}

.mg-contact-form .gform_wrapper textarea { min-height: 150px; resize: vertical; }

.mg-contact-form .gform_wrapper input::placeholder,
.mg-contact-form .gform_wrapper textarea::placeholder { color: #767A71; }

.mg-contact-form .gform_wrapper input:focus-visible,
.mg-contact-form .gform_wrapper textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: -2px;
	background: #FFF;
}

/* Enquiry type renders as the design's chip row. */
.mg-contact-form .gform_wrapper .gfield--type-radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mg-contact-form .gform_wrapper .gchoice { position: relative; }
.mg-contact-form .gform_wrapper .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.mg-contact-form .gform_wrapper .gchoice label {
	display: block;
	font-size: 12.5px;
	text-transform: uppercase;
	padding: 13px 22px;
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mg-contact-form .gform_wrapper .gchoice input[type="radio"]:checked + label {
	background: var(--wp--preset--color--ember);
	border-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
}

.mg-contact-form .gform_wrapper .gchoice input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 2px;
}

.mg-contact-form .gform_wrapper .gfield_description {
	font-size: 13px;
	font-weight: 300;
	color: var(--wp--preset--color--ink-muted);
}

.mg-contact-form .gform_wrapper .gform_footer { margin: 30px 0 0; padding: 0; }

.mg-contact-form .gform_wrapper .gform_button {
	font-family: inherit;
	font-size: 12.5px;
	text-transform: uppercase;
	padding: 19px 38px;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--on-dark);
	border: 1px solid var(--wp--preset--color--ember);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.mg-contact-form .gform_wrapper .gform_button:hover {
	background: var(--wp--preset--color--bark);
	border-color: var(--wp--preset--color--ember);
}

.mg-contact-form .gform_wrapper .validation_message {
	font-size: 13.5px;
	color: #A3300C;
	font-weight: 400;
}

.mg-contact-form .gform_wrapper .gform_validation_errors {
	border: 1px solid var(--wp--preset--color--ember);
	background: #F8E9E3;
	padding: 18px 22px;
	margin-bottom: 26px;
	border-radius: 0;
}

.mg-contact-form .gform_confirmation_message {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--panel);
	padding: 32px 34px;
	font-size: 16.5px;
	font-weight: 300;
}

/* --- Details panel ---------------------------------------------------- */

.mg-details {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}

.mg-detail {
	background: var(--wp--preset--color--panel);
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mg-detail__label { font-size: 11px; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }
.mg-detail__value {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.mg-detail__value a { color: var(--wp--preset--color--ink); text-decoration: none; }
.mg-detail__value a:hover { color: var(--wp--preset--color--ember); }
.mg-detail__note { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--wp--preset--color--ink-muted); }

.mg-detail--dark {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	padding: 40px 36px 44px;
	gap: 14px;
}

.mg-detail--dark .mg-detail__label { color: var(--wp--preset--color--on-dark-dim); }
.mg-detail--dark p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--on-dark-muted); }

@media (max-width: 781px) {
	.mg-detail { padding: 26px 24px; }
}

/* A shorter hero for confirmation and error pages, which carry no photograph. */
.mg-page-hero--short { min-height: 0; padding-top: 130px; padding-bottom: 130px; }
.mg-page-hero--short::after { background: linear-gradient(90deg, #17130F 40%, rgba(23, 19, 15, .78) 100%); }

/* =========================================================== Contrast
 * #C9481A is the brand fill, but as text it only reaches 4.07:1 on ash and
 * 3.89:1 on bark — both under the 4.5:1 floor. The original handover specified
 * two values for exactly this reason; the v5 design collapsed them into one.
 * The fill is unchanged; only text colours move.
 */

/* Small ember text on light grounds. */
.mg-milestone__year,
.mg-recipe-method .mg-steps > li::before,
.mg-review__stars,
.mg-score__stars,
.mg-contact-form .gform_wrapper .gfield_required,
.mg-recipe-tile a:not(.mg-btn),
.mg-card__body a:not(.mg-btn) { color: var(--wp--preset--color--ember-ink); }

.mg-detail__value a:hover { color: var(--wp--preset--color--ember-ink); }

/* Ember text sitting on the dark bands needs to go lighter, not darker. */
.mg-announce a,
.mg-hero__body h1 em,
.mg-award__body h2 em,
.mg-featured__body a:not(.mg-btn),
.mg-recipes a:not(.mg-btn):not(.mg-chip),
.mg-recipe-hero__body a:not(.mg-btn),
.mg-dark-band a:not(.mg-btn),
.mg-page-hero__body a:not(.mg-btn),
.mg-cta__body a:not(.mg-btn) { color: var(--wp--preset--color--ember-glow); }

.mg-announce a:hover,
.mg-recipes a:not(.mg-btn):not(.mg-chip):hover { color: var(--wp--preset--color--on-dark); }

/* Button labels: white clears the floor on the ember fill. */
.mg-btn--ember,
.mg-btn--ember:hover,
.wp-block-button.mg-btn--ember .wp-block-button__link,
.wp-block-button.mg-btn--ember .wp-block-button__link:hover,
.mg-btn--ink,
.mg-btn--ink:hover,
.wp-block-button.mg-btn--ink .wp-block-button__link,
.wp-block-button.mg-btn--ink .wp-block-button__link:hover,
.mg-signup__form button,
.mg-contact-form .gform_wrapper .gform_button { color: #FFFFFF; }

/* The tag and flag chips sit on the ember fill too. */
.mg-card__tag,
.mg-featured__flag,
.mg-filters .mg-chip[aria-current="page"],
.mg-chip:hover { color: #FFFFFF; }

/* ============================================================ Stockists */

/* The ember disclaimer band above the search. */
.mg-disclaimer {
	background: var(--wp--preset--color--ember);
	color: #FFFFFF;
	padding: 34px var(--mg-gutter);
}

.mg-disclaimer__inner {
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.mg-disclaimer__lead {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 15px;
	white-space: nowrap;
	margin: 0;
}

.mg-disclaimer p:not(.mg-disclaimer__lead) { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.6; }

/* "Now in" headline retailers band. */
.mg-retailers {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	padding: 54px clamp(36px, 4vw, 64px);
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.mg-retailers__text { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.mg-retailers__text > * { margin: 0; }
.mg-retailers__text h2 { font-size: 32px; line-height: 1.2; color: var(--wp--preset--color--on-dark); }
.mg-retailers__text p:not(.mg-eyebrow) { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--wp--preset--color--on-dark-muted); }

/* The store locator plugin renders inside this. */
.mg-locator { max-width: var(--mg-shell); margin: 0 auto; }
.mg-locator .wpsl-search { background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--rule); }
.mg-locator #wpsl-result-list li { border-bottom: 1px solid var(--wp--preset--color--rule); }

.mg-editor-note {
	border: 1px dashed var(--wp--preset--color--rule);
	background: var(--wp--preset--color--panel);
	padding: 26px 28px;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-muted);
}

.mg-editor-note strong { font-weight: 500; color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
	.mg-retailers { padding: 36px 24px; }
	.mg-disclaimer__lead { white-space: normal; }
}

/* ============================================================ Our Range */

/* --- Award winners banner --------------------------------------------- */

.mg-flagship-band {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	padding: 0 var(--mg-gutter) 120px;
}

.mg-flagship-band__shell { max-width: var(--mg-shell); margin: 0 auto; }

.mg-flagship-band .mg-section-head {
	border-bottom-color: #2A2420;
	padding-bottom: 40px;
	margin-bottom: 52px;
}

.mg-flagship-band h2 { color: var(--wp--preset--color--on-dark); font-size: min(52px, 9.5vw); margin: 0; text-wrap: pretty; }

.mg-hero-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, 22%)), 1fr));
	gap: 28px;
}

.mg-hero-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--bark-deep);
	border: 1px solid #2A2420;
	transition: border-color .18s ease;
}

.mg-hero-card:hover { border-color: var(--wp--preset--color--ember); }
.mg-hero-card__media { position: relative; height: 320px; overflow: hidden; }
.mg-hero-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-hero-card__body { padding: 30px 30px 34px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mg-hero-card__body h3 { font-size: 20px; margin: 0; line-height: 1.3; color: var(--wp--preset--color--on-dark); }
.mg-hero-card__award { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--wp--preset--color--on-dark-muted); flex: 1; }
.mg-hero-card .mg-link-arrow { color: var(--wp--preset--color--ember-glow); margin-top: 8px; }

/* --- Sticky category nav ---------------------------------------------- */

.mg-range-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0 var(--mg-gutter);
}

.mg-range-nav__inner {
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(18px, 2vw, 36px);
	padding: 20px 0;
}

.mg-range-nav a {
	font-size: 12.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
}

.mg-range-nav a:hover {
	color: var(--wp--preset--color--ember-ink);
	border-bottom-color: var(--wp--preset--color--ember-ink);
}

/* --- One section per range -------------------------------------------- */

.mg-range-section {
	padding: 110px var(--mg-gutter);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	scroll-margin-top: 78px;
}

.mg-range-section__shell { max-width: var(--mg-shell); margin: 0 auto; }

.mg-range-section__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(420px, 32%)), 1fr));
	gap: 48px 64px;
	align-items: start;
	margin-bottom: 56px;
}

.mg-range-section__text { display: flex; flex-direction: column; gap: 20px; }
.mg-range-section__text > * { margin: 0; }
.mg-range-section__text h2 { font-size: min(50px, 9.5vw); line-height: 1.1; text-wrap: pretty; }
.mg-range-section__text p:not(.mg-eyebrow) { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--ink-soft); max-width: 620px; }
.mg-range-section__count { color: var(--wp--preset--color--ember-ink); }
.mg-range-section__text .mg-btn { align-self: flex-start; margin-top: 10px; }

.mg-range-section__media { height: 340px; background: var(--wp--preset--color--bark); overflow: hidden; }
.mg-range-section__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Product tiles: hairline grid, square images. */
.mg-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, 15%)), 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
}

.mg-product-tile {
	background: var(--wp--preset--color--panel);
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color .18s ease;
}

.mg-product-tile:hover { background: #FFFFFF; color: var(--wp--preset--color--ink); }
.mg-product-tile__media { aspect-ratio: 1 / 1; background: var(--wp--preset--color--bark); overflow: hidden; }
.mg-product-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-product-tile__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mg-product-tile__body h3 { font-size: 16px; margin: 0; line-height: 1.35; }
.mg-product-tile__size { font-size: 13px; font-weight: 300; color: var(--wp--preset--color--ink-muted); }

/* --- Wholesale CTA ---------------------------------------------------- */

.mg-wholesale {
	background: var(--wp--preset--color--bark);
	color: var(--wp--preset--color--on-dark);
	padding: 110px var(--mg-gutter);
}

.mg-wholesale__shell {
	max-width: var(--mg-shell);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(400px, 40%)), 1fr));
	gap: 40px 80px;
	align-items: center;
}

.mg-wholesale__text { display: flex; flex-direction: column; gap: 20px; }
.mg-wholesale__text > * { margin: 0; }
.mg-wholesale__text h2 { font-size: min(46px, 9.5vw); line-height: 1.12; color: var(--wp--preset--color--on-dark); text-wrap: pretty; }
.mg-wholesale__text p:not(.mg-eyebrow) { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--wp--preset--color--on-dark-muted); max-width: 620px; }

@media (max-width: 781px) {
	.mg-flagship-band { padding-bottom: 72px; }
	.mg-range-section { padding-top: 64px; padding-bottom: 64px; }
	.mg-range-section__media { height: 240px; }
	.mg-wholesale { padding-top: 72px; padding-bottom: 72px; }
	.mg-range-nav__inner { padding: 14px 0; }
}