/**
 * MR Balaclava Material Library components (plugin). Built on the theme's B2B tokens
 * (--b2b-*) when they exist (Material Library pages, rebuilt core pages); the
 * fallbacks keep the same look on older pages and without the theme.
 * html[data-theme="night"] is the site's Light / Dark / System switch.
 */

.mrbml,
.mrbml-section,
.mrbml-page-main {
	--ml-ink: var(--b2b-ink, #0E1418);
	--ml-title: var(--b2b-title, #0A3346);
	--ml-muted: var(--b2b-muted, #4A5A66);
	--ml-line: var(--b2b-line, #DCE4EA);
	--ml-line2: var(--b2b-line2, #EAF0F3);
	--ml-line-hover: var(--b2b-line-hover, #A9C7D3);
	--ml-paper: var(--b2b-paper, #FFFFFF);
	--ml-paper2: var(--b2b-paper2, #F2F5F7);
	--ml-tint: var(--b2b-tint, #F9FBFC);
	--ml-soft: var(--b2b-soft, #D4EAF2);
	--ml-brand: var(--b2b-brand, #13566E);
	--ml-link: var(--cp-link, var(--b2b-brand, #13566E));
	--ml-eyebrow: var(--b2b-eyebrow, #0E6686);
	--ml-btn: var(--b2b-btn, #13566E);
	--ml-btn-hover: var(--b2b-btn-hover, #0E4560);
	--ml-on-btn: var(--b2b-on-btn, #FFFFFF);
	--ml-field-line: var(--b2b-field-line, #7F909B);
	--ml-focus: var(--b2b-focus, #13566E);
	--ml-shadow: var(--b2b-shadow, 0 18px 42px -30px rgba(10, 51, 70, .55));
	--ml-display: var(--b2b-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
	--ml-body: var(--b2b-body, 'Inter', system-ui, sans-serif);
	--ml-mono: var(--b2b-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--ml-radius: var(--cp-radius, 14px);
	--ml-good: #13703B;
	--ml-good-bg: #EAF8EF;
	--ml-test: #7A4E00;
	--ml-test-bg: #FFF3D6;
	--ml-no: #8C2F2F;
	--ml-no-bg: #FBECEC;
}
html[data-theme="night"] .mrbml,
html[data-theme="night"] .mrbml-section,
html[data-theme="night"] .mrbml-page-main {
	--ml-ink: var(--b2b-ink, #E6EEF3);
	--ml-title: var(--b2b-title, #E6EEF3);
	--ml-muted: var(--b2b-muted, #A3B3BF);
	--ml-line: var(--b2b-line, #26333C);
	--ml-line2: var(--b2b-line2, #1C272F);
	--ml-line-hover: var(--b2b-line-hover, #3F5B69);
	--ml-paper: var(--b2b-paper, #121C23);
	--ml-paper2: var(--b2b-paper2, #0B1015);
	--ml-tint: var(--b2b-tint, #0E151B);
	--ml-soft: var(--b2b-soft, #132A34);
	--ml-brand: var(--b2b-brand, #4AB8D4);
	--ml-link: var(--cp-link, #8AD4E8);
	--ml-eyebrow: var(--b2b-eyebrow, #4AB8D4);
	--ml-btn: var(--b2b-btn, #2A7A98);
	--ml-btn-hover: var(--b2b-btn-hover, #236A85);
	--ml-field-line: var(--b2b-field-line, #5E7280);
	--ml-good: #7DDBA3;
	--ml-good-bg: #10281C;
	--ml-test: #F2C46B;
	--ml-test-bg: #2A2110;
	--ml-no: #F0A0A0;
	--ml-no-bg: #2C1414;
}

.mrbml { color: var(--ml-ink); font-family: var(--ml-body); }
.mrbml *, .mrbml *::before, .mrbml *::after { box-sizing: border-box; }
.mrbml :where(ul, ol, dl, dd, figure, p, h3, h4) { margin: 0; padding: 0; }
.mrbml :where(ul, ol) { list-style: none; }
.mrbml :where(a, button, select, input, summary):focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.mrbml img { display: block; max-width: 100%; height: auto; }
.mrbml .screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Shared bits ---------- */
.mrbml-eyebrow {
	color: var(--ml-eyebrow);
	font: 700 11px/1.35 var(--ml-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mrbml-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mrbml-chip {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid var(--ml-line);
	border-radius: 999px;
	background: var(--ml-tint);
	color: var(--ml-muted);
	font-size: 12px;
	line-height: 1.4;
}
.mrbml-note { color: var(--ml-muted); font-size: 13px; line-height: 1.5; }
.mrbml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: var(--ml-btn);
	color: var(--ml-on-btn);
	font: 700 13.5px/1.25 var(--ml-body);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, color .18s;
}
a.mrbml-btn, button.mrbml-btn { color: var(--ml-on-btn); }
.mrbml-btn:hover, a.mrbml-btn:hover { background: var(--ml-btn-hover); color: var(--ml-on-btn); }
.mrbml-btn.is-small { min-height: 40px; padding: 8px 13px; font-size: 12.5px; }
a.mrbml-btn.is-outline, .mrbml-btn.is-outline { border-color: var(--ml-field-line); background: var(--ml-paper); color: var(--ml-ink); }
a.mrbml-btn.is-outline:hover, .mrbml-btn.is-outline:hover { border-color: var(--ml-brand); color: var(--ml-brand); }
a.mrbml-textlink, .mrbml-textlink {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	color: var(--ml-link);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.mrbml-more, .mrb-cp .mrbml-more { margin-top: 26px; }

/* Measured levels: four segments + the word (never colour alone). */
.mrbml-meters { display: grid; gap: 6px; }
.mrbml-meter { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr; align-items: center; gap: 10px; font-size: 13px; }
.mrbml-meter dt { color: var(--ml-muted); }
.mrbml-meter dd { display: flex; align-items: center; gap: 8px; color: var(--ml-ink); font-weight: 600; }
.mrbml-bar { display: inline-flex; gap: 3px; }
.mrbml-bar i { display: block; width: 14px; height: 6px; border-radius: 2px; background: var(--ml-line); }
.mrbml-bar[data-level="1"] i:nth-child(-n+1),
.mrbml-bar[data-level="2"] i:nth-child(-n+2),
.mrbml-bar[data-level="3"] i:nth-child(-n+3),
.mrbml-bar[data-level="4"] i { background: var(--ml-brand); }

/* Placeholder texture when a fabric has no photo yet (decorative). */
.mrbml-ph { display: block; width: 100%; height: 100%; min-height: 120px; background-color: var(--ml-soft); }
.mrbml-ph--knit { background-image: repeating-linear-gradient(60deg, transparent 0 7px, rgba(19, 86, 110, .14) 7px 8px), repeating-linear-gradient(-60deg, transparent 0 7px, rgba(19, 86, 110, .14) 7px 8px); }
.mrbml-ph--rib { background-image: repeating-linear-gradient(90deg, rgba(19, 86, 110, .16) 0 5px, transparent 5px 11px); }
.mrbml-ph--fleece { background-image: radial-gradient(rgba(19, 86, 110, .2) 1.2px, transparent 1.6px); background-size: 7px 7px; }
.mrbml-ph--mesh { background-image: radial-gradient(circle, var(--ml-paper) 3px, transparent 3.5px); background-size: 12px 12px; }
.mrbml-ph--bonded { background-image: linear-gradient(180deg, transparent 58%, rgba(19, 86, 110, .18) 58% 62%, transparent 62%), repeating-linear-gradient(45deg, transparent 0 6px, rgba(19, 86, 110, .1) 6px 7px); }
html[data-theme="night"] .mrbml-ph { filter: brightness(1.4); }

/* ---------- Family cards ---------- */
.mrbml-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mrbml-family {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	background: var(--ml-paper);
	transition: border-color .18s, box-shadow .18s;
}
.mrbml-family:hover { border-color: var(--ml-line-hover); box-shadow: var(--ml-shadow); }
.mrbml-family:focus-within { border-color: var(--ml-brand); }
.mrbml-family__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ml-soft); }
.mrbml-family__media img { width: 100%; height: 100%; object-fit: cover; }
.mrbml-family__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 44px 20px 20px; }
.mrbml-family__title { color: var(--ml-title); font: 600 19px/1.25 var(--ml-display); letter-spacing: -.02em; }
.mrbml-family__link { color: inherit; text-decoration: none; }
.mrbml-family__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mrbml-family__link:focus-visible { outline: none; }
.mrbml-family:has(.mrbml-family__link:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.mrbml-family__summary { color: var(--ml-muted); font-size: 14.5px; line-height: 1.55; }
.mrbml-family__uses { margin-top: auto; color: var(--ml-muted); font-size: 13px; }
.mrbml-family__uses span { color: var(--ml-ink); font-weight: 600; }
.mrbml-family__go { position: absolute; right: 18px; bottom: 18px; color: var(--ml-link); font-weight: 700; }

/* ---------- Library filters ---------- */
.mrbml-filters {
	margin-bottom: 18px;
	padding: 18px;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	background: var(--ml-paper);
}
.mrbml-filters__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mrbml-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mrbml-field label { color: var(--ml-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mrbml-field select {
	width: 100%;
	min-height: 44px;
	padding: 8px 32px 8px 11px;
	border: 1px solid var(--ml-field-line);
	border-radius: 7px;
	background: var(--ml-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237F909B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
	color: var(--ml-ink);
	font: 500 14px/1.3 var(--ml-body);
	appearance: none;
}
.mrbml-filters__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; }
.mrbml-check { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ml-ink); font-size: 14px; cursor: pointer; }
.mrbml-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ml-brand); }
.mrbml-filters__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mrbml-count { margin: 0 0 14px; color: var(--ml-muted); font-size: 14px; }
.mrbml-empty { margin-top: 12px; padding: 18px; border: 1px dashed var(--ml-line-hover); border-radius: var(--ml-radius); color: var(--ml-muted); }
.mrbml-empty a { color: var(--ml-link); font-weight: 700; }

/* ---------- Material cards ---------- */
.mrbml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.mrbml-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	background: var(--ml-paper);
}
.mrbml-card[hidden] { display: none; }
.mrbml-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ml-soft); }
.mrbml-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mrbml-card__body { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 16px 18px 6px; }
.mrbml-card__title { color: var(--ml-title); font: 600 17px/1.25 var(--ml-display); letter-spacing: -.02em; }
a.mrbml-card__link { color: inherit; text-decoration: none; }
a.mrbml-card__link:hover { color: var(--ml-link); text-decoration: underline; text-underline-offset: .18em; }
.mrbml-card__summary { color: var(--ml-muted); font-size: 14px; line-height: 1.5; }
.mrbml-card .mrbml-meters { margin-top: 4px; }
.mrbml-card .mrbml-meter { grid-template-columns: minmax(0, 1fr) auto; }
.mrbml-meter dd { white-space: nowrap; }
.mrbml-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 18px 16px; }

.mrbml-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.mrbml-card.is-compact { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 0; }
.mrbml-card.is-compact .mrbml-card__media { grid-row: span 2; aspect-ratio: auto; height: 100%; min-height: 110px; }
.mrbml-card.is-compact .mrbml-ph { min-height: 110px; }
.mrbml-card.is-compact .mrbml-card__body { gap: 5px; padding: 12px 14px 0; }
.mrbml-card.is-compact .mrbml-card__title { font-size: 15.5px; }
.mrbml-card.is-compact .mrbml-card__summary { font-size: 13px; }
.mrbml-card.is-compact .mrbml-card__actions { padding: 6px 14px 12px; }
.mrbml-card.is-compact a.mrbml-card__link::after { content: ""; position: absolute; inset: 0; }
.mrbml-card.is-compact:hover { border-color: var(--ml-line-hover); }
.mrbml-card.is-compact:has(a.mrbml-card__link:focus-visible) { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.mrbml-card__go { color: var(--ml-link); font-size: 13px; font-weight: 700; }

/* ---------- Specification sheets ---------- */
.mrbml-sheets { display: grid; gap: 18px; }
.mrbml-sheet {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 28px;
	padding: 24px;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius);
	background: var(--ml-paper);
	align-items: start;
	scroll-margin-top: 110px;
}
.mrbml-sheet:target { border-color: var(--ml-brand); box-shadow: 0 0 0 1px var(--ml-brand); }
.mrbml-sheet__media { min-width: 0; }
.mrbml-sheet__media figure { overflow: hidden; border-radius: 10px; background: var(--ml-soft); }
.mrbml-sheet__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mrbml-sheet__media figcaption { padding: 7px 10px; color: var(--ml-muted); font-size: 12px; line-height: 1.4; background: var(--ml-tint); }
.mrbml-sheet__media .mrbml-ph { height: auto; border-radius: 10px; aspect-ratio: 4 / 3; min-height: 0; }
.mrbml-sheet__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mrbml-sheet__title { color: var(--ml-title); font: 600 24px/1.2 var(--ml-display); letter-spacing: -.025em; }
.mrbml-sheet__summary { max-width: 70ch; color: var(--ml-ink); font-size: 15.5px; line-height: 1.6; }
.mrbml-sheet__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: 14px; margin-top: 4px; }
.mrbml-layer { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ml-line2); border-radius: 10px; }
.mrbml-layer h4, .mrbml-sheet.is-page .mrbml-layer h3 { margin: 0; color: var(--ml-title); font: 700 12px/1.3 var(--ml-mono); letter-spacing: .1em; text-transform: uppercase; }
.mrbml-layer.is-typical { background: var(--ml-tint); }
.mrbml-layer.is-spec { border-left: 3px solid var(--ml-brand); background: var(--ml-paper); }
.mrbml-dl { display: grid; gap: 7px; }
.mrbml-dl > div { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.mrbml-dl dt { color: var(--ml-muted); }
.mrbml-dl dd { color: var(--ml-ink); }
.mrbml-ticks { display: grid; gap: 5px; font-size: 13.5px; }
.mrbml-ticks li { position: relative; padding-left: 16px; color: var(--ml-ink); }
.mrbml-ticks li::before { content: "–"; position: absolute; left: 0; color: var(--ml-brand); }

.mrbml-deco { border: 1px solid var(--ml-line2); border-radius: 10px; }
.mrbml-deco summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 10px 16px;
	color: var(--ml-title);
	font-size: 14px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.mrbml-deco summary::-webkit-details-marker { display: none; }
.mrbml-deco summary::after { content: "+"; color: var(--ml-brand); font-size: 20px; font-weight: 400; line-height: 1; }
.mrbml-deco[open] summary::after { content: "–"; }
.mrbml-deco__in { display: grid; gap: 10px; padding: 0 16px 14px; }
.mrbml-deco__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.mrbml-deco__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ml-line2); font-size: 13.5px; }
.mrbml-deco__state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mrbml-deco__icon::before { font-weight: 700; }
.is-suitable .mrbml-deco__state, .is-verified .mrbml-deco__state { background: var(--ml-good-bg); color: var(--ml-good); }
.is-suitable .mrbml-deco__icon::before { content: "✓"; }
.is-verified .mrbml-deco__icon::before { content: "✓✓"; }
.is-test .mrbml-deco__state { background: var(--ml-test-bg); color: var(--ml-test); }
.is-test .mrbml-deco__icon::before { content: "!"; }
.is-unsuitable .mrbml-deco__state { background: var(--ml-no-bg); color: var(--ml-no); }
.is-unsuitable .mrbml-deco__icon::before { content: "×"; }

.mrbml-sheet__uses, .mrbml-sheet__project { color: var(--ml-muted); font-size: 14px; line-height: 1.55; }
.mrbml-sheet__uses span, .mrbml-sheet__project span { color: var(--ml-ink); font-weight: 600; }
.mrbml-sheet__uses a, .mrbml-sheet__project a { color: var(--ml-link); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.mrbml-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---------- Tables ---------- */
.mrbml-table-wrap { overflow-x: auto; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); background: var(--ml-paper); }
.mrbml-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.mrbml-table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--ml-line2); text-align: left; vertical-align: top; }
.mrbml-table thead th { background: var(--ml-tint); color: var(--ml-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mrbml-table tbody th { color: var(--ml-title); font-weight: 600; }
.mrbml-table tbody tr:last-child > * { border-bottom: 0; }
.mrbml-table a { color: var(--ml-link); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Where used, links, pills ---------- */
.mrbml-where { display: grid; gap: 22px; }
.mrbml-where__main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mrbml-where__main li { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-brand); border-radius: 10px; background: var(--ml-paper); }
.mrbml-where__main a { color: var(--ml-title); font: 600 16.5px/1.3 var(--ml-display); text-decoration: underline; text-decoration-color: var(--ml-line-hover); text-underline-offset: .2em; }
.mrbml-where__main a:hover { color: var(--ml-link); }
.mrbml-where__main span { color: var(--ml-muted); font-size: 13.5px; line-height: 1.5; }
.mrbml-where__sub p { margin-bottom: 10px; color: var(--ml-ink); font-weight: 600; font-size: 14.5px; }
.mrbml-where__sub ul, .mrbml-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mrbml-where__sub a, .mrbml-pills a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--ml-line);
	border-radius: 999px;
	background: var(--ml-paper);
	color: var(--ml-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.mrbml-where__sub a:hover, .mrbml-pills a:hover { border-color: var(--ml-brand); color: var(--ml-brand); }
.mrbml-links { display: grid; gap: 8px; }
.mrbml-links a { color: var(--ml-link); font-weight: 600; text-decoration: underline; }

/* ---------- Certifications ---------- */
.mrbml-certs { display: grid; gap: 16px; }
.mrbml-cert { padding: 22px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); background: var(--ml-paper); scroll-margin-top: 110px; }
.mrbml-cert__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.mrbml-cert__head h3 { color: var(--ml-title); font: 600 21px/1.2 var(--ml-display); letter-spacing: -.02em; }
.mrbml-cert__head p { color: var(--ml-muted); font-size: 13.5px; }
.mrbml-cert__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 14px; }
.mrbml-cert__cols p { font-size: 14.5px; line-height: 1.6; }
.mrbml-cert .mrbml-note a { color: var(--ml-link); text-decoration: underline; }
.mrbml-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ml-title); font-weight: 700; }
.mrbml-status__dot { width: 10px; height: 10px; border: 2px solid var(--ml-muted); border-radius: 50%; }
.is-positive .mrbml-status__dot { border-color: var(--ml-good); background: var(--ml-good); }

/* ---------- Section placed on older product pages (no theme section styles) ---------- */
.mrbml-section { clear: both; margin: 56px 0 24px; padding-top: 40px; border-top: 1px solid var(--ml-line); color: var(--ml-ink); font-family: var(--ml-body); }
.mrbml-section .mrbml-head { max-width: 780px; margin-bottom: 24px; }
.mrbml-section .mrbml-head h2 { margin: 8px 0 10px; color: var(--ml-title); font: 600 clamp(24px, 3vw, 34px)/1.15 var(--ml-display); letter-spacing: -.03em; }
.mrbml-section .mrbml-head p:not(.mrbml-eyebrow) { color: var(--ml-muted); font-size: 16px; line-height: 1.6; }
.mrbml-section .mrbml-head a, .mrb-cp .mrbml-placed .mrb-cp-head a { color: var(--ml-link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.mrbml-section .mrbml-card__media img, .mrbml-section .mrbml-family__media img { margin: 0; }

/* ---------- Page shell fallback (plugin running without the MR Balaclava theme styles) ---------- */
.mrbml-standalone .mrbml-page-main { display: block; color: var(--ml-ink); font-family: var(--ml-body); }
.mrbml-standalone .mrb-b2b-wrap, .mrbml-standalone .mrb-cp-sec { max-width: 1240px; margin-inline: auto; padding: 48px 24px; }
.mrbml-standalone .mrb-cp-crumbs ol, .mrbml-standalone .mrb-cp-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }
.mrbml-standalone .mrb-cp-features, .mrbml-standalone .mrb-cp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0; list-style: none; }
.mrbml-standalone .mrb-b2b-btn { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 16px; border-radius: 7px; background: var(--ml-btn); color: var(--ml-on-btn); text-decoration: none; }
.mrbml-standalone .mrb-cp-hero__media img { max-width: 100%; height: auto; }

/* ---------- Theme step lists on light sections of the library pages (the theme styles them for dark sections) ---------- */
.mrbml-page-main .mrb-cp-sec:not(.is-dark) .mrb-cp-steps > li { border-color: var(--ml-line); background: var(--ml-paper); }
.mrbml-page-main .mrb-cp-sec:not(.is-dark) .mrb-cp-steps > li::before { color: var(--ml-eyebrow); }
.mrbml-page-main .mrb-cp-sec:not(.is-dark) .mrb-cp-steps h3 { color: var(--ml-title); }
.mrbml-page-main .mrb-cp-sec:not(.is-dark) .mrb-cp-steps p { color: var(--ml-muted); }
.mrbml-page-main .mrb-cp-steps.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mrbml-page-main .mrb-cp-steps.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .mrbml-page-main .mrb-cp-steps.is-four { grid-template-columns: 1fr; } }

/* ---------- Fabric pages and options (2026-10-09) ---------- */
.mrbml-sheet.is-page { display: block; }
.mrbml-card { scroll-margin-top: 110px; }
.mrbml-card:target { border-color: var(--ml-brand); box-shadow: 0 0 0 1px var(--ml-brand); }
.mrbml-fabric-photo { margin: 0; overflow: hidden; border-radius: 14px; background: var(--ml-soft); }
.mrbml-fabric-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mrbml-fabric-photo figcaption { padding: 8px 12px; color: var(--ml-muted); font-size: 12.5px; line-height: 1.4; background: var(--ml-tint); }
.mrbml-badge-line { margin: 2px 0 0; }
.mrbml-badge { display: inline-block; padding: 3px 10px; border: 1px solid var(--ml-line); border-radius: 999px; background: var(--ml-tint); color: var(--ml-ink); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.mrbml-offered { display: grid; gap: 8px; }
.mrbml-offered__label { margin: 6px 0 0; color: var(--ml-ink); font-size: 14px; font-weight: 600; }
.mrbml-offered__list { margin: 0; padding: 0; list-style: none; }
/* Product cards on fabric pages (2026-10-20): the theme's B2B cards; 2 per row on phones, without the spec list and buttons. */
.mrbml-offered__group { display: grid; gap: 10px; margin-bottom: 22px; }
.mrbml-offered__group > .mrbml-offered__label { font-size: 16px; }
.mrbml-offered__note { margin: -6px 0 0; color: var(--ml-muted); font-size: 13.5px; line-height: 1.5; }
.mrb-b2b .mrbml-offered__cards { margin: 0; padding: 0; list-style: none; }
.mrb-b2b .mrbml-card-configure { align-self: flex-start; margin-top: 12px; color: var(--b2b-brand); font-size: 12.5px; font-weight: 700; }
.mrb-b2b .mrbml-card-configure:hover { text-decoration: underline; text-underline-offset: .15em; }
.mrb-b2b .mrbml-card-configure + .mrb-b2b-product__more { margin-top: 6px; }
.mrbml-fabric-main:has(.mrbml-offered__cards) .mrbb-madein { display: none; } /* the cards carry the builder's links */
@media (max-width: 650px) {
	.mrb-b2b .mrbml-offered__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mrbml-offered__cards .mrb-b2b-specs,
	.mrbml-offered__cards .mrb-b2b-product__actions,
	.mrbml-offered__cards .mrbml-card-configure + .mrb-b2b-product__more { display: none; }
	.mrb-b2b .mrbml-offered__cards .mrb-b2b-product__body { padding: 11px 12px 13px; }
	.mrb-b2b .mrbml-offered__cards .mrb-b2b-product__name { font-size: 13.5px; line-height: 1.3; }
	.mrb-b2b .mrbml-offered__cards .mrb-b2b-product__group { margin-bottom: 4px; font-size: 12px; }
	.mrb-b2b .mrbml-offered__cards .mrbml-card-configure { margin-top: auto; padding-top: 6px; font-size: 12px; }
}
.mrbml .mrbml-chip.is-link { padding: 6px 14px; color: var(--ml-link); font-size: 14px; font-weight: 600; text-decoration: none; }
.mrbml .mrbml-chip.is-link:hover { border-color: var(--ml-brand); }
.mrbml .mrbml-chip.is-link:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.mrbml-options { color: var(--ml-ink); font-size: 13.5px; line-height: 1.55; }
.mrbml-options__label { font-weight: 600; }
.mrbml-options__std { color: var(--ml-muted); }

/* ---------- Fabric Finder (2026-10-09) ---------- */
.mrbml-finder { display: grid; gap: 22px; }
.mrbml-finder__form { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); background: var(--ml-paper); }
.mrbml-finder__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.mrbml-finder__q legend, .mrbml-finder__label { display: block; margin-bottom: 8px; color: var(--ml-title); font-weight: 700; font-size: 15px; }
.mrbml-finder__q select { width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ml-line); border-radius: 10px; background: var(--ml-paper); color: var(--ml-ink); font: inherit; }
.mrbml-finder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mrbml-finder__chip { position: relative; }
.mrbml-finder__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mrbml-finder__chip label { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px; border: 1px solid var(--ml-line); border-radius: 999px; background: var(--ml-tint); color: var(--ml-ink); font-size: 14px; cursor: pointer; }
.mrbml-finder__chip input:checked + label { border-color: var(--ml-brand); background: var(--ml-brand); color: var(--ml-on-btn); font-weight: 600; }
.mrbml-finder__chip input:focus-visible + label { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.mrbml-finder__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.mrbml-finder__results { display: grid; gap: 16px; scroll-margin-top: 110px; }
.mrbml-finder__title { margin: 0; color: var(--ml-title); font: 600 21px/1.25 var(--ml-display); }
.mrbml-finder__why { margin: 2px 0 4px; }
.mrbml-finder__card .mrbml-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mrbml-finder__more summary { cursor: pointer; color: var(--ml-link); font-weight: 600; }
.mrbml-finder__list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mrbml-finder__list a { color: var(--ml-link); font-weight: 600; }
.mrbml-finder__cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.mrbml-finder__compare caption { padding: 10px 0; color: var(--ml-title); font-weight: 700; text-align: left; }
.mrbml-finder__compare th a { color: var(--ml-link); }
.mrbml-check input:disabled + * , .mrbml-check:has(input:disabled) { opacity: .55; }

/* ---------- Fabrics in the shop (2026-10-09) ---------- */
.mrbml-shop-fabrics__grid { margin-bottom: 18px; }
.mrbml-shop-fabrics__more { margin: 0 0 22px; }
.mrbml-shop-fabrics__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mrbml-product-fabrics { display: grid; gap: 8px; margin-top: 18px; }
.mrbml-product-fabrics__list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.mrbml-product-fabrics__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mrbml-product-fabrics .mrbml-textlink { font-size: 13px; }
/* With "Configure with this fabric" links: one row per fabric (chip left, link right), never a mixed flow;
   on phones the link always sits under its chip. */
.mrbml-product-fabrics__list.has-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 0 28px; }
.mrbml-product-fabrics__list.has-links .mrbml-product-fabrics__item { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--ml-line); }
.mrbml-product-fabrics__list.has-links .mrbml-chip { min-width: 0; overflow-wrap: anywhere; }
.mrbml-product-fabrics__list.has-links .mrbml-textlink { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
	.mrbml-product-fabrics__list.has-links .mrbml-product-fabrics__item { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 2px; }
}

/* ---------- Fabric photos (2026-10-09) ---------- */
.mrbml-fabric-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.mrbml-fabric-thumbs a { display: grid; gap: 5px; color: var(--ml-muted); font-size: 12px; line-height: 1.35; text-decoration: none; }
.mrbml-fabric-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--ml-soft); }
.mrbml-fabric-thumbs a:hover img { outline: 2px solid var(--ml-brand); outline-offset: 1px; }
.mrbml-fabric-thumbs a:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; border-radius: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.mrbml-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.mrbml-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mrbml-sheet { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; }
	.mrbml-sheet__cols, .mrbml-cert__cols { grid-template-columns: 1fr; }
	.mrbml-where__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.mrbml-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mrbml-sheet { grid-template-columns: 1fr; padding: 16px; }
	.mrbml-sheet__media { max-width: 420px; }
	.mrbml-sheet__title { font-size: 21px; }
	.mrbml-where__main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.mrbml-families { grid-template-columns: 1fr; }
	.mrbml-grid, .mrbml-grid.is-compact { grid-template-columns: 1fr; }
	.mrbml-card:not(.is-compact) .mrbml-card__media { aspect-ratio: 2 / 1; }
	.mrbml-card__summary { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
	.mrbml-filters { padding: 14px; }
	.mrbml-filters__grid { gap: 10px; }
	.mrbml-dl > div, .mrbml-meter { grid-template-columns: minmax(0, 8em) 1fr; }
	.mrbml-cert { padding: 16px; }
	.mrbml-filters__actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 360px) {
	.mrbml-filters__grid { grid-template-columns: 1fr; }
	.mrbml-card.is-compact { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.mrbml *, .mrbml-family, .mrbml-btn { transition: none !important; }
}
@media print {
	.mrbml-filters, .mrbml-card__actions, .mrbml-sheet__actions { display: none; }
	.mrbml-deco:not([open]) .mrbml-deco__in { display: grid; }
}

/* Inquiry dialog (theme markup): the fabric a visitor asked about. */
.mrbml-dialog-note { margin: 4px 0 14px; padding: 9px 12px; border-left: 3px solid var(--b2b-brand, #13566E); background: rgba(19, 86, 110, .07); font-size: 14px; line-height: 1.45; }