/*
 * MTI Atelier — design-system overrides.
 * Colours, type, buttons, cards and spacing per the final spec.
 */

:root {
	--bg: #F2F4F4;
	--fg: #16263A;
	--card: #FFFFFF;
	--primary: #16263A;
	--primary-fg: #F2F4F4;
	--accent: #0F5C6E;
	--accent-fg: #FFFFFF;
	--gold: #D1B57A;
	--pro-bg: #1E3F52;
	--border: #C9D2D9;
	--muted: #56606E;
	--radius: 8px;
	--serif: 'Roboto', 'Roboto Fallback', system-ui, sans-serif;
	--sans: 'Roboto', 'Roboto Fallback', system-ui, sans-serif;
}

/* ---------- Base ---------- */
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
	font-family: var(--serif);
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--fg);
}

h1 { font-size: 76px; line-height: 1.02; }
h2 { font-size: 46px; line-height: 1.1; }
h3 { font-size: 28px; line-height: 1.15; }
h4 { font-size: 22px; line-height: 1.2; }

@media (max-width: 767px) {
	h1 { font-size: 38px; }
	h2 { font-size: 32px; }
	h3 { font-size: 24px; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

.accent-word {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
}

/* ---------- Eyebrow label ---------- */
.eyebrow, .kicker, .front .sc-kicker {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--accent);
}
.eyebrow-light,
.front .therapy .kicker,
.front .pro .kicker,
.front .tc-card.dark .kicker {
	color: var(--gold);
}
/* WS16: awards kicker sits on white — gold (2.9:1) fails contrast; use accent. */
.front .awards .kicker { color: var(--accent); }

/* Section eyebrows generated via CSS so no markup changes are needed */
.front .rooms .sec-head h2::before,
.front .collection .sec-head h2::before,
.front .materials .sec-head h2::before,
.front .colls > h2::before,
.front .stories .sec-head h2::before {
	display: block;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 14px;
}
.front .rooms .sec-head h2::before { content: 'Browse by category'; }
.front .collection .sec-head h2::before { content: 'The collection'; }
.front .materials .sec-head h2::before { content: 'Materials'; }
.front .colls > h2::before { content: 'Collections'; }
.front .stories .sec-head h2::before { content: 'Stories'; }

/* ---------- Buttons ---------- */
.btn-primary, .mti-content .btn-primary, a.btn-primary,
button.btn-primary, input[type="submit"], .cta-button, .mti-content a.cta-button, button.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--primary);
	color: var(--primary-fg);
	padding: 16px 28px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 500;
	border: none;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.btn-primary:hover, .mti-content .btn-primary:hover, .cta-button:hover, .mti-content a.cta-button:hover, button.cta-button:hover {
	background: var(--accent);
	color: var(--primary-fg);
	opacity: 1;
	text-decoration: none;
}

.btn-outline, a.btn-outline, .btn-secondary, a.btn-secondary, .mti-content a.btn-outline, .mti-content a.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: var(--primary);
	padding: 16px 28px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid var(--primary);
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline:hover, .btn-secondary:hover, .mti-content a.btn-outline:hover, .mti-content a.btn-secondary:hover {
	background: var(--primary);
	color: var(--primary-fg);
	text-decoration: none;
}

/* Gold CTA on dark surfaces */
.front .btn-gold, .front a.btn-gold, .front .tc-card.dark a.btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--gold);
	color: var(--primary);
	padding: 16px 28px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 500;
	border: none;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.front .btn-gold:hover, .front a.btn-gold:hover { opacity: 0.88; text-decoration: none; }

/* ---------- Header ---------- */
.mti-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
}
.mti-brand { color: var(--primary); }


/* ---------- Layout ---------- */
section, .section { padding: 72px 24px; }
@media (max-width: 767px) { section, .section { padding: 48px 24px; } }

.page-shell, .front .hero, .front .rooms, .front .collection, .front .materials, .front .colls, .front .stories, .front .twocol, .front .awards, .front .pro, .front .spotlight {
	max-width: 1440px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	section, .section { padding-left: 64px; padding-right: 64px; }
}

/* ---------- Hero ---------- */
.front .hero, .front .pro { padding: 0; }
.front .hero-left { padding: 64px 24px; }
@media (min-width: 768px) { .front .hero-left { padding: 96px 64px; } }
.front .hero h1 { font-size: 76px; }
@media (max-width: 767px) { .front .hero h1 { font-size: 38px; } }
.front .hero-right img { min-height: 420px; object-fit: cover; }
@media (min-width: 768px) { .front .hero-right img { min-height: 640px; } }

/* Hero / spotlight card */
.front .hero-card, .front .spot-info {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.front .hero-card { padding: 20px 24px; }
.hc-name { font-family: var(--serif); font-size: 22px; color: var(--fg); }
.hc-link { color: var(--accent); font-size: 14px; font-weight: 500; }

/* Spotlight alignment: make image and info card share one full-height row */
.front .spotlight { align-items: stretch; }
.front .spot-img { width: 100%; background: var(--bg); }
.front .spot-img img { width: 100%; height: 100%; object-fit: cover; }
.front .spot-info {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}

/* ---------- Cards ---------- */
.front .room-tile, .front .prod-card, .front .mat-card, .front .coll-card, .front .story-card, .front .tc-card, .product-thumb {
	background: var(--card);
	border-radius: var(--radius);
}
.front .room-tile, .front .prod-card, .front .mat-card, .front .coll-card, .front .story-card, .product-thumb {
	border: 1px solid var(--border);
}
.front .room-tile, .front .prod-card, .front .mat-card, .front .coll-card, .front .story-card {
	overflow: hidden;
	transition: transform 0.25s ease;
}
.front .room-tile:hover, .front .prod-card:hover, .front .mat-card:hover, .front .coll-card:hover, .front .story-card:hover {
	transform: translateY(-4px);
}
.front .room-tile img, .front .prod-card img, .front .mat-card img, .front .coll-card img, .front .story-card img {
	transition: transform 0.7s ease;
}
.front .room-tile:hover img, .front .prod-card:hover img, .front .mat-card:hover img, .front .coll-card:hover img, .front .story-card:hover img {
	transform: scale(1.03);
}

/* Image aspect ratios */
.front .room-tile { aspect-ratio: 4 / 3; }
.front .room-tile img, .front .coll-card img, .front .story-card img { width: 100%; height: 100%; object-fit: cover; }
.front .prod-card .pc-img { aspect-ratio: 4 / 3; }
.front .prod-card .pc-img img { width: 100%; height: 100%; object-fit: cover; }
.front .coll-card img, .front .story-card img { aspect-ratio: 4 / 3; }
/* Material cards: fixed 4/3 media block on top with .mc-body text below —
   a height:100% image would fill the whole card and hide the body. */
.front .mat-card { display: flex; flex-direction: column; }
.front .mat-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; flex: none; }

/* Keep images natural and bright per MTI brand guidelines */
.front .room-tile img, .front .prod-card img, .front .coll-card img, .front .story-card img, .product-thumb img {
	filter: none;
}
/* Keep material cut-outs and detailed product shots neutral so they don't wash out */
.front .mat-card img, .front .spot-img img, .product-view-area img { filter: none; }

/* ---------- Product list ---------- */
.product-thumb .image-area { aspect-ratio: 1 / 1; }
.product-thumb .image-area img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Links ---------- */
.front .link-underline { color: var(--accent); font-weight: 500; }

/* ---------- Therapy / pro dark panels ---------- */
.front .therapy, .front .pro, .front .tc-card.dark {
	background: var(--pro-bg);
	color: var(--primary-fg);
}
.front .therapy h2, .front .therapy h3, .front .therapy h4,
.front .pro h2, .front .pro h3, .front .pro h4,
.front .tc-card.dark h2, .front .tc-card.dark h3, .front .tc-card.dark h4 {
	color: var(--primary-fg);
}
.front .therapy p, .front .pro p, .front .tc-card.dark p { color: hsl(200 10% 85%); }
.front .therapy .th-img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 6px;
	margin: -8px 0 20px;
	display: block;
}
.front .therapy a.btn-primary, .front .pro a.btn-primary { background: var(--primary-fg); color: var(--primary); }
.front .therapy a.btn-primary:hover, .front .pro a.btn-primary:hover { background: var(--gold); color: var(--primary); }

/* ---------- Awards ---------- */
.front .awards { background: var(--card); padding-top: 48px; padding-bottom: 48px; }
.front .award-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.front .award-row img { max-height: 72px; width: auto; filter: grayscale(1); opacity: 0.7; transition: opacity 0.2s ease; }
.front .award-row img:hover { opacity: 1; }

/* ---------- Footer ---------- */
.mti-footer { background: var(--bg); border-top: 1px solid var(--border); color: var(--fg); }
.mti-footer a { color: var(--muted); }
.mti-footer a:hover { color: var(--accent); }
.mti-footer h4 { color: var(--fg); font-family: var(--sans); font-size: 15px; font-weight: 600; }

/* ---------- Mobile drawer ---------- */
.mti-drawer { background: var(--bg); border-top: 1px solid var(--border); }

/* ---------- Search ---------- */
.mti-search { border: 1px solid var(--border); background: var(--card); }
.mti-search input { color: var(--fg); }
.mti-search button { color: var(--accent); }

/* ---------- Legacy imported content pages ---------- */
/* Banner / page hero */
#banner-area {
	background: var(--bg);
	padding: 56px 24px 48px;
	border-bottom: 1px solid var(--border);
}
#banner-area .heading { max-width: 1440px; margin: 0 auto; text-align: center; }
#banner-area .heading h1 {
	font-size: 64px;
	line-height: 1.05;
	margin: 0;
	color: var(--fg);
}
@media (max-width: 767px) { #banner-area .heading h1 { font-size: 40px; } }

/* Horizontal nav buttons used on collection/about pages */
.mti-content [class*="main-nav"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto 48px;
	padding: 0;
}
.mti-content .navigation-button {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: transform .25s ease;
}
.mti-content .navigation-button:hover { transform: translateY(-4px); }
.mti-content .navigation-button a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: var(--fg);
}
.mti-content .navigation-button img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.mti-content .navigation-button h6 {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	padding: 14px 10px;
	margin: 0;
	color: var(--fg);
}

/* Main two-column layout */
.mti-content .main-area {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
	padding: 0 24px 96px;
}
@media (max-width: 900px) {
	.mti-content .main-area { grid-template-columns: 1fr; gap: 48px; padding-bottom: 64px; }
}

.mti-content .main-content h3, .mti-content .main-content h2 {
	font-size: 36px;
	line-height: 1.1;
	text-align: left;
	margin-bottom: 24px;
}
.mti-content .main-content h3 strong, .mti-content .main-content h2 strong { font-weight: 400; }

/* Reset imported inline image styles */
.mti-content .main-content img,
.mti-content img[align="right"], .mti-content img[align="left"] {
	float: none !important;
	display: block;
	width: 100% !important;
	max-width: 560px;
	height: auto !important;
	margin: 32px auto !important;
	padding: 0 !important;
	border-radius: var(--radius);
}

.mti-content .main-content p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--fg);
	margin-bottom: 20px;
}

/* Side navigation */
.mti-content .side-navigation {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mti-content .side-navigation a {
	display: block;
	color: var(--accent);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	transition: color .15s ease;
}
.mti-content .side-navigation a:hover { color: var(--fg); }
/* Group headings imported as <u> ("Resources:", "Important Information:") */
.mti-content .side-navigation u {
	display: block;
	margin: 22px 0 4px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}
.mti-content .side-navigation u:first-child { margin-top: 0; }

/* Convert the grey "See All ..." block button into a pill */
.mti-content .side-navigation a:has(div[style*="background-color:#999999"]),
.mti-content .side-navigation a[href*="view=view-style"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: var(--primary-fg) !important;
	padding: 16px 28px;
	border-radius: 9999px;
	font-size: 15px;
	font-weight: 500;
	margin-top: 16px;
	border-bottom: none;
}
.mti-content .side-navigation a:has(div[style*="background-color:#999999"]):hover,
.mti-content .side-navigation a[href*="view=view-style"]:hover {
	background: var(--accent);
}
.mti-content .side-navigation a:has(div[style*="background-color:#999999"]) div {
	display: none;
}

/* Remove card shadows from the older stylesheet */
.front .room-tile, .front .prod-card, .front .mat-card, .front .coll-card, .front .story-card, .front .tc-card, .product-thumb, .navigation-button {
	box-shadow: none !important;
}

/* ---------- Override legacy inline source styles ---------- */
/* Many imported pages embed <style> blocks that force inline-flex, fixed widths and floats. */
.mti-content .projects-group-main-nav,
.mti-content .about-boutique-main-nav,
.mti-content .about-basics-main-nav,
.mti-content .about-mti-main-nav,
.mti-content [class*="main-nav"][style*="inline-flex"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	width: 100% !important;
	margin: 0 auto 32px !important;
	padding: 0 !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
}
.mti-content .navigation-button {
	width: auto !important;
	margin: 0 !important;
	max-width: none !important;
}
.mti-content div.main-area {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 300px !important;
	gap: 48px !important;
	padding: 0 !important;
	flex-direction: row !important;
	align-items: start !important;
}
.mti-content div.main-area > * { min-width: 0 !important; }
@media (max-width: 900px) {
	.mti-content div.main-area {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
}
.mti-content div.side-navigation {
	margin-left: 0 !important;
	padding: 0 !important;
	flex: none !important;
}
.mti-content img.content-img,
.mti-content div.content-video-box,
.mti-content div.content-video-box img,
.mti-content img[style*="float: right"],
.mti-content img[style*="float: left"],
.mti-content .carousel-item img,
.mti-content .carousel-inner img {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	margin: 24px auto !important;
	display: block !important;
}

/* ---------- Quiet luxury spacing ---------- */
.section, .front .rooms, .front .materials, .front .stories, .front .colls, .front .twocol, .front .spotlight, .front .therapy {
	padding-top: 72px;
	padding-bottom: 72px;
}
@media (max-width: 767px) {
	.section, .front .rooms, .front .materials, .front .stories, .front .colls, .front .twocol, .front .spotlight, .front .therapy {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ---------- Misc ---------- */
.mti-content img { max-width: 100%; height: auto; }
img[src=""], img:not([src]) { display: none !important; }

/* Fixed-ratio image containers must still fill their box —
   the generic .mti-content img height:auto above would otherwise
   shrink them and leave white space inside the card. */
.mti-content.front .room-tile img,
.mti-content.front .pc-img img,
.mti-content.front .spot-img img,
.mti-content.front .hero-right img,
.mti-content.front .coll-card img,
.mti-content .product-thumb .image-area img {
	height: 100% !important;
}
/* story cards hold img + kicker + title — let them size to content so the
   title is never clipped by the fixed-height grid row. */
.mti-content.front .story-card { height: auto; align-self: start; }
.mti-content.front .story-card img { height: auto; aspect-ratio: 4 / 3; }

/* ---------- Counter-sink configurator ---------- */
.configurator-shell {
	padding-top: 72px;
	padding-bottom: 96px;
}
.configurator-intro {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--muted);
	margin-bottom: 40px;
}
.configurator-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.configurator-form,
.configurator-preview {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px;
}
.configurator-form {
	display: grid;
	gap: 20px;
}
.configurator-form label {
	display: grid;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.configurator-form select,
.configurator-form textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	padding: 12px;
}
.configurator-preview .config-image {
	aspect-ratio: 4 / 3;
	background: var(--bg);
	margin-bottom: 24px;
}
.configurator-preview .config-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.config-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}
@media (max-width: 767px) {
	.configurator-shell { padding-top: 36px; padding-bottom: 64px; }
	.configurator-grid { grid-template-columns: 1fr; gap: 24px; }
	.configurator-form, .configurator-preview { padding: 20px; }
}
@media print {
	.mti-header, .mti-utility, footer, .configurator-form, .config-actions, .mobile-sticky-bar { display: none !important; }
	.configurator-grid { display: block; }
	.configurator-preview { border: 0; }
}

/* Imported product-page footer area */
.footerArea {
	background: var(--pro-bg);
	color: var(--primary-fg);
	padding: 64px 24px;
}
.footerArea a {
	color: var(--primary-fg);
}
.footerArea a:hover {
	color: var(--gold);
}
.footerArea .section-heading {
	color: var(--gold);
	font-weight: 500;
	display: block;
	margin-bottom: 8px;
}
.footerArea .footer-text {
	color: hsl(200 10% 80%);
	font-size: 14px;
}

/* ---------- Product catalogue layout ---------- */
.mti-catalogue-ready {
	padding: 24px 0 96px;
}
.mti-catalogue-ready .container {
	max-width: 1440px;
}
.catalogue-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding: 0 24px;
}
.catalogue-controls .filter-toggle {
	background: var(--primary);
	color: var(--primary-fg);
	border: 0;
	border-radius: 9999px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.catalogue-controls .result-count {
	margin-left: auto;
	font-size: 14px;
	color: var(--muted);
}
.catalogue-controls .view-toggle {
	display: flex;
	gap: 8px;
}
.catalogue-controls .view-toggle button {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 9999px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
}
.catalogue-controls .view-toggle button.active {
	background: var(--primary);
	color: var(--primary-fg);
	border-color: var(--primary);
}
.catalogue-controls .clear-filters {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 9999px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
}

.catalogue-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 0 24px;
}
@media (min-width: 900px) {
	.catalogue-content {
		grid-template-columns: 260px 1fr;
	}
}

.filter-area {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	height: fit-content;
}
@media (max-width: 899px) {
	.filter-area {
		position: fixed;
		inset: 0;
		/* B04: height:fit-content overrode inset's bottom edge, so the drawer
		   grew to full content height (~3800px) — unreachable "Close" pseudo
		   element, page scrolled behind it. Constrain to the viewport and let
		   the inner content scroll. */
		height: 100vh;
		height: 100dvh;
		z-index: 2000;
		border-radius: 0;
		transform: translateX(-100%);
		transition: transform .25s ease;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
	.filter-area.open {
		transform: translateX(0);
	}
	/* Prevent the page scrolling behind the open drawer. */
	body.mti-filter-open {
		overflow: hidden;
	}
}
/* Drawer chrome: hidden on desktop (sidebar shows inline filters). */
.filter-drawer-head,
.filter-drawer-foot {
	display: none;
}
@media (max-width: 899px) {
	.filter-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 1;
		background: var(--card);
		padding: 4px 0 12px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 12px;
	}
	.filter-drawer-title {
		font-weight: 600;
		font-size: 16px;
	}
	.filter-drawer-close {
		background: transparent;
		border: 1px solid var(--border);
		border-radius: 9999px;
		width: 36px;
		height: 36px;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}
	.filter-drawer-foot {
		display: block;
		position: sticky;
		bottom: 0;
		background: var(--card);
		padding: 12px 0 4px;
		border-top: 1px solid var(--border);
		margin-top: 16px;
	}
	.filter-drawer-apply {
		width: 100%;
		background: var(--primary);
		color: var(--primary-fg);
		border: 0;
		border-radius: 9999px;
		padding: 12px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}
}
/* B09: thumbnail keyboard buttons */
.thumb-list .thumb-btn {
	background: none;
	border: 2px solid transparent;
	border-radius: 4px;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}
.thumb-list .thumb-btn[aria-pressed="true"] {
	border-color: var(--primary);
}
.thumb-list .thumb-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
.thumb-list .thumb-btn img {
	display: block;
}
/* B02: retry buttons */
.dl-retry {
	margin-left: 8px;
}
/* B03: contact/enquiry forms */
.mti-contact-form {
	max-width: 620px;
	display: grid;
	gap: 16px;
}
.mti-field {
	display: grid;
	gap: 6px;
}
.mti-field label {
	font-size: 13px;
	font-weight: 500;
}
.mti-field-check label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}
.mti-field input[type="text"],
.mti-field input[type="email"],
.mti-field input[type="tel"],
.mti-field input[type="url"],
.mti-field input[type="date"],
.mti-field select,
.mti-field textarea {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 10px 12px;
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}
.mti-field [aria-invalid="true"] {
	border-color: #b3261e;
}
.mti-field-error {
	color: #b3261e;
	font-size: 12px;
}
.mti-form-submit {
	background: var(--primary);
	color: var(--primary-fg);
	border: 0;
	border-radius: 9999px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.mti-form-submit:disabled {
	opacity: .6;
	cursor: wait;
}
.mti-form-status {
	font-size: 14px;
}
.mti-status-error {
	color: #b3261e;
}
.mti-status-ok {
	color: #1a7f37;
}
.mti-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.mti-form-retry {
	margin-left: 12px;
}
.filter-block-area + .filter-block-area {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}
.filter-title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 10px;
}
.filter-options label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 4px 0;
	cursor: pointer;
}
.filter-options input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

/* Product grid */
.style-group {
	margin-bottom: 48px;
}
.catalogue-load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 32px auto 0;
	padding: 12px 24px;
	border: 1px solid var(--primary);
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-fg);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.catalogue-load-more:hover {
	background: var(--accent);
	border-color: var(--accent);
}
.style-group-header {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.style-group-header h3 {
	font-size: 24px;
	font-weight: 300;
	margin: 0;
}
.style-count {
	font-size: 14px;
	color: var(--muted);
}
.style-link {
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
}

.product-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 700px) {
	.product-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}
@media (min-width: 1200px) {
	.product-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* View modes */
.product-list.view-list {
	grid-template-columns: 1fr;
}
.product-list.view-list .product-thumb {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 20px;
	align-items: center;
}
@media (max-width: 499px) {
	.product-list.view-list .product-thumb {
		grid-template-columns: 100px 1fr;
	}
}
.product-list.view-detail .detail-item.size {
	display: block;
}
.product-thumb.view-list .image-area {
	aspect-ratio: 1 / 1;
}

.product-thumb {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.product-thumb .image-area {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.product-thumb .image-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}
.product-thumb:hover .image-area img {
	transform: scale(1.03);
}
.product-thumb .info-area {
	padding: 14px;
}
.product-thumb .detail-item {
	font-size: 13px;
	color: var(--muted);
	word-break: break-word;
	overflow-wrap: anywhere;
}
.product-thumb .detail-item.name {
	font-size: 17px;
	font-weight: 500;
	color: var(--fg);
	margin-bottom: 4px;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Product type hero: unified component lives at the end of this file. */

/* Series tiles ("Styles" view) */
.mti-catalogue-ready .series-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
@media (min-width: 768px) {
	.mti-catalogue-ready .series-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
	.mti-catalogue-ready .series-grid { grid-template-columns: repeat(4, 1fr); }
}
.mti-catalogue-ready .series-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	padding: 14px;
	text-align: center;
	color: var(--fg);
	transition: border-color .2s ease;
}
.mti-catalogue-ready .series-tile:hover {
	border-color: var(--accent);
	text-decoration: none;
}
.mti-catalogue-ready .series-tile-img {
	aspect-ratio: 4 / 3;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.mti-catalogue-ready .series-tile-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mti-catalogue-ready .series-name {
	color: var(--accent);
	font-size: 15px;
	margin-top: 10px;
}
.mti-catalogue-ready .series-name em {
	font-style: normal;
	font-size: .85em;
	color: var(--muted);
}
.mti-catalogue-ready .series-sub {
	font-size: 12px;
	color: var(--muted);
}

/* Detail view attribute rows */
.mti-catalogue-ready .product-thumb .detail-item.attr {
	margin-bottom: 4px;
}
/* Accent teal on the light list bg measures ~3.7:1 — use navy for text links. */
.mti-catalogue-ready .product-thumb .detail-item.attr a { color: var(--primary); }
.mti-catalogue-ready .compare-pick {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--muted);
	margin-top: 8px;
	cursor: pointer;
}
.mti-catalogue-ready .pt-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 12px;
}
.mti-catalogue-ready .pt-actions .compare-pick { margin-top: 0; }
.mti-catalogue-ready .pt-actions .mti-cta { margin: 0; }
.mti-catalogue-ready .catalogue-table .pt-actions { margin-top: 0; }
.mti-catalogue-ready .compare-check:disabled {
	cursor: not-allowed;
}

/* List view table */
.mti-catalogue-ready .catalogue-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.mti-catalogue-ready .catalogue-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 760px;
}
.mti-catalogue-ready .catalogue-table th {
	position: sticky;
	top: 0;
	background: #fff;
	text-align: left;
	padding: 8px 10px;
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}
.mti-catalogue-ready .catalogue-table th.sortable {
	cursor: pointer;
	user-select: none;
}
.mti-catalogue-ready .catalogue-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

/* Compare bar + modal */
#mti-compare-bar {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9990;
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--primary);
	color: var(--primary-fg);
	border-radius: 8px;
	padding: 10px 14px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
#mti-compare-bar button {
	background: #fff;
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}
#mti-compare-bar button:disabled {
	opacity: .5;
	cursor: not-allowed;
}
#mti-compare-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#mti-compare-modal .mco-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}
#mti-compare-modal .mco-dialog {
	position: relative;
	background: #fff;
	border-radius: 8px;
	max-width: 1100px;
	width: 94%;
	max-height: 88vh;
	overflow: auto;
	padding: 24px;
}
#mti-compare-modal .mco-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
#mti-compare-modal .mco-head h2 {
	font-size: 22px;
	margin: 0;
}
#mti-compare-modal .mco-actions {
	display: flex;
	gap: 10px;
}
#mti-compare-modal .mco-actions button {
	border: 1px solid var(--border);
	background: #fff;
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}
#mti-compare-modal .mco-tablewrap {
	overflow-x: auto;
}
#mti-compare-modal .mco-table {
	min-width: 520px;
}
#mti-compare-modal .mco-img {
	max-width: 160px;
	max-height: 120px;
	object-fit: contain;
}
#mti-compare-modal .mco-remove {
	font-size: 12px;
}
body.mti-modal-open {
	overflow: hidden;
}
@media (max-width: 760px) {
	#mti-compare-modal .mco-dialog {
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
}
@media print {
	body > *:not(#mti-compare-modal) {
		display: none !important;
	}
	#mti-compare-modal {
		position: static;
		display: block;
	}
	#mti-compare-modal .mco-overlay,
	#mti-compare-modal .mco-actions,
	#mti-compare-modal .mco-remove {
		display: none !important;
	}
	#mti-compare-modal .mco-dialog {
		position: static;
		width: 100%;
		max-width: none;
		max-height: none;
		overflow: visible;
		padding: 0;
		border-radius: 0;
	}
}

/* Product detail page */
.product-column-one {
	display: flex;
	flex-direction: column;
}
/* .view is nested inside .image-area, so order the two children of
   .image-area: main image first, thumbnail strip below it. */
.product-view-area .image-area {
	display: flex;
	flex-direction: column;
}
.product-view-area .image-area .view {
	order: 1;
}
.product-view-area .image-area .thumbs {
	order: 2;
	margin-top: 16px;
	max-height: none;
	overflow: hidden;
}
.product-view-area .image-area .thumbs div.thumb-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
}
.product-view-area .image-area .thumbs div.thumb-list > picture,
.product-view-area .image-area .thumbs div.thumb-list > img {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
}
.product-view-area .image-area .thumbs div.thumb-list > picture {
	display: block;
}
.product-view-area .image-area .thumbs div.thumb-list img {
	width: 80px;
	height: 80px;
	padding: 0;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	background: var(--card);
	border: 2px solid transparent;
}
.product-view-area .image-area .thumbs div.thumb-list img.on {
	border-color: var(--accent);
}

/* Material color swatches */
.product-colors-area {
	margin: 16px 0;
}
.colors-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 16px;
}
.colors-list > div {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #c9c9c4;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
	cursor: pointer;
	position: relative;
}
.colors-list > div::after {
	content: attr(title);
	position: absolute;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: var(--primary-fg);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.colors-list > div:hover::after {
	opacity: 1;
}
.type-title {
	font-size: 14px;
	font-weight: 600;
	margin-top: 12px;
}
.product-colors-area .more a {
	font-size: 14px;
	font-weight: 500;
}

/* Exterior color viewer */
.product-view-area .image-area {
	position: relative;
}
.product-view-area .color-view-hero {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 1px solid var(--border);
	z-index: 4;
	display: none;
	background: #fff;
	flex-direction: column;
}
.product-view-area .color-view-hero.color-open {
	display: flex;
}
.product-view-area .color-view-hero #color-area {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 0;
}
.product-view-area .color-view-hero #color-change-area {
	width: 100%;
}
.product-colors-area .new-color-view {
	position: absolute;
	left: 0;
	width: 100%;
	border: 1px solid var(--border);
	z-index: 4;
	display: none;
	background: #fff;
}
.product-colors-area .new-color-view.color-open {
	display: block;
}
.color-view-hero #color-change-area,
.new-color-view #color-change-area {
	line-height: 0;
}
.color-view-hero #color-change-area img,
.new-color-view #color-change-area img {
	display: block;
	width: 100%;
	height: auto;
}
.color-view-hero #color-name,
.new-color-view #color-name {
	padding: 10px;
	text-align: right;
	font-size: 13px;
}
.product-view-area a#close-color-popup {
	display: block;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
.product-view-area a#close-color-popup::before,
.product-view-area a#close-color-popup::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 2px;
	background: var(--primary);
}
.product-view-area a#close-color-popup::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.product-view-area a#close-color-popup::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.product-colors-area .external .colors-list > div.on,
.product-colors-area .material .colors-list > div.on {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Informational swatches (no colour photo variant, no mask) only get a
   colour-name label on the hero media — the photo itself never changes,
   matching the source site where the color-view popup is commented out. */
.product-view-area .image-area .view {
	position: relative;
}
.swatch-name {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--border);
	padding: 4px 10px;
	font-size: 12px;
	pointer-events: none;
}

/* ---------- Portfolio "Additional Projects" band ----------
   The source marks each project name with invalid </br> tags, which the
   importer stripped — collapsing every name onto one line. The newline
   separators still exist in the markup, so pre-line restores them. */
.mti-content div[style*="background-color:#e2e3e3"] .col-auto {
	white-space: pre-line;
}
/* Portfolio sidebar: project links were separated by the same stripped </br>
   tags — render each on its own line again. */
.mti-content div[style*="background-color:#e2e3e3"] small > a {
	display: block;
}
/* The band's columns are nested .row>.row>… chains (invalid Bootstrap) that
   stair-step downward. Flatten nested rows so every .col-auto is a direct
   flex item of the outer row; hide the empty .col-sm spacers and use gap. */
.mti-content div[style*="padding: 30px 300px"] .row {
	flex-wrap: wrap;
	gap: 12px 56px;
}
.mti-content div[style*="padding: 30px 300px"] .row .row {
	display: contents;
}
.mti-content div[style*="padding: 30px 300px"] .col-sm {
	display: none;
}
/* On stacked/mobile widths force the flattened columns into one clean column. */
@media (max-width: 991px) {
	.mti-content div[style*="padding: 30px 300px"] .row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.mti-content div[style*="padding: 30px 300px"] .col-auto {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* The band's fixed `padding: 30px 300px` forces a 600px-wide min-content box —
   it clips off the viewport on small screens. Clamp it responsively. */
.mti-content div[style*="padding: 30px 300px"] {
	padding: 30px clamp(20px, 20vw, 300px) !important;
	max-width: 100% !important;
}
/* On the source this band is a full-width strip. The import left it nested
   inside the sidebar col-lg-9, so at ≥992px break it back out to the viewport.
   Offsets derive from the fixed .container widths (1140/960) + 315/270px of
   column+padding, i.e. margin-left = containerW/2 − 50vw − offset. */
@media (min-width: 1200px) {
	.mti-content div[style*="padding: 30px 300px"] {
		width: 100vw;
		max-width: 100vw !important;
		margin-left: calc(255px - 50vw);
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.mti-content div[style*="padding: 30px 300px"] {
		width: 100vw;
		max-width: 100vw !important;
		margin-left: calc(210px - 50vw);
	}
}
.mti-content div[style*="padding: 30px 120px"] {
	padding: 30px clamp(20px, 8vw, 120px) 20px !important;
	max-width: 100% !important;
}

/* Imported pages embed a scraped copy of the old site footer inside post
   content — a duplicate of the real .mti-footer rendered by the theme. */
.mti-content footer {
	display: none !important;
}
/* Scraped "Please Wait" gallery loader — the progress JS was not imported,
   so it would sit on the page forever. */
.mti-content .progress-area {
	display: none !important;
}
/* Imported float-based .list tables (CAD files, tub/sink support, lead times,
   ADA, crate fees, options, support videos): the source stylesheet that gave
   the columns widths/floats was never imported, so cells stack vertically.
   Rebuild each row as a flex row. */
.mti-content .list .list_top,
.mti-content .list .list_item {
	display: flex;
	gap: 4px 16px;
	padding: 6px 0;
}
.mti-content .list_column {
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: break-word;
}
.mti-content .list_column.model_name,
.mti-content .list_column.description,
.mti-content .list_column.product {
	flex: 2 1 0;
}
.mti-content .list .clear {
	display: none;
}
/* Fixed `margin: 0 150px` wrappers (exclusives pages, CAD files) crush the
   content column on narrow screens — shrink the margin with the viewport. */
.mti-content div[style*="margin-left: 150px"],
.mti-content div[style*="margin-right: 150px"] {
	margin-left: clamp(0px, 10vw, 150px) !important;
	margin-right: clamp(0px, 10vw, 150px) !important;
}

/* ---------- Long-URL / unbreakable-text safety ----------
   Imported content contains long URLs that overflow narrow columns and get
   visually clipped by neighbouring content. Wrap them at the box edge. */
.mti-content p,
.mti-content li,
.mti-content td,
.mti-content dd,
.mti-content small,
.mti-content a,
.mti-content h1,
.mti-content h2,
.mti-content h3,
.mti-content h4,
.mti-content h5,
.mti-content h6 {
	overflow-wrap: break-word;
}

/* ---------- Website Review Audit fixes ---------- */

/* Discontinued products: prominent notice + tag (replaces the tiny red span). */
.product-view-area .mti-discontinued-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 4px solid #b42318;
	background: #fdf2f1;
	color: #5c1a14;
	font-size: 15px;
	line-height: 1.5;
}
.product-view-area .mti-discontinued-notice a { color: #b42318; text-decoration: underline; }
.product-view-area .mti-disc-tag {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #b42318;
	color: #fff;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Lead-times page: simple table (replaces the legacy float list). */
.mti-content table.mti-lead-table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0 12px;
	font-size: 15px;
}
.mti-content .mti-lead-table th,
.mti-content .mti-lead-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}
.mti-content .mti-lead-table thead th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-fg);
	border-bottom: 2px solid var(--fg);
}
.mti-content .mti-lead-table .mti-lead-group th {
	padding-top: 22px;
	font-size: 17px;
	color: var(--accent);
	border-bottom: 1px solid var(--fg);
}
.mti-content .mti-lead-table td:last-child { white-space: nowrap; }
.mti-content .mti-lead-table small { color: var(--muted-fg); }
.mti-content .mti-lead-note { font-size: 14px; color: var(--muted-fg); }
@media (max-width: 640px) {
	.mti-content .mti-lead-table thead { display: none; }
	.mti-content .mti-lead-table tr { display: grid; grid-template-columns: 1fr auto; }
	.mti-content .mti-lead-table td:first-child { grid-column: 1 / -1; padding-bottom: 0; border: 0; }
	.mti-content .mti-lead-table td:first-child:empty { display: none; }
	.mti-content .mti-lead-table .mti-lead-group th { grid-column: 1 / -1; }
}

/* Selection of Materials: four-column comparison (design per audit mockup). */
.mti-materials { max-width: 1280px; margin: 0 auto; padding: 56px 24px 80px !important; }
.mti-materials .mti-mat-head { display: grid; gap: 24px; margin-bottom: 40px; }
.mti-materials section { padding: 0; }
@media (min-width: 900px) { .mti-materials .mti-mat-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.mti-materials h1 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; margin: 6px 0 0; }
.mti-materials .mti-mat-intro { color: var(--muted-fg); font-size: 16px; max-width: 46ch; margin: 0; }
@media (min-width: 900px) { .mti-materials .mti-mat-intro { justify-self: end; } }
.mti-materials .mti-mat-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mti-materials .mti-mat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mti-materials .mti-mat-grid { grid-template-columns: repeat(4, 1fr); } }
.mti-materials .mti-mat-card { display: flex; flex-direction: column; min-width: 0; }
.mti-materials .mti-mat-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #e9e6e1; margin-bottom: 18px; }
.mti-materials .mti-mat-photo img { width: 100%; height: auto; display: block; }
.mti-materials .mti-mat-card h2 { font-size: 24px; font-weight: 400; margin: 0 0 4px; padding-top: 16px; border-top: 1px solid var(--fg); }
.mti-materials .mti-mat-card h2 sup { font-size: .5em; }
.mti-materials .mti-mat-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.mti-materials .mti-mat-card p { font-size: 14px; line-height: 1.6; color: var(--muted-fg); margin: 0 0 20px; }
.mti-materials .mti-mat-card p strong { color: var(--fg); }
.mti-materials .mti-mat-inside { margin-bottom: 20px; }
.mti-materials .mti-mat-inside .kicker { margin-bottom: 10px; }
.mti-materials .mti-mat-layers { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: start; }
.mti-materials .mti-mat-stack { display: flex; flex-direction: column; height: 130px; border: 1px solid var(--border); }
.mti-materials .mti-mat-stack span { display: block; min-height: 6px; }
.mti-materials .l-solid { background: #f1efe9; }
.mti-materials .l-coat { background: #fff; border-bottom: 1px solid var(--border); }
.mti-materials .l-resin { background: #e2d7c3; }
.mti-materials .l-wood { background: repeating-linear-gradient(90deg, #c5a572 0 4px, #b08d56 4px 7px); }
.mti-materials .mti-mat-layers ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted-fg); display: flex; flex-direction: column; justify-content: space-around; height: 130px; }
.mti-materials .mti-mat-layers li { padding-left: 16px; position: relative; }
.mti-materials .mti-mat-layers li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1px; background: var(--muted-fg); }
.mti-materials .mti-mat-layers li strong { color: var(--fg); font-weight: 600; }
.mti-materials .mti-mat-specs { margin: 0 0 22px; display: grid; grid-template-columns: 76px 1fr; font-size: 13px; border-top: 1px solid var(--border); flex: 1; align-content: start; }
.mti-materials .mti-mat-specs dt, .mti-materials .mti-mat-specs dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mti-materials .mti-mat-specs dt { color: var(--muted-fg); }
.mti-materials .sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border); vertical-align: -1px; margin: 0 4px 0 0; }
.mti-materials .sw + .sw, .mti-materials dd .sw:not(:first-child) { margin-left: 10px; }
.mti-materials .sw-white { background: #fff; }
.mti-materials .sw-biscuit { background: #e7dcc5; }
.mti-materials .mti-mat-btn { display: block; text-align: center; padding: 12px; border: 1px solid var(--fg); color: var(--fg); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.mti-materials .mti-mat-btn:hover { background: var(--fg); color: #fff; text-decoration: none; }

/* Search results: product cards with model number + thumbnail. */
.search-results-page .search-result-item.product-result { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.search-results-page .search-result-item.product-result img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: #f1f1f1; }
.search-results-page .search-result-item .sr-model { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted-fg); margin-left: 10px; }
.search-results-page .search-group-title, .search-results-page .search-result-list > p { grid-column: 1 / -1; }
.search-results-page .search-group-title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.search-results-page .search-group-title:first-child { margin-top: 0; }
@media (max-width: 480px) { .search-results-page .search-result-item.product-result { grid-template-columns: 1fr; } }

/* Support manual tables (tub / sink / shower-base support): the source's
   Bootstrap .col-sm-8/.col-sm-4 split squeezed the 6-column manual table into
   ~55% width so headers broke mid-word. Stack the manual table above the
   resources list, and lay the table out on a real column grid. */
/* Support pages render the resources sidebar in the right-hand column.
   Two markup variants exist: pages where .side-navigation is a sibling of
   .col-sm-8 inside .main-content > .row (manual pages), and pages where it
   sits in a .clear wrapper beside .main-content (FAQ/policy pages). */
#template-support div.main-area {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	gap: 48px !important;
	align-items: start !important;
}
#template-support .main-area > .clear { display: contents; }
#template-support .main-area > .clear > .side-navigation { width: 280px; }
#template-support .main-content > .row:has(> .side-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}
#template-support .main-content > .row > .col-sm-8 { width: auto; max-width: none; flex: none; padding: 0; float: none; }
#template-support .side-navigation { position: sticky; top: 96px; }
@media (max-width: 991px) {
	#template-support div.main-area { grid-template-columns: 1fr !important; }
	#template-support .main-content > .row:has(> .side-navigation) { display: block; }
	#template-support .main-content > .row > .col-sm-8 { width: 100%; }
	#template-support .side-navigation { position: static; margin-top: 40px; }
}
#template-support .list .list_top,
#template-support .list .list_item {
	display: grid;
	grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(84px, 1fr));
	gap: 8px 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}
#template-support .list .list_top { margin-top: 28px; border-bottom: 2px solid var(--fg); }
#template-support .list .list_top .list_column { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); line-height: 1.3; }
#template-support .list .list_top .list_column.product { font-family: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--accent); white-space: normal; }
#template-support .list .list_item .list_column.product { font-weight: 500; }
#template-support .list .list_column a { display: inline-block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
#template-support .list .list_column a:hover { border-color: var(--accent); text-decoration: none; }
@media (max-width: 760px) {
	#template-support .list .list_top .list_column:not(.product) { display: none; }
	#template-support .list .list_top,
	#template-support .list .list_item { grid-template-columns: 1fr; gap: 6px; }
	#template-support .list .list_item .list_column:not(.product) { display: inline-block; }
	#template-support .list .list_item .list_column a::before { content: attr(title); margin-right: 6px; color: var(--muted-fg); font-size: 12px; }
	#template-support .list .list_item .list_column a { border: 0; padding: 2px 0; }
}

/* ---------- Tablet/mobile sweep fixes ---------- */
/* Footer: 5 columns at 768px overflowed the wrap by 4px (min-content links). */
@media (min-width: 768px) and (max-width: 1023px) {
	.mti-footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mti-footer .cols > div:first-child { grid-column: 1 / -1; }
}
.mti-footer .cols .col { min-width: 0; }
/* Tap targets: give slim text links a ≥24px hit area without changing layout. */
.mti-footer .col a { padding: 3px 0; margin-bottom: 4px; }
.product-view-area .product-files-area a,
.product-view-area .product-file-area a { display: inline-block; padding: 3px 0; line-height: 18px; }
.filter-options label { padding: 6px 0; min-height: 28px; }
.filter-options input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; }
/* Legibility: nothing below 12px. */
.front .hero-card .hc-link,
.front .rt-label em,
main#new-product-page .filter-area .filter-title,
.mti-materials .mti-mat-tag,
.front .sc-kicker { font-size: 12px; }
.front .link-underline, .atelier-landing .link-underline, .search-results-page .link-underline { display: inline-block; padding: 2px 0; line-height: 20px; }
.mti-footer .base a, .mti-footer .base .social a { display: inline-flex; align-items: center; min-height: 24px; }
.front .hero-card { padding: 10px 14px; }
.mc-body .mc-coll { font-size: 12px; }
.product-view-area .product-colors-area .more a, .product-view-area .product-colors-area #color-popup { display: inline-block; padding: 4px 0; }
.filter-options input[type="checkbox"] { width: 20px; height: 20px; flex-basis: 20px; }
/* Gallery thumbnails link to the full-size original. */
.mti-content .gal .image-cont a.mti-gal-link { display: block; }
.mti-content .gal .image-cont a.mti-gal-link img { width: 100%; height: auto; display: block; }
/* Reserve the product hero slot before JS fills it (was CLS 0.12 on desktop).
   Product photos are 730x560; the media uses object-fit: contain inside. */
.product-view-area .image-area .view { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.product-view-area .image-area .view picture { display: flex; align-items: center; justify-content: center; }
.product-view-area .image-area .view img, .product-view-area .image-area .view video { width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; }

/* ---------- Pricing CTA (.mti-cta) ---------- */
.mti-cta { position: relative; display: inline-block; margin: 6px 0 2px; }
.mti-cta-pill { border: 1px solid var(--accent); background: var(--card); color: var(--accent); font-weight: 500; font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer; line-height: 1; }
.mti-cta-pill:hover, .mti-cta-pill:focus { background: var(--accent); color: var(--accent-fg); }
.mti-cta-pill .dim { color: var(--border); }
.mti-cta-pill:hover .dim { color: rgba(255,255,255,.45); }
.mti-cta-pill.unlocked { border-color: var(--gold); color: var(--primary); font-weight: 400; }
.mti-cta-pop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 250px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(22,38,58,.18); padding: 10px 12px; font-size: 12px; color: var(--fg); }
.mti-cta-pop-title { font-weight: 500; margin-bottom: 6px; color: var(--primary); }
.mti-cta-pop-row { display: flex; justify-content: space-between; padding: 2px 0; color: var(--muted); }
.mti-cta-pop-row.on { color: var(--accent); font-weight: 500; }
.mti-cta-pop-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.mti-cta-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(22,38,58,.55); display: flex; justify-content: flex-end; align-items: stretch; }
body.mti-cta-open { overflow: hidden; }
.mti-cta-modal { background: var(--card); width: 100%; max-width: 460px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; animation: mti-cta-slide .25s ease-out; }
@keyframes mti-cta-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mti-cta-head { background: var(--primary); color: var(--primary-fg); display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.mti-cta-thumb { width: 56px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.mti-cta-head-name { font-weight: 500; font-size: 17px; }
.mti-cta-head-model { font-size: 12px; opacity: .8; }
.mti-cta-x { margin-left: auto; background: none; border: 0; color: var(--primary-fg); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mti-cta-body { padding: 20px; font-size: 14px; }
.mti-cta-title { font-size: 20px; margin: 0 0 8px; color: var(--primary); }
.mti-cta-intro { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.mti-cta-field { display: block; font-size: 12px; font-weight: 500; color: var(--fg); margin-bottom: 12px; }
.mti-cta-field em { font-weight: 400; color: var(--muted); }
.mti-cta-field input, .mti-cta-field select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-weight: 400; box-sizing: border-box; }
.mti-cta-field.has-err input { border-color: #B3261E; }
.mti-cta-err { display: block; color: #B3261E; font-size: 11px; margin-top: 3px; min-height: 0; }
.mti-cta-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mti-cta-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--fg); margin-bottom: 14px; }
.mti-cta-check input { margin-top: 2px; }
.mti-cta-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; opacity: 0; }
.mti-cta-submit { display: block; width: 100%; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 6px; padding: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.mti-cta-submit:hover { filter: brightness(1.08); }
.mti-cta-submit:disabled { opacity: .6; cursor: default; }
.mti-cta-formerr { color: #B3261E; font-size: 12px; margin-top: 8px; }
.mti-cta-consent { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; }
.mti-cta-price-cap { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mti-cta-price { font-size: 44px; font-weight: 500; color: var(--primary); margin: 4px 0 2px; }
.mti-cta-price-sub { font-size: 13px; color: var(--accent); font-weight: 500; }
.mti-cta-disc { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 14px 0 18px; }
.mti-cta-quote { font-size: 15px; color: var(--fg); line-height: 1.6; margin-bottom: 18px; }
.mti-cta-actions { display: grid; gap: 10px; }
.mti-cta-btn { display: block; text-align: center; background: var(--accent); color: var(--accent-fg); border-radius: 6px; padding: 12px; font-weight: 500; font-size: 14px; }
.mti-cta-btn:hover { color: var(--accent-fg); text-decoration: none; filter: brightness(1.08); }
.mti-cta-btn.alt { background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
.mti-cta-btn.alt:hover { color: var(--accent); }
.catalogue-table .mti-cta-pill { padding: 5px 10px; font-size: 12px; }
@media (max-width: 767px) {
	.mti-cta-overlay { align-items: flex-end; }
	.mti-cta-modal { max-width: none; height: auto; max-height: 92vh; border-radius: 14px 14px 0 0; animation-name: mti-cta-sheet; }
	@keyframes mti-cta-sheet { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
	.mti-cta-pop { width: 220px; }
}

/* ---------- Visual defect sweep fixes ---------- */

/* Product page: "View Retail Pricing…" chip and the two locate-dealer links
   become a consistent stack of full-width outline buttons (inline border-color/
   color attributes on the dealer links are overridden). */
.product-view-area .product-file-area,
.product-view-area .locate-dealer-area {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.product-view-area .product-file-area a.product_file,
.product-view-area .locate-dealer-area a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid var(--primary) !important;
	border-radius: 9999px;
	background: transparent;
	color: var(--primary) !important;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}
.product-view-area .product-file-area a.product_file:hover,
.product-view-area .locate-dealer-area a:hover {
	background: var(--primary);
	color: var(--primary-fg) !important;
}
.product-view-area .locate-dealer-area a img { flex: none; }

/* FAQ pages: questions are <div style="color:red"> followed by loose answer
   text — restyle as a proper Q/A block rhythm. */
.mti-content .main-content div[style*="color:red"] {
	color: var(--fg) !important;
	font-weight: 600;
	font-size: 17px;
	margin: 24px 0 6px;
}
#template-support .main-content { line-height: 1.65; }
#template-support .main-content > p:last-of-type { margin-top: 24px; }

/* Wellness landing: equal nav tiles and a band that matches the text column. */
#wellness .wellness-main-nav {
	align-items: stretch;
}
#wellness .wellness-main-nav .navigation-button {
	border: 1px solid var(--border) !important;
	border-radius: var(--radius);
	box-shadow: none !important;
	overflow: hidden;
	height: 100%;
}
#wellness .wellness-main-nav .navigation-button a {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* Source buttons bake the caption into the image (different positions, one has
   a gradient box). The theme swaps in clean photos at render time and draws a
   uniform caption bar under each tile. */
#wellness .wellness-main-nav .navigation-button a::after {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px;
	background: var(--card);
	border-top: 1px solid var(--border);
	font-size: 14px;
	font-weight: 500;
	color: var(--fg);
	text-align: center;
}
#wellness .wellness-main-nav .navigation-button a[href*="power-of-water"]::after { content: 'The Power of Water'; }
#wellness .wellness-main-nav .navigation-button a[href*="hydrotherapies"]::after { content: 'Hydrotherapies'; }
#wellness .wellness-main-nav .navigation-button a[href*="sensory-therapies"]::after { content: 'Sensory Therapies'; }
#wellness .wellness-main-nav .navigation-button img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
#wellness #video-area { max-width: 820px; margin: 40px auto 0; }
#wellness #video-area video {
	width: 100% !important;
	max-width: 100%;
	display: block;
	margin: 0 0 40px;
}
#wellness #video-area p { margin: 0 0 20px; text-align: left; }

/* Blog index: each post reads as an article — 16/9 image, gap to title,
   generous separation between posts. */
.mti-content .blog-parent-page .main-column .post {
	margin-bottom: 48px;
}
.mti-content .blog-parent-page .main-column .post:last-child { margin-bottom: 0; }
.mti-content .blog-parent-page .post .image-area {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
}
.mti-content .blog-parent-page .post .image-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mti-content .blog-parent-page .post .post-teaser { margin-top: 16px; }
.mti-content .blog-parent-page .post .post-teaser h2 { font-size: 26px; margin: 0 0 8px; }

/* Brochures: rebuild the uneven Bootstrap rows as a uniform card grid. */
#product-brochures > section:first-of-type {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px 96px !important;
}
/* The brochure groups nest unclosed <section> elements, so each level would
   inherit the global section padding and keep shrinking the grid. */
#product-brochures section { padding: 0 !important; }
#product-brochures #brochure-buttons { padding: 0; }
#product-brochures #brochure-buttons .container { max-width: none; padding: 0; }
#product-brochures .row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
	margin: 0;
	padding-bottom: 40px;
}
#product-brochures .col-lg-4 {
	width: auto;
	max-width: none;
	flex: none;
	float: none;
	padding: 0;
}
#product-brochures .cta { text-align: left; }
#product-brochures .cta a { text-decoration: none; color: var(--fg); }
#product-brochures .cta img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius);
	display: block;
	margin: 0;
}
#product-brochures .cta br { display: none; }
#product-brochures .button-title { font-weight: 600; font-size: 15px; margin-top: 12px; }
#product-brochures .cta p { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 767px) {
	#product-brochures .row { grid-template-columns: 1fr; gap: 40px; }
	#product-brochures .cta img { max-width: 320px; }
}

/* Awards: consistent rows — logo in a fixed column, list left-aligned. */
.mti-content #primaryawards .row.justify-content-center {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 48px;
	margin: 0;
}
.mti-content #primaryawards .row.justify-content-center > .col-lg-5,
.mti-content #primaryawards .row.justify-content-center > .col-lg-10 {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
}
.mti-content #primaryawards .col-lg-10.greysep { grid-column: 1 / -1; border-top: 1px solid var(--border); height: 0; }
.mti-content #primaryawards .col-lg-5 > .row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 0;
}
.mti-content #primaryawards .col-lg-5 > .row > [class*="col-"] {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	text-align: left !important;
}
.mti-content #primaryawards .row > [class*="col-"]:has(> img.award-logo) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: none !important;
}
@media (min-width: 768px) {
	.mti-content #primaryawards .row > [class*="col-"]:has(> img.award-logo) {
		width: 160px !important;
		height: 120px;
	}
}
.mti-content #primaryawards img.award-logo { width: auto; max-width: 160px; max-height: 120px; height: auto; object-fit: contain; margin: 0; background: none; }
.mti-content #primaryawards ul { text-align: left; margin: 0; padding-left: 18px; }
.mti-content #primaryawards li { margin-bottom: 4px; }
.mti-content #otherawards .col-lg-3.text-center { text-align: left !important; }
.mti-content #otherawards .award-logo { height: 120px; display: flex; align-items: flex-end; justify-content: flex-start !important; margin-bottom: 12px; }
.mti-content #otherawards .award-logo img { max-width: 160px; max-height: 120px; width: auto; height: auto; margin: 0 !important; }
.mti-content #otherawards ul { text-align: left; margin: 0; padding-left: 18px; }
@media (max-width: 767px) {
	.mti-content #primaryawards .row.justify-content-center { grid-template-columns: 1fr; }
}

/* Shared landing hero (options, media-news, dealer locator): the kicker sat
   flush under the sticky header — add breathing room. */
.atelier-landing .landing-hero,
.dealer-page .landing-hero { padding-top: 48px !important; }

/* Landing cards: uniform image aspect and equal card heights per row. */
.landing-card { display: flex; flex-direction: column; height: 100%; }
.landing-card picture { display: block; }
.landing-card img { aspect-ratio: 4 / 3; }
.landing-card > div { flex: 1; }
/* A .wide card spans 2 columns, so a plain 4/3 image would be ~2x taller than
   its neighbour's and leave the neighbour with a huge empty body. Size the wide
   image to exactly one card-width of 4/3 media: (grid - 2*gap) / 4 at 3 cols.
   A .wide card left alone on its row falls back to a normal card. */
@media (min-width: 1100px) {
	.landing-grid { container-type: inline-size; }
	.landing-grid > .landing-card.wide:last-child:nth-child(3n) { grid-column: auto; }
	.landing-card.wide img { aspect-ratio: auto; height: calc((100cqw - 36px) / 4); }
	.landing-grid > .landing-card.wide:last-child:nth-child(3n) img { aspect-ratio: 4 / 3; height: auto; }
}
@media (min-width: 760px) and (max-width: 1099px) {
	.landing-grid { container-type: inline-size; }
	.landing-grid > .landing-card.wide:last-child:nth-child(2n) { grid-column: auto; }
	.landing-card.wide img { aspect-ratio: auto; height: calc((100cqw - 18px) * 3 / 8); }
	.landing-grid > .landing-card.wide:last-child:nth-child(2n) img { aspect-ratio: 4 / 3; height: auto; }
}

/* Contact page: the "Quick Links" list lost its line breaks when the source's
   </br> separators were stripped; restore block rows and space before the
   privacy line. */
#contact-us .sidenav.contact .quick-links li {
	list-style: none;
	display: block;
	margin: 0;
	padding: 2px 0;
}
#contact-us .sidenav.contact .menu-contact-container { margin-bottom: 24px; }
#contact-us .clear + p { margin-top: 24px; }

/* ---------- Responsive polish pass ---------- */


/* B. Homepage hero: the absolutely-positioned img forced 640px at 768+ and
   overflowed its 60vw cell into the next section. Self-size the cell. */
@media (min-width: 768px) and (max-width: 1023px) {
	.front .hero-right { height: auto; min-height: 0; aspect-ratio: 4 / 3; max-height: 60vw; overflow: hidden; }
	.front .hero-right img { min-height: 0; }
}

/* C. Catalogue hero: stack image over text below 1024; box edge aligns with
   the catalogue content gutter (20px) at <900. — superseded by the unified
   product-type hero component at the end of this file. */

/* D. Catalogue grids, pills, filters, table font floor. */
.mti-cta-pill { white-space: nowrap; }
@media (max-width: 479px) {
	main#new-product-page .mti-catalogue-ready .product-list.view-detail { grid-template-columns: 1fr; }
	main#new-product-page .mti-catalogue-ready .pt-actions { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 480px) and (max-width: 767px) {
	main#new-product-page .mti-catalogue-ready .product-list.view-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mti-catalogue-ready .filter-options label { min-height: 28px; display: flex; align-items: center; gap: 8px; }
.mti-catalogue-ready .filter-options input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin: 4px 4px 4px 0; }
.mti-catalogue-ready .catalogue-table td,
.mti-catalogue-ready .catalogue-table th { font-size: 12px; }

/* E. Product page. */
@media (min-width: 768px) {
	.product-view-area .image-area .thumbs div.thumb-list { gap: 12px; }
	.product-view-area .image-area .thumbs div.thumb-list > picture,
	.product-view-area .image-area .thumbs div.thumb-list > img { flex: 0 0 88px; width: 88px; height: 88px; }
	.product-view-area .image-area .thumbs div.thumb-list img { width: 88px; height: 88px; border: 1px solid var(--border); }
	.product-view-area .image-area .thumbs div.thumb-list img.on { border: 2px solid var(--accent); }
}
@media (max-width: 767px) {
	.product-view-area .image-area .thumbs div.thumb-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.product-view-area .image-area .thumbs div.thumb-list::-webkit-scrollbar { display: none; }
	.product-view-area .image-area .thumbs div.thumb-list > picture,
	.product-view-area .image-area .thumbs div.thumb-list > img { flex: 0 0 72px; width: 72px; height: 72px; scroll-snap-align: start; }
	.product-view-area .image-area .thumbs div.thumb-list img { width: 72px; height: 72px; object-fit: cover; }
}
.product-view-area .mti-cta { margin-bottom: 16px; }
@media (max-width: 767px) { .product-view-area .mti-cta { margin-bottom: 20px; } }
.product-view-area .product-file-area a.product_file {
	border: 1px solid var(--accent) !important;
	padding: 10px 18px;
	font-weight: 500;
}
.product-view-area .product-file-area a.product_file::before {
	content: '';
	width: 14px; height: 16px; flex: none;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 0h7l5 5v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm7 1v4h4' fill='none' stroke='white'/%3E%3C/svg%3E") center/contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2 0h7l5 5v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm7 1v4h4' fill='none' stroke='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 767px) {
	.product-view-area .product-file-area a.product_file { width: 100%; }
}
.product-view-area .product-specs-area .half p {
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
}
.product-view-area .product-specs-area .half p:last-child { border-bottom: 0; }
@media (min-width: 768px) {
	.product-view-area .product-files-area .half p { margin: 3px 0; }
}

/* F. Support landing nav grid. */
#template-support h5 { margin-bottom: 16px; }
#template-support .support-main-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) and (max-width: 1023px) { #template-support .support-main-nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { #template-support .support-main-nav { grid-template-columns: repeat(4, 1fr); } }
#template-support .support-main-nav .navigation-button { height: 100%; }
#template-support .support-main-nav .navigation-button a { display: flex; flex-direction: column; height: 100%; }
#template-support .support-main-nav .navigation-button img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; }
#template-support .support-main-nav .navigation-button h6 { padding: 14px; flex: 1; display: flex; align-items: center; justify-content: center; }

/* G. Wellness (and sibling main-nav) tile rows: fixed 3-col at >=768. */
@media (min-width: 768px) {
	#wellness .wellness-main-nav,
	.mti-content [class*="-main-nav"] { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: none; }
}
@media (max-width: 599px) {
	#wellness .wellness-main-nav,
	.mti-content [class*="-main-nav"] { grid-template-columns: 1fr; }
}

/* H. Lead-times: left-align intro + NOTES callout (markup centres them). */
#product-lead-time h6 { text-align: left !important; }
#product-lead-time h6[style*="#ff0000"] {
	border-left: 3px solid #b42318;
	background: #fff6f1;
	padding: 12px 16px;
	color: var(--fg) !important;
}
#product-lead-time h6[style*="#ff0000"] strong { color: #b42318; }
#product-lead-time .mti-lead-table small { font-size: 12px; }

/* I. Footer social anchors >=32x32 hit area. */
.mti-footer .soc a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 8px; box-sizing: content-box; }

/* J. Dealer page link hit areas. */
.dealer-page .dl-link, .dealer-page .dl-card-link, .dealer-page .dl-model-link {
	display: inline-block;
	padding: 4px 0;
	min-height: 24px;
	box-sizing: content-box;
}

/* K. Gutter + type rhythm for imported content (excludes front page and the
   catalogue/product shell, which keep their own layout rules). */
:root { --gutter: 20px; }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
.mti-content:not(.front) main:not(#new-product-page) .container,
.mti-content:not(.front) div.main-area,
.mti-content:not(.front) #banner-area .heading {
	padding-inline: var(--gutter);
	max-width: 1280px;
	margin-inline: auto;
}
.mti-content:not(.front) main:not(#new-product-page) h1 { margin: 0 0 .5em; }
.mti-content:not(.front) main:not(#new-product-page) h2 { margin: 1.5em 0 .6em; }
.mti-content:not(.front) main:not(#new-product-page) h3 { margin: 1.25em 0 .5em; }
.mti-content:not(.front) main:not(#new-product-page) :is(h1, h2, h3):first-child { margin-top: 0; }
.mti-content:not(.front) main:not(#new-product-page) p,
.mti-content:not(.front) main:not(#new-product-page) ul,
.mti-content:not(.front) main:not(#new-product-page) ol { margin: 0 0 1em; }
.mti-content:not(.front) main:not(#new-product-page) li { margin: .25em 0; }

/* L. Tiny-font floor: drawer headings + mobile bar labels. */
.mti-drawer .sub-navigation a.type-heading { font-size: 12px; }
.mti-drawer .sub-navigation .links a { font-size: max(12px, 1em); }
.mti-mobilebar a { font-size: 12px; }

/* M. Mobile bottom bar: reserve body space matching the bar height. */
@media (max-width: 767px) { body { padding-bottom: calc(44px + env(safe-area-inset-bottom)); } }

/* ---- tap targets & tiny-font cleanup ---- */
main#new-product-page .product-type-hero .product-description a { display: inline-block; padding: 4px 0; }
.mti-content .list .list_top .list_column { font-size: 12px; }
.mti-content ul li > a { display: inline-block; padding: 3px 0; min-height: 24px; box-sizing: border-box; }
.front .spotlight .spot-info .spec li span { font-size: 12px; }
main#new-product-page .product-type-hero .product-description sup,
main#new-product-page .product-type-hero .product-description small { font-size: 12px; }
.mti-lead-table sup { font-size: 12px; }
.mti-catalogue-ready .catalogue-table td > a { display: inline-block; padding: 5px 0; }
.mti-catalogue-ready .catalogue-table .compare-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.mti-catalogue-ready .catalogue-table .compare-check { width: 24px; height: 24px; flex: 0 0 24px; }
.front .hero .shown a { display: inline-block; padding: 4px 0; min-height: 24px; box-sizing: border-box; }
.mti-catalogue-ready .catalogue-table td > a { padding-left: 3px; padding-right: 3px; }
#template-support .list_item .list_column.product sup,
#template-support .list_item .list_column.product sup small { font-size: 12px; }
#template-support .list p > a { display: inline-block; padding: 4px 0; }
.mti-catalogue-ready .product-thumb .image-area > a { display: block; }
.mti-catalogue-ready .compare-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.mti-catalogue-ready .compare-check { width: 24px; height: 24px; flex: 0 0 24px; }
.mti-catalogue-ready .product-thumb .detail-item a,
.mti-catalogue-ready .style-group-header a.style-link { display: inline-block; padding: 4px 0; }
.mti-content .list .list_column a { display: inline-block; padding: 4px 0; min-height: 24px; box-sizing: border-box; }

/* SEO phase 2: visible breadcrumbs, product kicker, topic headings, col labels. */
.mti-crumbs { padding-inline: var(--gutter); max-width: 1280px; margin: 14px auto 0; font-size: 12.5px; color: var(--muted); }
.mti-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.mti-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--border); }
.mti-crumbs a { color: inherit; }
.mti-crumbs a:hover { text-decoration: underline; }
.mti-crumbs:has(+ * #banner-area), .mti-crumbs:has(+ * .product-type-hero) { margin-bottom: 10px; }
@media (max-width: 767px) {
	.mti-crumbs { font-size: 12px; }
	.mti-crumbs ol { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.mti-crumbs li { display: inline; }
}
.product-view-area .mti-product-kicker { font-size: 14px; color: var(--muted); margin: 4px 0 14px; letter-spacing: .01em; }
.product-view-area .mti-cta { margin-top: 0; }
.mti-content h1.mti-topic-title,
.mti-content:not(.front) main:not(#new-product-page) h1.mti-topic-title { font-size: 36px; line-height: 1.1; margin: 0 0 18px; text-align: left; }
.mti-content #banner-area .heading .mti-banner-title { display: block; font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; color: var(--fg); font-size: 64px; line-height: 1.05; margin: 0 0 32px; text-align: center; }
@media (max-width: 767px) { .mti-content #banner-area .heading .mti-banner-title { font-size: 40px; margin-bottom: 20px; } }
.mti-content:not(.front) main:not(#new-product-page) h2.mti-col-label,
.product-view-area h2.mti-col-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 18px 0 8px; font-weight: 600; }
.mti-content .more p { margin: 0 0 4px; }
.mti-content h1.mti-topic-title strong { font-weight: 400; }

/* Product page desktop nits: dealer buttons side-by-side at >=1024,
   Downloads & resources link list in 2 cols at >=768. */
@media (min-width: 1024px) {
	.product-view-area .locate-dealer-area { flex-direction: row; flex-wrap: wrap; gap: 12px; }
	.product-view-area .locate-dealer-area a { width: auto; }
}
@media (min-width: 768px) {
	.product-view-area .product-files-area { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
	.product-view-area .product-files-area .clear { display: none; }
	.product-view-area .product-files-area .more { grid-column: 1 / -1; }
}

/* S03: no-JS product index (replaced by the JS catalogue when it loads) */
.mti-nojs-products {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	gap: 24px;
	font-size: 14px;
}
@media (max-width: 899px) {
	.mti-nojs-products { columns: 2; }
}
.mti-nojs-products li {
	margin-bottom: 6px;
	break-inside: avoid;
}

/* ---------- Unified product-type / collection hero ----------
   One component for every catalogue landing (/products/tubs/, /products/sinks/,
   /products/shower-bases/ and all collection pages): 2-column grid, media in a
   fixed 3:2 frame (420px desktop / 300px tablet / 220px mobile) cropped with
   object-fit, copy vertically centred, 56px inner padding, 32px gap, and one
   CTA style. Kept in this file (loaded last) so it wins over the earlier
   ad-hoc hero rules. */
main#new-product-page section.product-type-hero { padding: 0 !important; }
main#new-product-page #banner-area {
	background: var(--primary);
	padding: 0;
	border-bottom: 0;
	overflow: hidden;
}
main#new-product-page #banner-area > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 56px;
}
main#new-product-page #banner-area > .container > picture,
main#new-product-page #banner-area > .container > img {
	display: block;
	width: 100%;
	height: 420px;
	min-height: 0;
	max-height: none;
	object-fit: cover;
	object-position: center;
	align-self: center;
}
main#new-product-page #banner-area > .container > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
main#new-product-page .product-type-hero-overlay {
	position: static;
	height: auto;
	background: transparent;
	display: flex;
	align-items: center;
	min-width: 0;
}
main#new-product-page .product-type-hero-overlay > .container {
	width: 100%;
	min-height: 0;
	padding: 0;
	display: block;
}
main#new-product-page .product-description {
	width: 100%;
	max-width: none;
	padding: 0;
	color: #fff;
	display: block;
}
main#new-product-page .product-description p { max-width: 60ch; }
/* Parenthetical / secondary text inside the h1 drops to a .hero-sub line. */
main#new-product-page .product-description h1 small,
main#new-product-page .product-description .hero-sub {
	display: block;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.45;
	opacity: .7;
	margin-top: 8px;
	letter-spacing: 0;
}
/* CTAs: uniform buttons — first is white-fill/navy, the rest white-outline.
   Sibling combinator works because the anchors are siblings in the markup. */
main#new-product-page .product-description a[style*="background"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 24px !important;
	margin: 4px 12px 8px 0;
	background: #fff !important;
	color: var(--primary) !important;
	border: 1px solid #fff;
	font-weight: 500;
	text-decoration: none !important;
	vertical-align: top;
}
main#new-product-page .product-description a[style*="background"] ~ a[style*="background"] {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .85) !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
	main#new-product-page #banner-area > .container { padding: 40px; }
	main#new-product-page #banner-area > .container > picture,
	main#new-product-page #banner-area > .container > img { height: 300px; }
}
@media (max-width: 767px) {
	main#new-product-page #banner-area > .container {
		grid-template-columns: 1fr;
		padding: 28px 20px;
		gap: 24px;
	}
	main#new-product-page #banner-area > .container > picture,
	main#new-product-page #banner-area > .container > img { height: 220px; }
	main#new-product-page .product-description h1 { font-size: 30px !important; padding-bottom: 8px !important; }
}

/* ---------- WS16 responsive QA fixes ---------- */

/* Home hero: the 420px min-height image overflowed its 60vw container at
   mobile, visually covering the next section (contrast/overlay issues). */
@media (max-width: 899px) {
	.front .hero-right { overflow: hidden; }
	.front .hero-right img { min-height: 0; height: 100%; }
	.front .hero-right { height: 60vw; min-height: 220px; }
}
.front .hero-right { overflow: hidden; }

/* Dealer locator: zip row must wrap at narrow widths (input + Search +
   From-My-Location overflowed ~4px past 360). */
@media (max-width: 560px) {
	.dealer-sidebar .dl-ziprow { flex-wrap: wrap; }
	.dealer-sidebar .dl-ziprow .dl-input { flex: 1 1 auto; min-width: 90px; }
	.dealer-sidebar .dl-locate { flex: 1 1 100%; justify-content: center; }
}

/* Tap targets ≥40px at ≤414px (WCAG-friendly). */
@media (max-width: 1099px) {
	.mti-burger { min-height: 40px; min-width: 40px; justify-content: center; }
}
@media (max-width: 414px) {
	.mti-cta-pill { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; }
	/* Breadcrumbs: wrap again (the mobile single-line ellipsis also cramped taps). */
	.mti-crumbs ol { display: flex; flex-wrap: wrap; white-space: normal; overflow: visible; text-overflow: clip; }
	.mti-crumbs li { display: flex; align-items: center; min-height: 40px; }
	.mti-crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* WS16: scraped FAQ question rows use inline color:#f00/red — 4.0:1 on white.
   Darken to a red that still reads red but passes 4.5:1. */
.mti-content [style*="color: red"],
.mti-content [style*="color:red"],
.mti-content [style*="color:#ff0000"],
.mti-content [style*="color: #ff0000"],
.mti-content [style*="color:#f00"],
.mti-content [style*="color: #f00"],
.mti-content [style*="color:rgb(255,0,0)"],
.mti-content [style*="color: rgb(255, 0, 0)"] {
	color: #cc0000 !important;
}
/* Links inside body copy must be distinguishable without colour alone. */
.mti-content p a, .mti-content li a { text-decoration: underline; }

/* Carousel prev/next over photos: give the glyph hit-area a scrim disc so the
   control stays legible on any image (also fixes tap target). */
.mti-content .carousel-control-prev,
.mti-content .carousel-control-next {
	width: 44px; height: 44px; opacity: .95;
	background: radial-gradient(circle, rgba(15,30,45,.65) 0%, rgba(15,30,45,.45) 62%, transparent 70%);
}

/* Footer + utility link tap targets on small screens. */
@media (max-width: 414px) {
	.mti-footer .col a { display: flex; align-items: center; min-height: 40px; margin-bottom: 0; }
	.mti-footer .base-links a { display: inline-flex; align-items: center; min-height: 40px; }
	.mti-content button { min-height: 40px; }
	.mti-footer .soc a { min-height: 40px; }
	/* Form controls */
	.mti-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
	.mti-content select, .mti-content textarea { min-height: 40px; box-sizing: border-box; }
	/* Checkbox/radio: 20px visual box; the wrapping label carries the tap area. */
	.mti-content input[type=checkbox], .mti-content input[type=radio] { width: 20px; height: 20px; }
	.mti-content label:has(input[type=checkbox]), .mti-content label:has(input[type=radio]) {
		display: flex; align-items: center; gap: 8px; min-height: 40px;
	}
}

/* selection-of-materials cards: body text renders over the material photo —
   keep it readable with a light panel behind the copy. */
.mti-materials .mti-mat-card h3,
.mti-materials .mti-mat-card p {
	background: rgba(255, 255, 255, .92);
	padding: 4px 8px;
	border-radius: 4px;
	width: fit-content;
	max-width: 100%;
}

/* Banner h1s that wrap past 3 lines on narrow screens — step the size down. */
@media (max-width: 420px) {
	.mti-content #banner-area .heading h1,
	.mti-content #banner-area .heading .mti-banner-title { font-size: 32px; }
}

/* Hero images must keep usable height on phones (no slivers). */
@media (max-width: 414px) {
	.mti-content #banner-area > .container > img,
	.mti-content #banner-area > .container > picture > img { min-height: 160px; object-fit: cover; }
}


/* Scraped expand-photo anchors whose image was not imported — invisible
   dead focusable links; hide them entirely. */
.mti-content a.image-select:not(:has(img, picture, svg)) { display: none; }

/* Long collection h1s (.product-description h1) still wrap to 3+ lines at
   small widths — cap them a step lower. */
@media (max-width: 420px) {
	main#new-product-page .product-description h1, .mti-content .product-description h1 { font-size: 26px !important; line-height: 1.15; }
}

/* Generic scraped h1s (e.g. DoloMatte exclusive page) that wrap past three
   lines on phones — stepped down per the mobile type ramp. */
@media (max-width: 420px) {
	.mti-content h1.text-center { font-size: 26px !important; line-height: 1.2; }
}


/* ======================================================================
   WS20 — client visual redesign (Option A)
   1. Unified page gutter: logo, breadcrumbs, titles and content share one
      left edge at every width.
   2. Section/type/collection hero: breadcrumbs → title+intro row →
      full-bleed photo → slim toolbar.
   3. Product detail page: gallery 60 / details 40, below-fold sections.
   ====================================================================== */

/* -- 1. Page gutter -------------------------------------------------- */
:root { --page-gutter: 16px; }
@media (min-width: 768px)  { :root { --page-gutter: 24px; } }
@media (min-width: 1024px) { :root { --page-gutter: 40px; } }
@media (min-width: 1280px) { :root { --page-gutter: 64px; } }

body { background: #fff; }

/* Every container that must share the left edge gets the same box. */
.mti-crumbs,
.mti-content:not(.front) main:not(#new-product-page) .container,
.mti-content:not(.front) div.main-area,
.mti-content:not(.front) #banner-area .heading,
main#new-product-page .product-view-area > .container,
main#new-product-page section.product-list-area,
.mti-footer .wrap {
	max-width: 1440px;
	padding-inline: var(--page-gutter);
	margin-inline: auto;
}
.mti-crumbs { margin-top: 18px; font-size: 12px; letter-spacing: .02em; }

/* D1 (WS22): search is an always-open field at ≥1152 — a slim hairline
   pill (36px, radius 18px) that stays put next to the nav. Below that,
   down to 1024, it falls back to the expanding magnifier icon so the nav
   never wraps; <1024 it lives in the mobile drawer as before. */
@media (min-width: 1152px) {
	.mti-search {
		display: flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		width: 200px;
		border: 1px solid var(--border);
		border-radius: 18px;
		background: #fff;
		padding: 0 12px;
	}
	.mti-search .mti-search-toggle {
		width: auto; height: auto; min-width: 0; min-height: 0;
		border: 0; background: transparent; padding: 0;
		color: var(--muted-fg); cursor: text;
	}
	.mti-search input {
		flex: 1; min-width: 0; width: auto; opacity: 1;
		padding: 0; font-size: 13px;
	}
	.mti-search .mti-search-go { display: none; }
}
@media (min-width: 1280px) {
	.mti-search { width: 240px; }
}
@media (max-width: 1151px) and (min-width: 1024px) {
	/* Icon-only: keep the expand-on-click behaviour untouched. */
	.mti-search input { width: 0; }
}

/* -- 2. Section / type / collection hero ----------------------------- */
/* DOM is imported content: #banner-area > .container > [picture, overlay].
   CSS-only relayout: text row first (order -1), photo full-width second. */
main#new-product-page #banner-area {
	background: transparent;
	border-bottom: 0;
}
main#new-product-page #banner-area > .container {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	max-width: 1440px;
	margin: 0 auto;
}
main#new-product-page .product-type-hero-overlay {
	order: -1;
	display: block;
	/* Flex item inside #banner-area > .container — stretch to full width or
	   it shrinks to content width and the title misses the page gutter. */
	flex: 0 0 100%;
	width: 100%;
}
main#new-product-page .product-type-hero-overlay > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	align-items: end;
	gap: 24px 48px;
	width: 100%;
	padding: 18px var(--page-gutter) 26px;
	max-width: 1440px;
	margin: 0 auto;
}
main#new-product-page .product-description,
main#new-product-page .product-description.hero {
	display: contents !important; /* beats style.css's legacy !important lock */
	color: var(--fg);
}
main#new-product-page .product-description h1 {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	color: var(--fg) !important;
	font-size: 84px !important; /* legacy hero rules carry !important */
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.02em;
	max-width: none;
}
main#new-product-page .product-description p {
	grid-column: 2;
	margin: 0;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.45;
	color: var(--muted-fg);
	/* intro: max two lines */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
/* JS (normalizeHero) tags intros that still overflow 3 lines at ≥1440 —
   those shrink to 16px rather than clamping mid-word. */
@media (min-width: 1440px) {
	main#new-product-page .product-description p.long-intro { font-size: 16px; }
}
/* Second paragraph (the "Watch:" / extra links) renders as the bold link
   row under the intro — never clamped. */
main#new-product-page .product-description p + p {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--fg);
	-webkit-line-clamp: unset;
	overflow: visible;
}
main#new-product-page .product-description p a {
	font-weight: 600;
	color: var(--fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}
main#new-product-page .product-description p a:hover { color: var(--accent); }

/* Photo: bleeds to the gutter edges, fixed ratio, centre-cropped. */
main#new-product-page #banner-area > .container > picture,
main#new-product-page #banner-area > .container > img {
	display: block;
	width: calc(100% - 2 * var(--page-gutter));
	margin-inline: var(--page-gutter);
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	align-self: stretch;
}
main#new-product-page #banner-area > .container > picture > img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (min-width: 1280px) {
	main#new-product-page #banner-area > .container > picture,
	main#new-product-page #banner-area > .container > img { aspect-ratio: 16 / 6; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	main#new-product-page .product-description h1 { font-size: 64px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	main#new-product-page .product-type-hero-overlay > .container {
		grid-template-columns: 1fr;
	}
	main#new-product-page .product-description h1 { grid-row: auto; font-size: 48px !important; }
	main#new-product-page .product-description p { grid-column: 1; max-width: 62ch; }
}
@media (max-width: 767px) {
	main#new-product-page #banner-area > .container > picture,
	main#new-product-page #banner-area > .container > img { aspect-ratio: 4 / 3; }
	main#new-product-page .product-type-hero-overlay > .container { grid-template-columns: 1fr; padding-bottom: 20px; }
	main#new-product-page .product-description h1 { grid-row: auto; font-size: 36px !important; }
	main#new-product-page .product-description p { grid-column: 1; -webkit-line-clamp: unset; }
}

/* Slim toolbar under the hero photo: count left, controls right,
   hairline beneath. Built by mti-catalogue.js (.catalogue-controls). */
main#new-product-page .catalogue-controls {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 8px;
	flex-wrap: wrap;
}
main#new-product-page .catalogue-controls .result-count {
	order: -1;
	font-size: 14px;
	color: var(--fg);
	margin-left: 0;
	margin-right: auto;
}
main#new-product-page .catalogue-controls .filter-toggle,
main#new-product-page .catalogue-controls .clear-filters,
main#new-product-page .catalogue-controls .view-toggle button,
main#new-product-page .catalogue-controls .sort-select {
	min-height: 40px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fg);
	background: transparent;
	border: 0;
	padding: 4px 6px;
	cursor: pointer;
}
main#new-product-page .catalogue-controls .view-toggle {
	display: flex;
	gap: 2px;
	border-left: 1px solid var(--border);
	padding-left: 14px;
}
main#new-product-page .catalogue-controls .view-toggle button.on { text-decoration: underline; text-underline-offset: 4px; }
main#new-product-page .catalogue-controls .sort-select { border-left: 1px solid var(--border); padding-left: 14px; }
main#new-product-page .catalogue-controls .sort-select select {
	border: 0; background: transparent; font: inherit; color: var(--fg);
	cursor: pointer; padding: 4px 0;
}

/* -- 3. Product detail page ------------------------------------------ */
/* The builder in mti-catalogue.js (buildProductLayout) re-parents the
   imported nodes into .mti-pg-* containers; these rules style them. */
.product-view-area .mti-pg-top {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 56px;
	padding-block: 26px 40px;
}
.product-view-area .mti-pg-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.product-view-area .mti-pg-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; }
.product-view-area .mti-pg-thumbs .thumb-btn {
	border: 1px solid var(--border); padding: 0; background: #fff; cursor: pointer;
	line-height: 0; border-radius: 4px; overflow: hidden;
}
.product-view-area .mti-pg-thumbs .thumb-btn img { width: 100%; height: auto; display: block; }
.product-view-area .mti-pg-thumbs .thumb-btn[aria-pressed="true"] { border-color: var(--fg); }
.product-view-area .mti-pg-hero { position: relative; min-width: 0; }
.product-view-area .mti-pg-hero img,
.product-view-area .mti-pg-hero video { display: block; width: 100%; height: auto; }
.product-view-area .mti-pg-hero .mti-pg-tools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.product-view-area .mti-pg-hero .mti-pg-tools button {
	border: 0; background: rgba(255,255,255,.92); color: var(--fg);
	font-size: 12px; font-weight: 600; padding: 8px 14px; cursor: pointer;
	border-radius: 4px; min-height: 40px;
}
.product-view-area .mti-pg-hero .mti-pg-tools button:hover { background: #fff; }
.product-view-area .mti-pg-counter {
	position: absolute; right: 12px; bottom: 12px;
	background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
	padding: 5px 10px; border-radius: 4px; letter-spacing: .06em;
}
.product-view-area .mti-pg-lightbox {
	position: fixed; inset: 0; z-index: 200; background: rgba(10,15,25,.92);
	display: flex; align-items: center; justify-content: center; padding: 4vw;
}
.product-view-area .mti-pg-lightbox img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; }
.product-view-area .mti-pg-lightbox .mti-pg-lb-close {
	position: absolute; top: 18px; right: 22px; border: 0; background: transparent;
	color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 8px;
}

/* Details column */
.product-view-area .mti-pg-details { min-width: 0; }
.product-view-area .mti-pg-crumbs { font-size: 12px; color: var(--muted-fg); margin-bottom: 18px; }
.product-view-area .mti-pg-crumbs a { color: inherit; display: inline-block; padding: 14px 0; margin: -14px 0; }
.product-view-area .mti-pg-crumbs span + span::before, .product-view-area .mti-pg-crumbs a + span::before, .product-view-area .mti-pg-crumbs * + *::before { content: ""; }
.product-view-area .mti-pg-crumbs .sep { color: var(--border); margin: 0 6px; }
.product-view-area .mti-pg-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 6px; }
.product-view-area #product-model-number { font-size: 56px; font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: var(--fg); margin: 0 0 8px; }
.product-view-area .mti-pg-subtitle { font-size: 15px; color: var(--muted-fg); margin: 0 0 20px; }
.product-view-area .mti-pg-price { display: flex; align-items: center; gap: 14px; border-block: 1px solid var(--border); padding-block: 14px; margin-bottom: 20px; }
.product-view-area .mti-pg-price .cap { font-size: 13px; color: var(--muted-fg); }
.product-view-area .mti-pg-price .mti-cta { margin: 0; }
.product-view-area .mti-pg-price .mti-cta-pill { font-size: 15px; font-weight: 600; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; }
.product-view-area .mti-pg-price .mti-cta-pill .dim { color: var(--border); }
.product-view-area .mti-pg-price .full-price { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.product-view-area .mti-pg-label { font-size: 12.5px; color: var(--fg); margin: 16px 0 8px; }
.product-view-area .mti-pg-label b { font-weight: 600; }
.product-view-area .mti-pg-swatches .colors-list { display: flex; gap: 10px; margin: 0; }
.product-view-area .mti-pg-swatches .colors-list > div {
	width: 26px; height: 26px; border-radius: 9999px; border: 1px solid var(--border);
	cursor: pointer; background-size: cover; background-position: center;
}
.product-view-area .mti-pg-swatches .colors-list > div.on { outline: 2px solid var(--fg); outline-offset: 2px; }
.product-view-area .mti-pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.product-view-area .mti-pg-chips .chip {
	border: 1px solid var(--fg); border-radius: 4px; padding: 9px 16px;
	font-size: 13px; color: var(--fg); background: #fff; cursor: default;
	min-height: 40px; display: inline-flex; align-items: center;
}
.product-view-area .mti-pg-chips .chip.on { background: var(--fg); color: #fff; }
.product-view-area .mti-pg-dims {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--border); border-radius: 4px; margin: 22px 0;
}
.product-view-area .mti-pg-dims .cell { padding: 12px 14px; border-right: 1px solid var(--border); min-width: 0; }
.product-view-area .mti-pg-dims .cell:last-child { border-right: 0; }
.product-view-area .mti-pg-dims .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 4px; }
.product-view-area .mti-pg-dims .v { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.product-view-area .mti-pg-buttons { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.product-view-area .mti-pg-buttons a {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 22px; font-size: 14px; font-weight: 500;
	border-radius: 4px; text-decoration: none !important; flex: 1 1 200px;
}
.product-view-area .mti-pg-buttons a.pg-primary { background: var(--fg); color: #fff; }
.product-view-area .mti-pg-buttons a.pg-outline { border: 1px solid var(--fg); color: var(--fg) !important; background: #fff; }
.product-view-area .mti-pg-buttons a.pg-outline:hover { background: var(--fg); color: #fff !important; }
.product-view-area .mti-pg-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 4px; }
.product-view-area .mti-pg-links a,
.product-view-area .mti-pg-links button {
	font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
	color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer;
	font-family: inherit;
}
.product-view-area .mti-pg-links a:hover { color: var(--accent); }

/* Below-fold sections */
.product-view-area .mti-pg-sections { border-top: 1px solid var(--border); }
.product-view-area .mti-pg-sec { padding-block: 44px; border-bottom: 1px solid var(--border); }
.product-view-area .mti-pg-sec:last-child { border-bottom: 0; }
.product-view-area .mti-pg-sec > h2 { font-size: 26px; font-weight: 300; margin: 0 0 22px; color: var(--fg); }
.product-view-area .mti-pg-sec .sec-link { float: right; font-size: 12.5px; font-weight: 600; margin-top: 10px; }
.product-view-area .mti-pg-about { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; }
.product-view-area .mti-pg-about .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 12px; }
.product-view-area .mti-pg-about .headline { font-size: 30px; font-weight: 300; line-height: 1.25; margin: 0 0 18px; color: var(--fg); }
.product-view-area .mti-pg-about .body { font-size: 15px; line-height: 1.65; color: var(--muted-fg); max-width: 56ch; }
.product-view-area .mti-pg-about .body p { margin: 0 0 1em; }
.product-view-area .mti-pg-about .links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.product-view-area .mti-pg-about .links a { font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.product-view-area .mti-pg-spec h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--fg); }
.product-view-area .mti-pg-spec table { width: 100%; border-collapse: collapse; font-size: 14px; }
.product-view-area .mti-pg-spec td { padding: 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.product-view-area .mti-pg-spec td:first-child { color: var(--muted-fg); width: 42%; padding-right: 16px; }
.product-view-area .mti-pg-spec td:last-child { text-align: right; font-weight: 600; color: var(--fg); }
.product-view-area .mti-pg-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 8px; }
/* Options & accessories: clean two-column list (D3 — no empty image cards). */
.product-view-area .mti-pg-optlist {
	list-style: none; margin: 8px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 32px; border-top: 1px solid var(--border); padding-top: 4px;
}
.product-view-area .mti-pg-optlist li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--fg);
}
.product-view-area .mti-pg-optlist li .nm { font-weight: 500; }
.product-view-area .mti-pg-optlist li .det { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--fg); background: #fff; }
@media (max-width: 640px) {
	.product-view-area .mti-pg-optlist { grid-template-columns: 1fr; }
}
/* Leftovers: legacy blocks the new layout already covers are pruned in JS
   (dealer buttons, stray "Material Colors:" label, old crumbs, awards).
   Exterior-colour swatches are unique — keep, as a hairline card. */
.product-view-area .mti-pg-leftovers .product-colors-area {
	border: 1px solid var(--border); border-radius: 4px;
	padding: 14px 18px; margin-top: 12px; font-size: 15px;
}
.product-view-area .mti-pg-leftovers .product-colors-area .external .type-title {
	font-size: 15px; color: var(--fg); margin-bottom: 10px;
}
.product-view-area .mti-pg-leftovers .product-colors-area .external .colors-list {
	display: flex; flex-wrap: wrap; gap: 10px;
}
.product-view-area .mti-pg-leftovers .product-colors-area .external .colors-list > div {
	width: 26px; height: 26px; border-radius: 9999px;
	border: 1px solid var(--border); cursor: pointer;
}
.product-view-area .mti-pg-leftovers .product-colors-area .more a {
	font-size: 13px; color: var(--fg);
}
/* If nothing unique remains, the block collapses entirely. */
.product-view-area .mti-pg-leftovers:empty { display: none; }
/* JS-only controls swapped from dead anchors to buttons keep link styling. */
.product-view-area button.js-link-btn {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: inherit; font: inherit; text-decoration: underline;
	text-underline-offset: 3px;
}
.product-view-area .mti-pg-leftovers .product-colors-area .more {
	display: none !important; /* duplicate trigger; the type-title button + our resource button cover it */
}
.product-view-area .mti-pg-card { min-width: 0; }
.product-view-area .mti-pg-card .thumb {
	aspect-ratio: 4 / 3; background: #eceff1; border-radius: 4px; overflow: hidden;
	display: block; margin-bottom: 10px;
}
.product-view-area .mti-pg-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-view-area .mti-pg-card .nm { font-size: 13px; color: var(--fg); }
.product-view-area .mti-pg-card .nm a { color: var(--fg); }

/* Stash: nodes kept for parity but not part of the new layout. */
.product-view-area .mti-pg-stash { display: none; }
/* Sections span the full width of the two-column grid. */
.product-view-area .mti-pg-sections { grid-column: 1 / -1; }
/* Leftovers: everything the imported page carried that the new layout does
   not have a dedicated slot for — kept visible, quiet styling. */
.product-view-area .mti-pg-leftovers {
	padding-block: 26px; font-size: 13px; color: var(--muted-fg);
}
.product-view-area .mti-pg-leftovers h2,
.product-view-area .mti-pg-leftovers .type-title { font-size: 14px; margin: 0 0 6px; }
.product-view-area .mti-pg-leftovers p { margin: 0 0 8px; }
.product-view-area .mti-pg-leftovers a { font-size: 13px; }
.product-view-area .mti-pg-leftovers .locate-dealer-area a { display: inline-block; margin-right: 12px; }

/* Mobile: single column; gallery first, then details; sections become
   accordions (first open). */
@media (max-width: 1023px) {
	/* Tight mobile stack: kill the legacy 48/40px paddings, 8px grid. */
	.product-view-area { padding-top: 8px; }
	.product-view-area .product-column-two { margin-top: 0; }
	.product-view-area .mti-pg-top { grid-template-columns: 1fr; gap: 20px; padding-block: 8px 20px; }
	.product-view-area .mti-pg-gallery { grid-template-columns: 1fr; }
	.product-view-area .mti-pg-thumbs { flex-direction: row; max-height: none; overflow-x: auto; order: 2; }
	/* Single horizontal scroll row, not a wrapping grid. */
	.product-view-area .mti-pg-thumbs .thumb-list { display: flex; flex-wrap: nowrap; gap: 8px; }
	.product-view-area .mti-pg-thumbs .thumb-btn { width: 72px; flex: 0 0 72px; }
	.product-view-area #product-model-number { font-size: 38px; }
	.product-view-area .mti-pg-about { grid-template-columns: 1fr; gap: 26px; }
	.product-view-area .mti-pg-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.product-view-area .mti-pg-sec > h2,
	.product-view-area .mti-pg-acc > summary { font-size: 22px; }
	/* Mobile: sections are <details> accordions (first open, tap to toggle). */
	.product-view-area .mti-pg-acc { padding-block: 0; border-bottom: 0; }
	.product-view-area .mti-pg-acc > summary {
		list-style: none; cursor: pointer; font-size: 20px; font-weight: 300;
		padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--fg);
	}
	.product-view-area .mti-pg-acc > summary::-webkit-details-marker { display: none; }
	.product-view-area .mti-pg-acc > summary::after { content: "+"; float: right; font-weight: 300; }
	.product-view-area .mti-pg-acc[open] > summary::after { content: "–"; }
	.product-view-area .mti-pg-acc .acc-body { padding-block: 18px; }
}
@media (min-width: 1024px) {
	/* Desktop: the details are not interactive — header reads as an h2 and
	   the body stays visible even without the open attribute. */
	.product-view-area .mti-pg-acc > summary {
		list-style: none; pointer-events: none; font-size: 26px; font-weight: 300;
		margin: 0 0 22px; padding: 0; border: 0;
	}
	.product-view-area .mti-pg-acc > summary::-webkit-details-marker { display: none; }
	.product-view-area .mti-pg-acc > summary::after { content: none; }
	.product-view-area .mti-pg-acc:not([open]) .acc-body { display: block; }
}

/* Skip link — hidden until focused (WS23 accessibility) */
.mti-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--primary, #0f2a44); color: #fff; padding: 10px 18px; font-size: 14px; text-decoration: none; }
.mti-skip:focus { left: 12px; top: 12px; }

/* WS23: orphan menu <li> rows get wrapped in this list — keep inherited look. */
.mti-orphan-list { list-style: none; margin: 0; padding: 0; }

/* WS23 stretched-image fixes: imported width/height attrs don't match the
   natural ratio on these pages — let height follow the image. */
.mti-content img[src*="insta-phone"],
.mti-content img[src*="Configurator_"] { height: auto; }

/* WS25-PR1: collection groups on type landings (all-products view) */
.mti-catalogue-ready .coll-group { margin-bottom: 36px; }
.mti-catalogue-ready .coll-group-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mti-catalogue-ready .coll-group-title { font-size: 22px; font-weight: 300; color: var(--primary); margin: 0; }
.mti-catalogue-ready .coll-group-count { font-size: 13px; color: var(--muted); }
.mti-catalogue-ready .coll-group-link { margin-left: auto; font-size: 13px; color: var(--accent); }

/* WS25-PR2/3: consistent red-caps discontinued tag */
.mti-disc-word, .product-view-area .mti-disc-tag, .search-result-item .mti-disc-tag {
	color: #b42318; font-size: 12.5px; letter-spacing: .08em;
	text-transform: uppercase; font-weight: 600; font-family: inherit;
	background: none; border-radius: 0; padding: 0; margin-left: 6px;
}
.mti-pg-discnote { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* WS25-PR4: awards row inside About */
.mti-pg-awards { margin-top: 18px; }
.mti-pg-awards .aw-cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mti-pg-awards .product-awards { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mti-pg-awards .product-awards img { max-height: 44px; width: auto; }

/* WS25-PR5: colour viewer */
button.mti-cv-open { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; cursor: pointer; }
.mti-cv-modal { position: fixed; inset: 0; z-index: 400; }
.mti-cv-modal .cv-back { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.mti-cv-modal .cv-dialog { position: relative; margin: 6vh auto; width: min(760px, 92vw); background: #fff; border-radius: 10px; padding: 22px; }
.mti-cv-modal .cv-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; min-width: 40px; min-height: 40px; }
.mti-cv-modal .cv-stage { text-align: center; }
.mti-cv-modal .cv-tint { position: relative; display: inline-block; overflow: hidden; font-size: 0; line-height: 0; }
.mti-cv-modal .cv-tint img { display: block; width: 100%; height: auto; transform: scale(1.01); }
.mti-cv-modal .cv-name { margin: 12px 0 8px; font-size: 15px; }
.mti-cv-modal .cv-name span { color: var(--muted); margin-left: 8px; font-size: 12.5px; }
.mti-cv-modal .cv-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mti-cv-modal .cv-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; }
.mti-cv-modal .cv-sw.on { border-color: var(--primary); box-shadow: 0 0 0 2px #fff inset; }

/* WS25-M3: intro paragraph under standard banner */
.mti-materials .mti-mat-intro { max-width: 46ch; margin: 0 auto 8px; text-align: center; color: var(--muted-fg); }

/* WS25-M1: new Mineral Composite swatches */
.mti-materials .sw-sand { background: #DACFB9; }
.mti-materials .sw-charcoal { background: #555354; }
.mti-materials .sw-olive { background: #6C7C59; }
.mti-materials .sw-oyster { background: #D7D5CB; }
.mti-materials .mti-mat-specs dd em { font-style: normal; color: var(--muted-fg); font-size: .82em; }

/* WS25-M3: materials page header aligned to the section-hero template */
.mti-materials .mti-mat-head { border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.mti-materials h1 { font-weight: 300; font-size: clamp(36px, 5.8vw, 84px); line-height: 1.02; }