/**
 * First Mate XT - shared content pages.
 *
 * One stylesheet for every informational page (powered vs manual, competitor
 * comparison, live sonar technique, sonar brand guide, videos and gallery).
 * The Bricks trees for those pages carry only semantic classes, so the look is
 * changed here in one place rather than in per-element settings on each page.
 *
 * Everything below leans on the --xt-* variables already defined globally.
 */

/* --- Page shell ----------------------------------------------------------- */

.xt-page {
	font-family: Barlow, sans-serif;
	color: var(--xt-text);
}

.xt-sec {
	padding-block: var(--xt-sp-3xl);
	padding-inline: var(--xt-sp-md);
}

.xt-sec--tight { padding-block: var(--xt-sp-2xl); }

.xt-sec--alt { background: var(--xt-surface-2); }

.xt-sec--deep {
	background: var(--xt-deep);
	color: var(--xt-deep-text);
}

.xt-sec--deep .xt-h2,
.xt-sec--deep .xt-h3 { color: var(--xt-deep-text); }

.xt-sec--deep .xt-prose,
.xt-sec--deep .xt-lead { color: var(--xt-deep-muted); }

.xt-sec--deep .xt-eyebrow { color: var(--xt-deep-muted); }

.xt-sec--deep .xt-eyebrow::before { background: var(--xt-red); }

.xt-wrap {
	width: 100%;
	max-width: var(--xt-page-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-lg);
}

.xt-wrap--narrow { max-width: 760px; }

/* --- Type ----------------------------------------------------------------- */

.xt-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--xt-sp-xs);
	margin: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	font-weight: 700;
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
}

.xt-eyebrow::before {
	content: '';
	width: 28px;
	height: var(--xt-bw);
	background: var(--xt-red);
	flex: none;
}

.xt-h1,
.xt-h2,
.xt-h3 {
	font-family: Anton, sans-serif;
	font-weight: 400;
	line-height: var(--xt-lh-tight);
	text-transform: uppercase;
	color: var(--xt-text);
	margin: 0;
}

.xt-h1 { font-size: var(--xt-fs-4xl); }
.xt-h2 { font-size: var(--xt-fs-3xl); }
.xt-h3 { font-size: var(--xt-fs-xl); }

.xt-lead {
	margin: 0;
	font-size: var(--xt-fs-lg);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
	max-width: 68ch;
}

.xt-prose {
	margin: 0;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-text);
	max-width: 72ch;
}

.xt-prose strong { font-weight: 700; }

.xt-note {
	margin: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	letter-spacing: 0.04em;
	color: var(--xt-muted);
}

/* --- Grids ---------------------------------------------------------------- */

.xt-grid {
	display: grid;
	gap: var(--xt-sp-lg);
	align-items: stretch;
}

.xt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.xt-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--xt-sp-2xl);
	align-items: center;
}

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

.xt-card {
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-sm);
	padding: var(--xt-sp-xl);
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-md);
}

.xt-card--flat { background: transparent; border-color: transparent; padding: 0; }

.xt-card__num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	font-weight: 700;
	letter-spacing: var(--xt-ls-wide);
	color: var(--xt-red);
}

.xt-card .xt-h3 { font-size: var(--xt-fs-md); }

.xt-card__body {
	margin: 0;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
}

/* --- Callouts ------------------------------------------------------------- */

.xt-callout {
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-xs);
	padding: var(--xt-sp-lg);
	background: var(--xt-surface);
	border-left: var(--xt-bw-thick) solid var(--xt-red);
	border-radius: var(--xt-r-sm);
	box-shadow: 0 1px 2px var(--xt-shadow-soft);
}

.xt-callout__title {
	margin: 0;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-md);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.xt-callout__body {
	margin: 0;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
}

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

.xt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--xt-h-control);
	padding-inline: var(--xt-sp-lg);
	background: var(--xt-red);
	color: #ffffff;
	border: 0;
	border-bottom: var(--xt-bw-thick) solid var(--xt-red-dark);
	border-radius: var(--xt-r-sm);
	font-family: Anton, sans-serif;
	font-size: var(--xt-fs-base);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.xt-btn:hover { background: var(--xt-red-dark); color: #ffffff; }

.xt-btn--ghost {
	background: transparent;
	color: var(--xt-text);
	border: var(--xt-bw) solid var(--xt-line);
	border-bottom-width: var(--xt-bw);
}

.xt-btn--ghost:hover {
	background: transparent;
	color: var(--xt-red);
	border-color: var(--xt-red);
}

.xt-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xt-sp-sm);
}

/* --- Comparison table ----------------------------------------------------- */

/* Wide tables must scroll inside their own box; the page body never scrolls
   sideways on a phone. */
.xt-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-md);
	background: var(--xt-surface);
	-webkit-overflow-scrolling: touch;
}

.xt-cmp {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--xt-fs-base);
}

.xt-cmp th,
.xt-cmp td {
	padding: var(--xt-sp-md);
	text-align: left;
	border-bottom: 1px solid var(--xt-line);
	vertical-align: top;
}

.xt-cmp thead th {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	font-weight: 700;
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
	background: var(--xt-surface-2);
	white-space: nowrap;
}

.xt-cmp thead th.xt-cmp__ours {
	color: #ffffff;
	background: var(--xt-red);
}

.xt-cmp tbody th {
	font-family: Barlow, sans-serif;
	font-weight: 700;
	color: var(--xt-text);
	white-space: nowrap;
}

.xt-cmp td.xt-cmp__ours {
	font-weight: 700;
	background: rgba(200, 16, 46, .05);
	border-left: var(--xt-bw) solid var(--xt-red);
	border-right: var(--xt-bw) solid var(--xt-red);
}

.xt-cmp tbody tr:last-child td,
.xt-cmp tbody tr:last-child th { border-bottom: 0; }

.xt-cmp tbody tr:last-child td.xt-cmp__ours { border-bottom: var(--xt-bw) solid var(--xt-red); }

.xt-cmp__na { color: var(--xt-muted); font-style: italic; }

/* --- Spec / stat strip ---------------------------------------------------- */

.xt-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--xt-sp-lg);
	padding-block: var(--xt-sp-lg);
	border-block: var(--xt-bw) solid var(--xt-line);
}

.xt-stat { display: flex; flex-direction: column; gap: var(--xt-sp-xxs); }

.xt-stat__value {
	font-family: Anton, sans-serif;
	font-size: var(--xt-fs-2xl);
	line-height: 1;
	text-transform: uppercase;
}

.xt-stat__label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
}

/* --- Steps ---------------------------------------------------------------- */

.xt-steps {
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: xtstep;
}

.xt-step {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--xt-sp-md);
	align-items: start;
}

.xt-step::before {
	counter-increment: xtstep;
	content: counter(xtstep, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--xt-deep);
	color: var(--xt-deep-text);
	border-radius: var(--xt-r-sm);
	font-family: Anton, sans-serif;
	font-size: var(--xt-fs-md);
}

/* --- FAQ ------------------------------------------------------------------ */

.xt-faq { display: flex; flex-direction: column; gap: 0; }

.xt-faq__item {
	padding-block: var(--xt-sp-lg);
	border-bottom: 1px solid var(--xt-line);
}

.xt-faq__item:first-child { border-top: 1px solid var(--xt-line); }

.xt-faq__q {
	margin: 0 0 var(--xt-sp-xs);
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-md);
	text-transform: uppercase;
}

.xt-faq__a {
	margin: 0;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
	max-width: 72ch;
}

/* --- Video ---------------------------------------------------------------- */

.xt-video {
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-sm);
}

.xt-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--xt-deep);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-md);
	overflow: hidden;
}

.xt-video__frame iframe,
.xt-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Placeholder shown until a real embed is dropped in. */
.xt-video__frame--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--xt-sp-lg);
	text-align: center;
	color: var(--xt-deep-muted);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
}

.xt-video__title {
	margin: 0;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-md);
	text-transform: uppercase;
}

.xt-video__desc {
	margin: 0;
	font-size: var(--xt-fs-sm);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
}

/* --- Gallery -------------------------------------------------------------- */

.xt-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--xt-sp-md);
}

.xt-gallery figure,
.xt-gallery .xt-gallery__item {
	margin: 0;
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-md);
	overflow: hidden;
	background: var(--xt-surface);
}

.xt-gallery img {
	display: block;
	width: 100%;
	height: var(--xt-h-photo);
	object-fit: cover;
}

/* Bricks' own gallery element markup, kept in the same frame. */
.xt-gallery .bricks-layout-item { border-radius: var(--xt-r-md); overflow: hidden; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.xt-split { grid-template-columns: minmax(0, 1fr); gap: var(--xt-sp-lg); }
	.xt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xt-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xt-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.xt-grid--2,
	.xt-grid--3,
	.xt-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.xt-gallery { grid-template-columns: minmax(0, 1fr); }
	.xt-btn { width: 100%; }
	.xt-step { grid-template-columns: 40px minmax(0, 1fr); }
	.xt-step::before { width: 40px; height: 40px; font-size: var(--xt-fs-base); }
}

@media (prefers-reduced-motion: reduce) {
	.xt-btn { transition: none; }
}


/* --- Product cards --------------------------------------------------------- */
/* Used by the [fmf_product_cards] shortcode on the pole product page. */

.xt-prod {
	display: flex;
	flex-direction: column;
	gap: var(--xt-sp-sm);
	padding: var(--xt-sp-lg);
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-md);
}

.xt-prod__media {
	display: block;
	border-radius: var(--xt-r-sm);
	overflow: hidden;
	background: var(--xt-surface-2);
}

.xt-prod__media img {
	display: block;
	width: 100%;
	height: var(--xt-h-photo);
	object-fit: cover;
}

.xt-prod__title {
	margin: 0;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-md);
	line-height: 1.1;
	text-transform: uppercase;
}

.xt-prod__title a { color: var(--xt-text); text-decoration: none; }
.xt-prod__title a:hover { color: var(--xt-red); }

.xt-prod__desc {
	margin: 0;
	flex: 1 1 auto;
	font-size: var(--xt-fs-sm);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
}

.xt-prod__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--xt-sp-sm);
	margin-top: auto;
	padding-top: var(--xt-sp-xs);
}

.xt-prod__price {
	font-family: Anton, sans-serif;
	font-size: var(--xt-fs-xl);
	line-height: 1;
	color: var(--xt-text);
}

.xt-prod__price del { opacity: .45; font-size: var(--xt-fs-base); }
.xt-prod__price ins { text-decoration: none; }

/* WooCommerce renders its own loop button here, so style that markup directly. */
.xt-prod a.button,
.xt-prod button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding-inline: var(--xt-sp-md);
	background: var(--xt-red) !important;
	color: #ffffff !important;
	border: 0;
	border-bottom: 4px solid var(--xt-red-dark);
	border-radius: var(--xt-r-sm);
	font-family: Anton, sans-serif;
	font-size: var(--xt-fs-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.xt-prod a.button:hover,
.xt-prod button.button:hover { background: var(--xt-red-dark) !important; }

.xt-prod a.added_to_cart {
	flex: 0 0 100%;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-red);
}

.xt-prod .loading { opacity: .6; }

/* --- WooCommerce product tabs ---------------------------------------------- */
/* Rendered by the Bricks product-tabs element in the gallery column. WooCommerce
   ships its own rounded-tab styling with decorative pseudo elements, so most of
   what follows is switching that off before restyling. */

.xt-tabs { width: 100%; margin-top: var(--xt-sp-xl); }

.xt-tabs .woocommerce-tabs { margin: 0; padding: 0; }

.xt-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xt-sp-lg);
	margin: 0 0 var(--xt-sp-lg);
	padding: 0;
	list-style: none;
	border-bottom: var(--xt-bw) solid var(--xt-line);
}

.xt-tabs ul.tabs.wc-tabs::before,
.xt-tabs ul.tabs.wc-tabs::after { content: none; display: none; }

.xt-tabs ul.tabs.wc-tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.xt-tabs ul.tabs.wc-tabs li::before,
.xt-tabs ul.tabs.wc-tabs li::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.xt-tabs ul.tabs.wc-tabs li a {
	display: block;
	padding: 0 0 var(--xt-sp-sm);
	margin-bottom: calc(var(--xt-bw) * -1);
	border-bottom: var(--xt-bw) solid transparent;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	font-weight: 700;
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
	text-decoration: none;
	white-space: nowrap;
}

.xt-tabs ul.tabs.wc-tabs li a:hover { color: var(--xt-text); }
.xt-tabs ul.tabs.wc-tabs li.active a,
.xt-tabs ul.tabs.wc-tabs li[aria-selected="true"] a {
	color: var(--xt-text);
	border-bottom-color: var(--xt-red);
}

/* Panels */
.xt-tabs .panel { margin: 0; padding: 0; }

.xt-tabs .panel h2,
.xt-tabs .panel h3 {
	margin: var(--xt-sp-lg) 0 var(--xt-sp-sm);
	font-family: Anton, sans-serif;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--xt-text);
}

.xt-tabs .panel > h2:first-child,
.xt-tabs .panel > h3:first-child { margin-top: 0; }

.xt-tabs .panel h2 { font-size: var(--xt-fs-xl); }
.xt-tabs .panel h3 { font-size: var(--xt-fs-md); }

.xt-tabs .panel p {
	margin: 0 0 var(--xt-sp-md);
	font-family: Barlow, sans-serif;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-text);
}

.xt-tabs .panel ul,
.xt-tabs .panel ol { margin: 0 0 var(--xt-sp-md); padding-left: 1.25em; }
.xt-tabs .panel li {
	margin-bottom: var(--xt-sp-xs);
	font-family: Barlow, sans-serif;
	font-size: var(--xt-fs-base);
	line-height: var(--xt-lh-body);
	color: var(--xt-muted);
}

.xt-tabs .panel b,
.xt-tabs .panel strong { font-weight: 700; color: var(--xt-text); }

/* Additional information table */
.xt-tabs .shop_attributes { width: 100%; border-collapse: collapse; }
.xt-tabs .shop_attributes th,
.xt-tabs .shop_attributes td {
	padding: var(--xt-sp-sm) 0;
	text-align: left;
	border-bottom: 1px solid var(--xt-line);
	font-size: var(--xt-fs-base);
}
.xt-tabs .shop_attributes th {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: var(--xt-fs-xs);
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
	white-space: nowrap;
	padding-right: var(--xt-sp-md);
}
.xt-tabs .shop_attributes td p { margin: 0; }

@media (max-width: 600px) {
	.xt-tabs ul.tabs.wc-tabs { gap: var(--xt-sp-md); }
	.xt-tabs ul.tabs.wc-tabs li a { font-size: 11px; }
}

/* --- Product tab panel height ---------------------------------------------- */
/* The description and reviews panels are far taller than the buy box beside them,
   which left the gallery column running a long way past it. No script measures
   anything here: the row is stretched so both columns take the taller one's height,
   and the tab panel is given flex-basis 0 with min-height 0 so it contributes
   nothing to that height and then grows into whatever the buy box leaves over.
   overscroll-behavior stays auto, so reaching the end of the panel carries on
   scrolling the page rather than trapping the reader inside it. */

@media (min-width: 992px) {
	#brxe-phr { align-items: stretch; }
	#brxe-pgal { min-height: 0; }

	.xt-tabs {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.xt-tabs .woocommerce-tabs {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.xt-tabs .panel {
		flex: 1 1 auto;
		min-height: 320px;
		overflow-y: auto;
		overscroll-behavior-y: auto;
		padding-right: var(--xt-sp-md);
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: var(--xt-line) transparent;
	}

	.xt-tabs .panel::-webkit-scrollbar { width: 8px; }
	.xt-tabs .panel::-webkit-scrollbar-track { background: transparent; }
	.xt-tabs .panel::-webkit-scrollbar-thumb { background: var(--xt-line); border-radius: 999px; }
	.xt-tabs .panel::-webkit-scrollbar-thumb:hover { background: var(--xt-muted); }
}

/* --- Product hero column split --------------------------------------------- */
/* Both columns carry width:100% from the xt-col global class and simply shrink to
   an even split. The buy box does not need half the page once its chips run full
   width, so give the gallery and tabs the larger share. */

@media (min-width: 992px) {
	#brxe-pgal { flex: 1 1 60%; }
	#brxe-pcopy { flex: 1 1 40%; }
}

/* --- Product hero title ----------------------------------------------------- */
/* The buy box is 40% of the row now, so the 4xl hero size the xt-title-hero class
   applies broke this title over four lines. Stepped down here only; the other page
   heroes share that class and have the full width to carry it. */

#brxe-ph1 { font-size: var(--xt-fs-3xl); }


/* ==========================================================================
   Customer installs — form ([fmf_install_form]) and gallery ([fmf_installs])
   ========================================================================== */

.xt-inst-form { display: flex; flex-direction: column; gap: var(--xt-sp-2xl); }
.xt-inst-fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--xt-sp-md); }
.xt-inst-fs legend { padding: 0; margin-bottom: var(--xt-sp-sm); color: var(--xt-red); }
.xt-inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xt-sp-md) var(--xt-sp-lg); }
.xt-inst-field { display: flex; flex-direction: column; gap: var(--xt-sp-xxs); min-width: 0; }
.xt-inst-field--wide { grid-column: 1 / -1; }
.xt-inst-field label { font-weight: 700; font-size: var(--xt-fs-sm); color: var(--xt-text); }
.xt-inst-field label span { font-weight: 400; color: var(--xt-muted); }
.xt-inst-form input[type="text"],
.xt-inst-form input[type="email"],
.xt-inst-form select,
.xt-inst-form textarea {
	width: 100%;
	min-height: var(--xt-h-control);
	padding: var(--xt-sp-xs) var(--xt-sp-sm);
	font: inherit;
	font-size: var(--xt-fs-base);
	color: var(--xt-text);
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
}
.xt-inst-form textarea { min-height: 0; line-height: var(--xt-lh-body); }
.xt-inst-form input:focus-visible, .xt-inst-form select:focus-visible, .xt-inst-form textarea:focus-visible { outline: 2px solid var(--xt-red); outline-offset: 1px; }
.xt-inst-form :user-invalid { border-color: var(--xt-red); }
.xt-inst-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xt-inst-drop { display: flex; flex-direction: column; align-items: center; gap: var(--xt-sp-xs); padding: var(--xt-sp-2xl) var(--xt-sp-lg); text-align: center; background: var(--xt-surface-2); border: var(--xt-bw-thick) dashed var(--xt-line); border-radius: var(--xt-r-md); cursor: pointer; }
.xt-inst-drop:hover, .xt-inst-drop:focus-within { border-color: var(--xt-red); }
.xt-inst-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xt-inst-drop__title { font-family: Anton, sans-serif; font-size: var(--xt-fs-xl); text-transform: uppercase; letter-spacing: 0.01em; }
.xt-inst-drop__hint { max-width: 40ch; color: var(--xt-muted); font-size: var(--xt-fs-sm); line-height: var(--xt-lh-body); }
.xt-inst-drop__list { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--xt-fs-xs); color: var(--xt-red); }
.xt-inst-consent { display: flex; gap: var(--xt-sp-sm); align-items: flex-start; font-size: var(--xt-fs-sm); line-height: var(--xt-lh-body); color: var(--xt-muted); }
.xt-inst-consent input { margin-top: 0.3em; flex: none; accent-color: var(--xt-red); }
.xt-inst-error { margin: 0 0 var(--xt-sp-lg); padding: var(--xt-sp-sm) var(--xt-sp-md); border-left: var(--xt-bw-thick) solid var(--xt-red); background: var(--xt-surface-2); font-weight: 600; }
.xt-inst-thanks { display: flex; flex-direction: column; gap: var(--xt-sp-md); }
.xt-inst-form .xt-btn-row { align-items: center; }
.xt-inst-form .xt-btn[disabled] { opacity: .6; cursor: progress; }

/* Gallery */
.xt-inst { display: flex; flex-direction: column; gap: var(--xt-sp-lg); }
.xt-inst-filters { display: flex; flex-wrap: wrap; gap: var(--xt-sp-md); align-items: flex-end; }
.xt-inst-filter { display: flex; flex-direction: column; gap: var(--xt-sp-xxs); font-size: var(--xt-fs-xs); font-weight: 700; letter-spacing: var(--xt-ls-wide); text-transform: uppercase; color: var(--xt-muted); }
.xt-inst-filter select { min-width: 12rem; height: var(--xt-h-control); padding-inline: var(--xt-sp-sm); font: inherit; font-size: var(--xt-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--xt-text); background: var(--xt-surface); border: var(--xt-bw) solid var(--xt-line); border-radius: var(--xt-r-sm); }
.xt-inst-filters .xt-note { margin-left: auto; align-self: center; }
.xt-inst-grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xt-sp-md); }
.xt-inst-card { display: flex; flex-direction: column; background: var(--xt-surface); border: var(--xt-bw) solid var(--xt-line); border-radius: var(--xt-r-md); overflow: hidden; }
.xt-inst-card__media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--xt-surface-2); cursor: zoom-in; }
.xt-inst-card__media img { display: block; width: 100%; height: var(--xt-h-photo); object-fit: cover; }
.xt-inst-card__count { position: absolute; right: var(--xt-sp-sm); bottom: var(--xt-sp-sm); padding: 2px var(--xt-sp-xs); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--xt-fs-xs); color: #fff; background: rgba(0,0,0,.65); border-radius: var(--xt-r-sm); }
.xt-inst-card__body { display: flex; flex-direction: column; gap: var(--xt-sp-xs); padding: var(--xt-sp-md); }
.xt-inst-specs { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--xt-sp-sm); margin: 0; font-size: var(--xt-fs-sm); }
.xt-inst-specs > div { display: contents; }
.xt-inst-specs dt { color: var(--xt-muted); }
.xt-inst-specs dd { margin: 0; font-weight: 600; }
.xt-inst-none { color: var(--xt-muted); }
.xt-inst-empty { display: flex; flex-direction: column; gap: var(--xt-sp-md); }

/* Lightbox */
.xt-inst-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--xt-sp-md); background: rgba(10,12,16,.92); }
.xt-inst-modal__box { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--xt-sp-md); width: min(1200px, 100%); max-height: 100%; padding: var(--xt-sp-lg); color: var(--xt-deep-text); background: var(--xt-deep); border-radius: var(--xt-r-md); }
.xt-inst-modal__stage { position: relative; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.xt-inst-modal__stage img { max-width: 100%; max-height: min(70vh, 720px); object-fit: contain; border-radius: var(--xt-r-sm); }
.xt-inst-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 28px; line-height: 1; color: #fff; background: rgba(0,0,0,.55); cursor: pointer; }
.xt-inst-modal__nav[data-prev] { left: var(--xt-sp-xs); }
.xt-inst-modal__nav[data-next] { right: var(--xt-sp-xs); }
.xt-inst-modal__thumbs { grid-row: 2; grid-column: 1; display: flex; gap: var(--xt-sp-xs); overflow-x: auto; }
.xt-inst-modal__thumbs button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--xt-r-sm); background: none; cursor: pointer; overflow: hidden; }
.xt-inst-modal__thumbs button.is-on { border-color: var(--xt-red); }
.xt-inst-modal__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xt-inst-modal__info { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; gap: var(--xt-sp-sm); overflow-y: auto; }
.xt-inst-modal__info .xt-h3 { color: var(--xt-deep-text); }
.xt-inst-modal__info .xt-inst-specs dt { color: var(--xt-deep-muted); }
.xt-inst-modal__info .xt-prose { color: var(--xt-deep-text); white-space: pre-line; }
.xt-inst-modal__info .xt-note { color: var(--xt-deep-muted); }
.xt-inst-modal__close { position: absolute; top: var(--xt-sp-xs); right: var(--xt-sp-xs); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 26px; line-height: 1; color: #fff; background: rgba(0,0,0,.55); cursor: pointer; }

@media (max-width: 900px) {
	.xt-inst-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xt-inst-modal__box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; overflow-y: auto; }
	.xt-inst-modal__info { grid-row: 3; grid-column: 1; overflow: visible; }
	.xt-inst-modal__thumbs { grid-row: 2; }
}
@media (max-width: 600px) {
	.xt-inst-grid { grid-template-columns: minmax(0, 1fr); }
	.xt-inst-grid-cards { grid-template-columns: minmax(0, 1fr); }
	.xt-inst-filter select { min-width: 0; width: 100%; }
	.xt-inst-filter { flex: 1 1 100%; }
	.xt-inst-filters .xt-note { margin-left: 0; }
	.xt-inst-modal { padding: var(--xt-sp-xs); }
	.xt-inst-modal__box { padding: var(--xt-sp-md); padding-top: var(--xt-sp-2xl); }
}

/* hidden attribute must win over the display rules above */
.xt-inst-modal[hidden], .xt-inst-card[hidden], .xt-inst-modal__thumbs[hidden], .xt-inst-none[hidden] { display: none !important; }

/* Bricks form on /share-your-install/: hide the honeypot field, space the section headings */
.brxe-form .form-group:has([name="form-field-website"]) { display: none !important; }
.brxe-form .form-group:has(> .xt-eyebrow) { margin-top: var(--xt-sp-lg); }
.brxe-form .form-group:has(> .xt-note) { margin-top: calc(-1 * var(--xt-sp-xs)); }

/* Required-field asterisks in red */
.brxe-form label.required::after { color: var(--xt-red) !important; font-weight: 700; margin-left: 0.15em; }

/* Native Bricks customer-installs page: gallery element shows only its first image, the rest live in the lightbox */
.xt-inst-card__media { position: relative; }
.xt-inst-card .brxe-image-gallery .bricks-layout-wrapper { gap: 0; grid-template-columns: minmax(0, 1fr); }
.xt-inst-card .brxe-image-gallery .bricks-layout-item:not(:first-child) { display: none; }
.xt-inst-card .brxe-image-gallery .bricks-layout-item, .xt-inst-card .brxe-image-gallery a { display: block; }
.xt-inst-card .brxe-image-gallery img { display: block; width: 100%; height: var(--xt-h-photo); object-fit: cover; }
.xt-inst-card__notes { margin: 0; font-size: var(--xt-fs-sm); line-height: var(--xt-lh-body); color: var(--xt-muted); }
.xt-inst-filter .brxe-filter-select { min-width: 12rem; height: var(--xt-h-control); padding-inline: var(--xt-sp-sm); font: inherit; font-size: var(--xt-fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--xt-text); background: var(--xt-surface); border: var(--xt-bw) solid var(--xt-line); border-radius: var(--xt-r-sm); }
.xt-inst-specs > .brxe-block { display: contents; }

/* Bricks blocks default to a column flexbox; force the filter row back to a row */
.xt-inst-filters.brxe-block { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.xt-inst-filter.brxe-block { flex: 0 0 auto; width: auto; }
.xt-inst-filters .brxe-cgcount { margin-left: auto; align-self: center; }
.xt-inst-card.brxe-block { width: auto; }

/* --- BNPL message under the product price ---------------------------------- */
/* Rendered by [fmf_bnpl_message] via WooPayments' own messaging element. WooPayments
   only sizes it inside .summary, which this buy box is not, and Stripe's inner wrapper
   carries a -4px block margin (same as on the cart), so the box is sized here. The
   min-height reserves the element's usual height so the price does not jump on load. */
.xt-bnpl {
	display: block;
	width: 100%;
	max-width: 480px;
	min-height: 3em;
	margin: calc(var(--xt-sp-xs) * -1) 0 var(--xt-sp-xs);
}

.xt-bnpl #payment-method-message {
	height: auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 4px 0 !important;
	overflow: visible;
	position: static;
}

.xt-bnpl #payment-method-message iframe {
	display: block !important;
	margin: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
}