/* ==========================================================================
   Mofe Block Theme — interface system
   One header, one button size, one chip size, one date row.
   Loaded after base.css + components.css, so it is the last word on any
   component that used to be styled in two places.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header shell: sticky, and the template part wrapper removed from layout
   -------------------------------------------------------------------------- */
/* A block theme wraps a template part in <header class="wp-block-template-part">.
   That wrapper is exactly as tall as the header, which gives position:sticky no
   room to travel — so the header scrolls away. Removing the wrapper from the box
   tree fixes the sticky behaviour and lets the announcement bar scroll normally. */
header.wp-block-template-part:has(> .site-header) {
	display: contents;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(250, 248, 245, 0.96);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(231, 225, 223, 0.9);
}

.nav-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 82px;
}

/* --------------------------------------------------------------------------
   2. Navigation: every item is the same box, the caret is a drawn triangle
   -------------------------------------------------------------------------- */
.mofe-nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.5vw, 24px);
	margin-left: auto;
}

.mofe-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 62px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.035em;
	line-height: 1;
	color: #454047;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: color 0.2s;
}

.mofe-nav-item:hover,
.mofe-nav-item:focus-visible,
.mofe-nav-item[aria-current="page"] {
	color: var(--accent-dark);
}

.mofe-drop {
	position: static;
}

.mofe-drop > summary {
	list-style: none;
}

.mofe-drop > summary::-webkit-details-marker {
	display: none;
}

/* Solid triangle — the same shape on every item, independent of font. */
.mofe-drop > summary::after {
	content: "";
	width: 0;
	height: 0;
	margin-top: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.42;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.mofe-drop[open] > summary::after {
	transform: rotate(180deg);
	opacity: 0.8;
}

.mofe-drop-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: none;
	padding: 26px 0 30px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 22px 35px rgba(48, 34, 39, 0.09);
}

.mofe-drop[open] > .mofe-drop-panel {
	display: block;
}

.mofe-drop-inner {
	width: min(var(--container), calc(100% - 56px));
	margin-inline: auto;
}

/* Panels ------------------------------------------------------------------ */
.mofe-drop-panel .mega-grid {
	align-items: start;
}

.mofe-drop-panel .simple-menu {
	display: grid;
	gap: 12px;
}

.mofe-drop-panel .simple-menu--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mofe-drop-panel .simple-menu--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mofe-drop-panel .simple-menu > a {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}

.mofe-drop-panel .simple-menu > a small {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--muted);
}

.mofe-drop-panel .menu-col {
	display: grid;
	gap: 0;
	align-content: start;
}

.mofe-drop-panel .menu-col h4 {
	margin: 0 0 8px;
}

.mofe-drop-panel .menu-col a {
	padding: 5px 0;
	font-size: 11px;
	line-height: 1.45;
	color: #5d565d;
	text-decoration: none;
}

.mofe-drop-panel .menu-col a:hover {
	color: var(--accent-dark);
}

.mofe-drop-panel .mega-feature p {
	margin: 0 0 10px;
}

.mofe-drop-panel .mega-feature h3 {
	margin: 10px 0 8px;
	font-size: 19px;
}

.mofe-nav-cta {
	flex: 0 0 auto;
	height: 44px;
	min-height: 44px;
	padding: 0 16px;
	font-size: 10px;
	letter-spacing: 0.06em;
}

/* Mobile ------------------------------------------------------------------- */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 900px) {
	.nav-wrap {
		flex-wrap: nowrap;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.mofe-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 6px 0 14px;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 22px 35px rgba(48, 34, 39, 0.09);
		max-height: calc(100vh - 82px);
		overflow-y: auto;
		z-index: 90;
	}

	.mofe-nav.is-open,
	.mofe-nav.open {
		display: flex;
	}

	.mofe-nav-item {
		width: 100%;
		min-height: 0;
		padding: 13px 20px;
		justify-content: space-between;
		font-size: 12px;
	}

	.mofe-nav-cta {
		margin: 12px 20px 4px;
		justify-content: center;
		height: 46px;
	}

	.mofe-drop-panel {
		position: static;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.mofe-drop[open] > .mofe-drop-panel {
		padding: 2px 0 12px;
	}

	.mofe-drop-inner {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.mofe-drop-panel .mega-grid,
	.mofe-drop-panel .simple-menu--5,
	.mofe-drop-panel .simple-menu--3 {
		grid-template-columns: 1fr;
	}

	.mofe-drop-panel .mega-grid {
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   3. One control height, one chip height
   -------------------------------------------------------------------------- */
:root {
	--mf-control-h: 46px;
	--mf-chip-h: 26px;
	--mf-nav-cta-h: 36px;
}

.btn,
.mofe-cta,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--mf-control-h);
	padding: 0 18px;
	border-radius: var(--r-control);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.025em;
}

.btn-light,
.wp-block-button.btn-light > .wp-block-button__link {
	background: #fff9f6;
	color: var(--ink);
}

/* Chips keep one height so a row of terms never looks broken. */
.card-meta {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.card-meta > * {
	margin: 0 !important;
}

.card-meta .tag,
.card-meta .wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	height: var(--mf-chip-h);
	max-height: var(--mf-chip-h);
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: transparent;
	font-size: 10px;
	line-height: 1;
	color: #756971;
	white-space: nowrap;
	overflow: hidden;
}

.card-meta .tag p,
.card-meta .tag a,
.card-meta .wp-block-post-terms a {
	margin: 0;
	padding: 0;
	font-size: 10px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.card-meta .wp-block-post-terms__separator {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Product summary: stacked spec pairs, certification strip, thumbs
   -------------------------------------------------------------------------- */
.mofe-quick-spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin-top: 24px;
	padding-top: 4px;
	border-top: 1px solid var(--line);
}

.mofe-spec-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.mofe-spec-key {
	margin: 0;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #93888e;
}

.mofe-spec-value {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink);
}

.mofe-spec-value a {
	color: inherit;
	text-decoration: none;
}

.mofe-cert-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 22px 0 0;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
}

.mofe-cert-strip > * {
	margin: 0;
	padding: 12px 10px;
	background: var(--paper);
}

.mofe-cert-strip strong {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: var(--ink);
}

.mofe-cert-strip span {
	display: block;
	margin-top: 3px;
	font-size: 9px;
	line-height: 1.4;
	color: var(--muted);
}

.mofe-product-thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.mofe-product-thumbs figure {
	margin: 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--sand);
}

@media (max-width: 700px) {
	.mofe-quick-spec {
		grid-template-columns: 1fr;
	}

	.mofe-cert-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   5. Article meta, dates, section heads
   -------------------------------------------------------------------------- */
.article-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 18px;
	margin: 10px 0 18px;
	font-size: 10px;
	color: var(--muted);
}

.article-meta-row .article-meta-tag a {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent-dark);
	text-decoration: none;
}

.article-meta-row .article-meta-readtime {
	margin: 0;
	font-size: 10px;
	color: var(--muted);
}

.article-meta-row .article-date-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: 10px;
	color: var(--muted);
}

.article-meta-row .article-date-label {
	margin-right: 4px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #93888e;
}

.article-meta-row time {
	font-variant-numeric: tabular-nums;
}

/* Every page-level heading block starts from the same place. */
.mofe-page-head,
.category-intro,
.section-head {
	align-items: end;
}

.mofe-page-head h1,
.category-intro h1,
.catalog-listing-head h2,
.section-head h2 {
	margin-top: 10px;
}

.mofe-page-head .lead,
.category-intro .lead {
	margin-bottom: 0;
}

/* The product summary uses the excerpt as a lead, never as a "read more" link. */
.product-summary .wp-block-post-excerpt__more-link {
	display: none;
}

/* 404 and other standalone heads share the reading measure of the page. */
.mofe-404-head {
	max-width: 780px;
	margin: 8px 0 24px;
}

.mofe-404-head h1 {
	margin: 10px 0 14px;
}

.mofe-404-head .lead {
	margin: 0 0 22px;
}

.mofe-404-head .mofe-search {
	margin-top: 22px;
}


/* ==========================================================================
   6. Rhythm audit — one vertical scale, applied to the real structures
   The previous blanket `.wp-block-group{margin:0}` reset erased every margin
   the design system defines. Spacing is now declared here, once.
   ========================================================================== */
:root {
	--mf-gap-xs: 8px;
	--mf-gap-s: 12px;
	--mf-gap-m: 20px;
	--mf-gap-l: 32px;
	--mf-gap-xl: 48px;
	--mf-gap-2xl: 72px;
}

/* Heading block → content block */
.section-head {
	margin-bottom: var(--mf-gap-l);
}

.section-head h2,
.catalog-listing-head h2 {
	margin-bottom: 0;
}

.section-head .section-intro,
.section-head .is-style-section-intro {
	margin-bottom: 0;
	max-width: 420px;
}

.eyebrow + h1,
.eyebrow + h2,
.eyebrow + .wp-block-post-title {
	margin-top: var(--mf-gap-s);
}

/* Content block → action */
.mofe-after-grid,
.section-head + .wp-block-buttons,
.cards + .wp-block-buttons,
.wp-block-columns + .wp-block-buttons,
.mofe-query + .wp-block-buttons {
	margin-top: var(--mf-gap-l);
}

.cards,
.feature-grid,
.steps,
.two-col {
	margin-block: var(--mf-gap-l);
}

.cards:first-child,
.feature-grid:first-child {
	margin-top: 0;
}

/* Cards carry their own footer link, so they need room before the frame edge */
.product-body,
.mofe-card .wp-block-post-excerpt {
	padding-bottom: var(--mf-gap-m);
}

.product-body > :last-child,
.mofe-card .wp-block-post-excerpt > :last-child {
	margin-bottom: 0;
}

/* Chips row → actions row */
.card-meta {
	margin-bottom: var(--mf-gap-m);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* ==========================================================================
   7. Stats strip — one numeric style, one label style, honest columns
   ========================================================================== */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	align-items: end;
}

.stats-grid > p,
.stats-grid > div {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0 20px;
	border-right: 1px solid var(--line);
	min-width: 0;
}

.stats-grid > p:first-child,
.stats-grid > div:first-child {
	padding-left: 0;
}

.stats-grid > p:last-child,
.stats-grid > div:last-child {
	border-right: 0;
}

.stats-grid > p strong,
.stats-grid > div strong {
	font-family: "Manrope", "DM Sans", sans-serif;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--accent-dark);
	white-space: nowrap;
}

.stats-grid > p span,
.stats-grid > div span {
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   8. Tables — remove the core frame, keep the design's hairlines
   ========================================================================== */
.wp-block-table {
	margin: 0;
}

.wp-block-table table {
	border: 0;
	border-collapse: collapse;
}

.wp-block-table table :where(th, td) {
	border-color: var(--line);
}

.wp-block-table .spec-table th {
	background: #f5f0ec;
	color: #5b4e55;
	font-weight: 800;
}

/* ==========================================================================
   9. Whole card is the link, the footer link stays clickable
   ========================================================================== */
.mofe-query .product-card,
.cards .product-card,
.mofe-card {
	position: relative;
}

.mofe-query .product-card .product-body h3 a::after,
.mofe-query .product-card .wp-block-post-title a::after,
.mofe-card .wp-block-post-title a::after,
.mofe-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.mofe-query .product-card .wp-block-read-more,
.mofe-query .product-card .text-link,
.mofe-query .product-card .wp-block-post-terms a,
.mofe-card .wp-block-post-excerpt__more-link {
	position: relative;
	z-index: 2;
}

.mofe-query .product-card:hover {
	border-color: #dcc3ca;
	box-shadow: 0 16px 42px rgba(47, 35, 38, 0.09);
}

/* ==========================================================================
   10. Forms — compact enough to fill without scrolling twice
   ========================================================================== */
.mofe-form-wrap {
	display: block;
}

.mofe-inquiry-form {
	display: grid;
	gap: 12px;
	margin: 0;
}

.mofe-inquiry-form.form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.mofe-inquiry-form .field {
	margin: 0;
	gap: 5px;
}

.mofe-inquiry-form .field label {
	margin: 0;
	font-size: 9px;
	line-height: 1.4;
}

.mofe-inquiry-form .field input,
.mofe-inquiry-form .field select {
	min-height: 42px;
	padding: 9px 11px;
}

.mofe-inquiry-form .field textarea {
	min-height: 84px;
	padding: 9px 11px;
}

.mofe-form-actions {
	margin-top: 4px;
	gap: 8px;
}

.mofe-submit,
.mofe-panel-submit {
	min-height: var(--mf-control-h);
	border-radius: var(--r-control);
	font-size: 11px;
	font-weight: 800;
	padding: 0 18px;
}

/* ==========================================================================
   11. Breadcrumbs — one separator, one weight
   ========================================================================== */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	font-size: 10px;
	color: #8a8185;
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: #8a8185;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--accent-dark);
}

.breadcrumbs [aria-current="page"] {
	color: var(--ink);
}

.mofe-breadcrumb-sep {
	color: #c9bfc3;
}

/* ==========================================================================
   12. Product body — every section uses the same 1240 grid
   ========================================================================== */
.mofe-product-body > .wp-block-post-content > .section {
	padding: 64px 0;
	margin: 0;
}

.mofe-product-body > .wp-block-post-content > .section > * {
	width: min(var(--container), calc(100% - 56px));
	margin-inline: auto;
}

.mofe-product-body > .wp-block-post-content > .section.alt {
	background: var(--sand);
}

.mofe-product-body > .wp-block-post-content > .section.soft {
	background: var(--accent-pale);
}

.mofe-product-body > .wp-block-post-content > .section > .section-head {
	margin-bottom: var(--mf-gap-l);
}

.mofe-product-body > .wp-block-post-content > .section > .wp-block-table {
	width: min(var(--container), calc(100% - 56px));
}

/* Section intro text must not run the full 1240 */
.section-head > .section-intro,
.section-head > .is-style-section-intro,
.section-head > .wp-block-paragraph:last-child {
	max-width: 380px;
	margin-left: auto;
}

/* ==========================================================================
   13. Trust strip — the same gap between every step
   ========================================================================== */
.trust-strip-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}

.trust-strip-label {
	margin: 0;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #93888e;
}

.trust-strip-inner > p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.trust-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	color: #625861;
	white-space: nowrap;
}

.trust-tag > span {
	color: var(--accent-dark);
	font-size: 9px;
	letter-spacing: 0.08em;
}

@media (max-width: 700px) {
	.trust-strip-inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
	}

	.trust-strip-inner > p {
		gap: 8px 18px;
	}

	.stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 0;
	}

	.stats-grid > p:nth-child(2),
	.stats-grid > div:nth-child(2) {
		border-right: 0;
	}

	.stats-grid > p:nth-child(odd),
	.stats-grid > div:nth-child(odd) {
		padding-left: 0;
	}
}

/* The excerpt is used as a lead in page heads, never as a "read more" link. */
.category-intro .wp-block-post-excerpt__more-link,
.mofe-page-head .wp-block-post-excerpt__more-link,
.mofe-page-head .wp-block-post-excerpt__more-text {
	display: none;
}

/* ==========================================================================
   14. INQUIRY: a button that sits inside the menu row
   Same type spec and row height as the text items, filled background kept,
   no arrow. It links to the contact page.
   ========================================================================== */
.mofe-nav .mofe-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--mf-nav-cta-h, 36px);
	min-height: var(--mf-nav-cta-h, 36px);
	padding: 0 15px;
	border-radius: 6px;
	background-color: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.035em;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease;
}

.mofe-nav .mofe-nav-cta:hover {
	background-color: var(--accent-dark);
	color: #fff;
}

.mofe-nav .mofe-nav-cta .btn-arrow {
	display: none;
}

@media (max-width: 900px) {
	.mofe-nav .mofe-nav-cta {
		height: 40px;
		min-height: 40px;
		margin: 12px 20px 4px;
		font-size: 11px;
	}
}

/* ==========================================================================
   15. Sticky header must clear the WordPress admin bar
   Logged-in pages have a 32px (46px on small screens) fixed admin bar; a
   header at top:0 slides underneath it and the page text shows through.
   ========================================================================== */
body.admin-bar .site-header,
body.admin-bar header.wp-block-template-part > .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar header.wp-block-template-part > .site-header {
		top: 46px;
	}
}

/* Anchors and in-page links should stop below the header, not behind it. */
html {
	scroll-padding-top: 110px;
}

body.admin-bar {
	--wp-admin--admin-bar--height: 32px;
}

/* ==========================================================================
   16. Catalogue sidebar rhythm
   ========================================================================== */
.mofe-sidebar {
	display: grid;
	gap: 16px;
	align-content: start;
}

.mofe-sidebar > * {
	margin: 0;
}

.mofe-sidebar-widget {
	padding: 18px 18px 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
}

.mofe-sidebar .wp-block-heading {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mofe-sidebar .wp-block-details {
	border-bottom: 1px solid var(--line);
	padding: 0;
	margin: 0;
}

.mofe-sidebar .wp-block-details:last-of-type {
	border-bottom: 0;
}

.mofe-sidebar .wp-block-details summary {
	padding: 10px 0;
	font-size: 11px;
}

.mofe-sidebar .wp-block-details .wp-block-list {
	padding: 0 0 8px;
	margin: 0;
	gap: 0;
}

.mofe-sidebar .wp-block-details .wp-block-list:empty {
	display: none;
}

.mofe-sidebar .wp-block-details .wp-block-list a {
	padding: 4px 0;
	font-size: 10px;
}

.mofe-sidebar-note p {
	margin: 0;
	font-size: 10px;
	line-height: 1.7;
}

.mofe-sidebar .mofe-form-wrap,
.mofe-sidebar .mofe-inquiry-form {
	gap: 10px;
}

.mofe-sidebar .mofe-inquiry-form .field input,
.mofe-sidebar .mofe-inquiry-form .field select {
	min-height: 38px;
	font-size: 11px;
}

.mofe-sidebar .mofe-inquiry-form .field textarea {
	min-height: 72px;
	font-size: 11px;
}

/* ==========================================================================
   17. Footer social links
   ========================================================================== */
.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: #e6d9de;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-social a:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

/* ==========================================================================
   18. Type scale — one size per role, everywhere
   Measured before: H1 appeared at 67/54/43, H2 at 48/42/34/33/30/27, H3 at
   21/19/16. Same role, different size on every template. Fixed here.
   ========================================================================== */
:root {
	--mf-h1-hero: clamp(40px, 5.2vw, 64px);
	--mf-h1: clamp(32px, 3.4vw, 48px);
	--mf-h1-sm: clamp(28px, 2.8vw, 40px);
	--mf-h2: clamp(24px, 2.4vw, 34px);
	--mf-h3: 18px;
	--mf-h3-lg: 21px;
	--mf-widget-h: 13px;
	--mf-input-h: 44px;
	--mf-input-h-sm: 38px;
}

/* Page level headings */
.hero h1,
.mofe-main .hero h1 {
	font-size: var(--mf-h1-hero);
}

.category-intro h1,
.category-intro .wp-block-post-title,
.mofe-page-head h1,
.mofe-page-head .wp-block-post-title,
.mofe-404-head h1,
.wp-block-query-title {
	font-size: var(--mf-h1);
	line-height: 1.08;
}

.product-summary .wp-block-post-title,
.article-main > .wp-block-post-title {
	font-size: var(--mf-h1-sm);
	line-height: 1.1;
}

/* Section headings */
.section-head h2,
.catalog-listing-head h2,
.material-browse__head h2,
.split-copy h2,
.mofe-spec-full h2,
.quote-band h2,
.wp-block-post-content .section-head h2 {
	font-size: var(--mf-h2);
	line-height: 1.16;
}

/* Card and column headings */
.product-body h3,
.product-body .wp-block-post-title,
.mofe-card h3,
.mofe-card .wp-block-post-title,
.feature h3,
.info-card h3,
.material-family-card h3,
.article-card h3 {
	font-size: var(--mf-h3);
	line-height: 1.3;
}

/* Long-form article headings stay a step larger than cards */
.article-body .wp-block-post-content h2 {
	font-size: calc(var(--mf-h2) - 4px);
}

.article-body .wp-block-post-content h3 {
	font-size: var(--mf-h3-lg);
}

.article-author-card h2 {
	font-size: var(--mf-h3);
}

.mofe-sidebar .wp-block-heading {
	font-size: var(--mf-widget-h);
}

/* ==========================================================================
   19. Control heights — inputs follow the same two-step scale as buttons
   ========================================================================== */
.mofe-inquiry-form .field input,
.mofe-inquiry-form .field select {
	min-height: var(--mf-input-h);
}

.mofe-sidebar .mofe-inquiry-form .field input,
.mofe-sidebar .mofe-inquiry-form .field select {
	min-height: var(--mf-input-h-sm);
}

/* Footer links need a real tap target, not an 18px line — but each column
   link must still sit on its own row. */
.footer-col a {
	display: flex;
	align-items: center;
	min-height: 26px;
	padding: 3px 0;
}

.footer-legal a,
.footer-bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
}

@media (max-width: 700px) {
	.footer-col a {
		min-height: 34px;
	}
}

/* ==========================================================================
   20. Accessibility baseline
   ========================================================================== */
.mofe-nav-item:focus-visible,
.mofe-nav-cta:focus-visible,
.product-card a:focus-visible,
.mofe-card a:focus-visible,
.footer-col a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   21. Card media is square everywhere
   ========================================================================== */
.mofe-query .product-card .product-image,
.mofe-query .product-card .mofe-card-media,
.cards .product-card .product-image,
.mofe-card .mofe-card-media,
.article-card .article-image,
.material-family-card__image {
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.mofe-query .product-card .product-image img,
.mofe-query .product-card .mofe-card-media img,
.cards .product-card .product-image img,
.mofe-card .mofe-card-media img,
.article-card .article-image img,
.material-family-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   22. Specification tables on small screens
   A two column key/value table reads better stacked than scrolled, so each
   row becomes a label + value block. Tables that have a header row (three or
   more columns) keep a horizontal scroll instead.
   ========================================================================== */
.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
	.spec-table:not(:has(thead)),
	.spec-table:not(:has(thead)) tbody,
	.spec-table:not(:has(thead)) tr,
	.spec-table:not(:has(thead)) th,
	.spec-table:not(:has(thead)) td {
		display: block;
		width: 100%;
	}

	.spec-table:not(:has(thead)) tr {
		padding: 10px 14px;
		border-bottom: 1px solid var(--line);
		background: var(--paper);
	}

	.spec-table:not(:has(thead)) tr:last-child {
		border-bottom: 0;
	}

	.spec-table:not(:has(thead)) th {
		padding: 0 0 3px;
		border: 0;
		background: transparent;
		font-size: 9px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #93888e;
	}

	.spec-table:not(:has(thead)) td {
		padding: 0;
		border: 0;
		font-size: 12px;
		line-height: 1.55;
	}

	.wp-block-table .spec-table:not(:has(thead)) {
		border: 1px solid var(--line);
		border-radius: var(--r-card);
		overflow: hidden;
	}
}

/* ==========================================================================
   23. Table of contents: sidebar on desktop, disclosure on small screens
   ========================================================================== */
.article-sidebar {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.article-sidebar > summary {
	list-style: none;
	cursor: default;
}

.article-sidebar > summary::-webkit-details-marker {
	display: none;
}

@media (min-width: 981px) {
	.article-sidebar > summary {
		pointer-events: none;
	}
}

@media (max-width: 980px) {
	.article-sidebar {
		margin: 0 0 26px;
		padding: 0 16px 4px;
		background: var(--paper);
		border: 1px solid var(--line);
		border-radius: var(--r-card);
	}

	.article-sidebar > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 13px 0;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink);
		cursor: pointer;
	}

	.article-sidebar > summary::after {
		content: "+";
		font-size: 15px;
		font-weight: 400;
		color: var(--muted);
	}

	.article-sidebar[open] > summary::after {
		content: "\2212";
	}

	.article-sidebar .article-toc {
		display: grid;
		gap: 2px;
		padding: 0 0 12px;
	}

	.article-sidebar .article-toc a {
		padding: 7px 0;
		font-size: 11px;
		border-bottom: 1px solid var(--line);
	}

	.article-sidebar .article-toc a:last-child {
		border-bottom: 0;
	}

	.article-sidebar .article-toc-note {
		margin: 0 0 10px;
	}
}

/* ==========================================================================
   24. Hover: colour only, no movement
   ========================================================================== */
.btn:hover,
.btn:focus-visible,
.wp-block-button__link:hover,
.mofe-cta:hover,
.mofe-submit:hover,
.mofe-panel-submit:hover,
.product-card:hover,
.mofe-card:hover,
.material-family-card:hover,
article.product-card:hover {
	transform: none;
}

.text-link:hover span,
.text-link:hover .btn-arrow,
.mofe-card-link:hover span {
	transform: none;
}

.product-card:hover .product-image img,
.mofe-card:hover .mofe-card-media img {
	transform: none;
}

/* Breadcrumb links get a real tap target on small screens */
@media (max-width: 700px) {
	.breadcrumbs {
		gap: 4px;
	}

	.breadcrumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		padding: 0 2px;
	}
}

/* ==========================================================================
   25. Dark bands: headings and eyebrows must not inherit the body ink colour
   ========================================================================== */
.quote-band h2,
.quote-band h3,
.section.dark h2,
.section.dark h3,
.section-dark h2,
.section-dark h3 {
	color: #fff8f5;
}

.quote-band p,
.section.dark p,
.section-dark p {
	color: #d6c9ce;
}

.quote-band .eyebrow,
.section.dark .eyebrow,
.section-dark .eyebrow {
	color: #e7b9c6;
}

.quote-band .eyebrow::before,
.section.dark .eyebrow::before,
.section-dark .eyebrow::before {
	background: #e7b9c6;
}

/* ==========================================================================
   26. Footer AI block: icon buttons + Google preferred source
   ========================================================================== */
.mofe-ai-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mofe-ai-footer-copy {
	flex: 1 1 260px;
	min-width: 0;
}

.mofe-ai-kicker {
	display: block;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e5b4c0;
}

.mofe-ai-footer-copy h4 {
	margin: 6px 0 4px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff8f5;
	text-transform: none;
}

.mofe-ai-footer-copy p {
	margin: 0;
	font-size: 10px;
	line-height: 1.7;
	color: #bdb0b6;
	max-width: 380px;
}

.mofe-ai-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mofe-ai-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #efe3e7;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mofe-ai-icon svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.mofe-ai-icon:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
}

.mofe-preferred {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	height: 42px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: #1d191c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.mofe-preferred:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: #262024;
	color: #fff;
}

.mofe-preferred-logo {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}

@media (max-width: 700px) {
	.mofe-ai-footer {
		padding: 22px 0;
	}

	.mofe-ai-icon {
		width: 38px;
		height: 38px;
	}

	.mofe-preferred {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   27. Separators inside post content
   WordPress gives every separator a 100px stub by default; inside an article
   they read as stray lines. Turn them into full width hairlines.
   ========================================================================== */
.wp-block-post-content .wp-block-separator,
.article-body .wp-block-separator {
	width: 100%;
	max-width: 100%;
	height: 0;
	margin: 2.4em auto;
	border: 0;
	border-top: 1px solid var(--line);
	background: none;
	opacity: 1;
}

/* ==========================================================================
   28. Author card: LinkedIn as an icon, not a line of text
   ========================================================================== */
.article-author-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.article-author-icon svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.article-author-icon:hover {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

/* ==========================================================================
   29. Breadcrumbs: one size, one rhythm, everywhere
   ========================================================================== */
.breadcrumbs {
	gap: 7px;
	font-size: 11px;
	line-height: 1.4;
}

.breadcrumbs a,
.breadcrumbs [aria-current="page"] {
	font-size: 11px;
}

.mofe-breadcrumb-sep {
	opacity: 0.55;
}

/* ==========================================================================
   30. Sidebar form: compact enough to fill in one screen
   ========================================================================== */
.mofe-sidebar .mofe-sidebar-widget {
	padding: 16px 16px 14px;
}

.mofe-sidebar .wp-block-heading {
	margin-bottom: 8px;
	padding-bottom: 7px;
}

.mofe-sidebar .mofe-inquiry-form {
	gap: 8px;
}

.mofe-sidebar .mofe-inquiry-form .field {
	gap: 4px;
}

.mofe-sidebar .mofe-inquiry-form .field label {
	font-size: 8px;
	letter-spacing: 0.06em;
}

.mofe-sidebar .mofe-inquiry-form .field input,
.mofe-sidebar .mofe-inquiry-form .field select {
	min-height: 36px;
	padding: 7px 10px;
	font-size: 11px;
}

.mofe-sidebar .mofe-inquiry-form .field textarea {
	min-height: 64px;
	padding: 8px 10px;
}

.mofe-sidebar .mofe-form-actions {
	margin-top: 2px;
}

.mofe-sidebar .mofe-submit {
	min-height: 40px;
}

.mofe-sidebar .mofe-form-privacy {
	font-size: 8px;
	line-height: 1.5;
}

/* ==========================================================================
   31. 404 panel — centred, like the static page
   ========================================================================== */
.mofe-404-panel {
	text-align: center;
	padding: 70px 0 40px;
}

.mofe-404-panel .eyebrow {
	justify-content: center;
}

.mofe-404-panel h1 {
	margin: 14px 0 16px;
}

.mofe-404-panel .lead {
	margin-inline: auto;
	margin-bottom: 26px;
	max-width: 560px;
}

.mofe-404-actions {
	justify-content: center;
}

.footer-legal-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 9px;
	color: #bdb0b6;
}

.footer-legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	color: #bdb0b6;
	text-decoration: none;
}

.footer-legal-links a:hover {
	color: #fff;
}

/* ==========================================================================
   32. Brand lockup: a long site name must not push the menu around
   The wordmark was fixed at 28px. With a name like "Rainbow Red Light Therapy"
   it took 309px and the navigation lost its place. The title now scales with
   the viewport, never wraps, and the nav keeps its own space.
   ========================================================================== */
.nav-wrap {
	gap: clamp(16px, 2vw, 28px);
}

.mofe-brand {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 46%;
}

.mofe-brand .wp-block-site-title {
	margin: 0;
	font-size: clamp(16px, 1.15vw + 8px, 21px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mofe-brand .wp-block-site-title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mofe-nav {
	margin-left: auto;
	flex: 0 1 auto;
	min-width: 0;
}

/* When a logo is used instead of the wordmark the logo keeps its own size. */
.mofe-brand:has(.wp-block-site-logo) {
	max-width: none;
}

@media (max-width: 1100px) {
	.mofe-brand {
		max-width: 38%;
	}

	.mofe-brand .wp-block-site-title {
		font-size: clamp(15px, 2.6vw, 18px);
	}
}

@media (max-width: 900px) {
	.mofe-brand {
		max-width: calc(100% - 60px);
	}

	.mofe-brand .wp-block-site-title {
		font-size: 16px;
	}
}

/* ==========================================================================
   33. Inquiry form: two columns, tighter rhythm, cleaner borders
   ========================================================================== */
.mofe-form-wrap {
	display: block;
}

.mofe-inquiry-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0;
}

.mofe-inquiry-form .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 0;
	min-width: 0;
}

.mofe-inquiry-form .field.full {
	grid-column: 1 / -1;
}

.mofe-inquiry-form .field label {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7280;
}

.mofe-inquiry-form .field input,
.mofe-inquiry-form .field select,
.mofe-inquiry-form .field textarea {
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font-size: 12px;
	line-height: 1.5;
	min-height: 40px;
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mofe-inquiry-form .field textarea {
	min-height: 88px;
	resize: vertical;
}

.mofe-inquiry-form .field input::placeholder,
.mofe-inquiry-form .field textarea::placeholder {
	color: #9aa3af;
}

.mofe-inquiry-form .field input:hover,
.mofe-inquiry-form .field select:hover,
.mofe-inquiry-form .field textarea:hover {
	border-color: #cbd5e1;
}

.mofe-inquiry-form .field input:focus,
.mofe-inquiry-form .field select:focus,
.mofe-inquiry-form .field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(164, 86, 106, 0.14);
	background: #fff;
}

/* Two columns as soon as the form has the room. A 280px sidebar stays single
   column on purpose: two 110px inputs cannot hold an email address. */
@container (min-width: 300px) {
	.mofe-inquiry-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mofe-inquiry-form.form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.mofe-form-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
}

.mofe-submit {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mofe-submit:hover {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
	box-shadow: 0 8px 20px rgba(164, 86, 106, 0.24);
}

.mofe-form-privacy {
	font-size: 12px;
	line-height: 1.6;
	color: #6b7280;
}

.mofe-form-privacy a {
	color: var(--accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sidebar widget is the container the form measures itself against */
.mofe-sidebar-widget {
	container-type: inline-size;
}

.mofe-sidebar .mofe-inquiry-form {
	gap: 12px;
}

.mofe-sidebar .mofe-inquiry-form .field input,
.mofe-sidebar .mofe-inquiry-form .field select {
	min-height: 38px;
	padding: 8px 11px;
}

.mofe-sidebar .mofe-inquiry-form .field textarea {
	min-height: 76px;
}

.mofe-sidebar .mofe-form-privacy {
	font-size: 11px;
}

/* ==========================================================================
   34. Category hero: copy on the left, large media panel on the right
   ========================================================================== */
.mofe-cat-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: 8px 0 4px;
}

.mofe-cat-hero-copy {
	min-width: 0;
	max-width: 560px;
}

.mofe-cat-hero-copy .breadcrumbs {
	margin-bottom: 18px;
}

.mofe-cat-hero-copy h1,
.mofe-cat-hero-copy .wp-block-post-title,
.mofe-cat-hero-copy .wp-block-query-title {
	margin: 12px 0 14px;
}

.mofe-cat-hero-copy .lead,
.mofe-cat-hero-copy .wp-block-term-description {
	font-size: 13px;
	line-height: 1.8;
	color: var(--muted);
	max-width: 470px;
	margin: 0 0 22px;
}

.mofe-cat-hero-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--sand);
	min-width: 0;
}

.mofe-cat-hero-media img,
.mofe-cat-hero-media figure,
.mofe-cat-hero-media .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.mofe-cat-hero-media img {
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.mofe-cat-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mofe-cat-hero-media {
		aspect-ratio: 16 / 9;
	}

	.mofe-cat-hero-copy {
		max-width: none;
	}
}