/*
 * 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: 76px;
	--mg-header-h: 137px;
}

/* ---------------------------------------------------------------- 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:not(:disabled) { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); }

/* The carousel stops at its ends rather than wrapping, so the arrow for an end
   already reached is disabled and reads as unavailable. */
.mg-arrow:disabled { opacity: .3; cursor: default; }
.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 */

/*
 * A template part renders inside its own wrapper div, and a sticky element can
 * only travel within its parent. That wrapper is only as tall as the header,
 * so sticky had nowhere to go. Collapsing the wrapper makes the header a child
 * of .wp-site-blocks, which spans the page.
 */
.wp-block-template-part:has(> .mg-header) { display: contents; }

/*
 * 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: 0 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: 136px; height: 136px; 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; }


.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; }
}

@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)); }
/*
 * Two up, as the design lays them out. The homepage band puts this in a column
 * roughly half the shell wide, so it drops to one up on its own width rather
 * than the viewport's - a viewport rule would leave it cramped in the range
 * where the band is still two columns.
 */
.mg-grid--awards { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One up, on a phone: the logo sits above the name rather than beside it. */
@container (max-width: 440px) {
	.mg-grid--awards { grid-template-columns: 1fr; }
	.mg-badge { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
	.mg-badge img { width: auto; max-height: 88px; }
}

/*
 * The logo stays beside the name, as the design has it. On the homepage that
 * column is only about 500-700px wide, so two tiles leave roughly 250px each
 * and the badge scales down to fit rather than restacking.
 */
@container (max-width: 860px) {
	.mg-badge { gap: 20px; min-height: 112px; }
	.mg-badge img { max-height: 96px; }
	.mg-badge__year { font-size: 12px; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.mg-grid--awards { grid-template-columns: 1fr; }
		.mg-badge { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
	}
}

.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); }

/*
 * The cards are anchors themselves rather than articles containing one, so the
 * whole tile is the link: no overlay, text stays selectable, and a screen
 * reader gets one target instead of two. A card with nowhere to go stays an
 * article, so these also have to read sensibly on a plain element.
 */
.mg-card,
.mg-recipe-card,
.mg-recipe-tile,
.mg-hero-card {
	color: inherit;
	text-decoration: none;
}

.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; }
/*
 * The fan favourite shots are studio product photos on a light grey seamless,
 * so cover was slicing the top and bottom off tall bottles. contain shows the
 * whole product, and a light tile behind it blends with the photo's own
 * background instead of letterboxing against the dark card.
 */
.mg-card__media--short {
	height: 340px;
	background: #F2F2F0;
}

.mg-card__media--short img { object-fit: contain; }

.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;
}

/* The award panel is taller than it is wide between roughly 1040px and 1440px,
   so whatever sits at the edges of this image gets cropped. The artwork keeps
   the Bunnings lockup top-left, and the crop is anchored top-left, so the
   lockup is never the thing that gets trimmed. */
.mg-award__media { position: relative; min-height: 720px; }
.mg-award__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

.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); }

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

.mg-badge {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 28px;
	padding: 18px 22px;
	min-height: 124px;
	background: var(--wp--preset--color--bark-deep);
	border: 1px solid #2A2420;
	min-width: 0;
}

/* The logo fills its half and is capped in height so a square mark does not
   push the tile taller than a wide one. */
.mg-badge img { width: 100%; height: auto; max-width: 100%; max-height: 118px; 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: 16px; text-transform: uppercase; color: var(--wp--preset--color--on-dark); line-height: 1.3; }
.mg-badge__year { font-size: 13px; 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-direction: column;
	align-items: center;
	gap: 26px;
	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: 30px 28px;
	min-height: 164px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--panel);
}

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

/* The client reads the tiles as fine on a phone, so only desktop grows. */
@media (max-width: 781px) {
	.mg-logo-tile img { height: 84px; max-width: 240px; }
}

/* 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); }

/* ----------------------------------------------------------------- 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-partners__hero-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}

/*
 * Bunnings is a square badge and Mitre 10 a wide wordmark, so a shared height
 * makes Mitre 10 look several times larger. Capping both dimensions lets each
 * hit whichever one binds: Bunnings fills the height, Mitre 10 the width, and
 * the two read at a similar size.
 */
.mg-logo-hero {
	width: auto;
	height: auto;
	max-height: 150px;
	max-width: 330px;
	object-fit: contain;
}

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

@media (max-width: 781px) {
	.mg-logo-hero { max-height: 104px; max-width: 240px; }
	.mg-partners__hero-label { font-size: 17px; }
}

/* ============================================================ 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;
}

/* The Bunnings badge is in the top-right corner of the shot, so that corner is
   the one the crop has to keep. */
.mg-award__media .wp-block-image img { object-position: top left; }

/* The award grid stacks at about 1040px (two 520px columns), and below that the
   media panel is always wider than it is tall. The 4:5 artwork loses too much
   of the products to the crop there, so the page serves the square version
   instead - and that one carries the Bunnings lockup top-right, so the anchor
   has to flip with it. */
@media (max-width: 1040px) {
	.mg-award__media img,
	.mg-award__media .wp-block-image img { object-position: top right; }
}

.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 {
	container-type: inline-size;
	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 { max-height: 140px; }
.mg-dark-band .mg-badge__name { font-size: 17px; }

/* --- 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) ------------------------------------ */

/*
 * auto-fill, not auto-fit: auto-fit collapses the tracks nothing lands in and
 * the remaining cards stretch across the row, which is what a single "products
 * used" entry was doing. auto-fill keeps the empty tracks, so a short row sits
 * at the width a full one would.
 */
.mg-recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 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(40%, max(150px, 13%)), 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 */

/* Force the button background color to stay permanently red */
#gform_submit_button_1 {
        background: #FF0000 !important;
        background-color: #c9481a !important;
        color: #FFFFFF !important;
        border: none !important;
        box-shadow: none !important;
        margin-top: 8px !important;
        font-size: 12.5px !important;
        text-transform: uppercase !important;
        padding: 20px 42px !important;
    }


body .mg-contact-form #input_1_4.gfield_radio div.gchoice:first-child {
    display: block !important; 
    position: relative !important;
} 

body .mg-contact-form #choice_1_4_0[type="radio"] {
    display: block !important; 
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

body .mg-contact-form #label_1_4_0 {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important; 
    text-align: center !important; 
} 


#input_1_4 {
	margin-top:7px !important;
}

.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; }

/* Store or business: label, input and its note sit together with no gap. */
.mg-contact-form .gform_wrapper #field_1_5 { gap: 0; }

.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); }

/* The asterisk sits tight against its label, and the legend explaining it is not shown. */
.mg-contact-form .gform_wrapper .gform-field-label__text { padding-inline-end: 0; }
.mg-contact-form .gform_wrapper .gform_required_legend { display: none; }

.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; }

/* Phone: the country button fills the row so it stands as tall as the number
   input beside it, and takes the same border and fill. */
.mg-contact-form .gform_wrapper .gfield--type-phone .ginput_country-selector_container { display: flex; }

.mg-contact-form .gform_wrapper.gform-theme .gfield--type-phone .gform-phone button.gform-phone__country-selector {
	height: 100%;
	min-height: 0;
	padding-block: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	background: var(--wp--preset--color--panel);
	box-shadow: none;
}

.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;
    grid-column: 1 / -1 !important;  /* Forces the text to start at the absolute left edge */
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}


.mg-contact-form .gform_wrapper .gchoice label,
body .mg-contact-form #input_1_4 .gchoice label {
    display: flex !important;
    justify-content: center !important; /* Centers text horizontally */
    align-items: center !important;     /* Centers text vertically */
    text-align: center !important;
    padding-left: 22px !important;      /* Re-balances the inner left padding */
}

.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-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; }
}