/*
Theme Name: QWATT
Theme URI: https://qwatt.in
Author: QWATT TRADING LLP
Description: QWATT's own theme. Standalone — no page builder, no parent theme. Built 2026-08-07 when Divi was removed, because Divi was driving only the header, the footer and the homepage while the rest of the site was already custom code.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: qwatt
*/

/*
 * NOTE ON `#left-area`, `#main-content` AND THE OTHER DIVI-SHAPED WRAPPERS BELOW.
 *
 * Those are Divi's names and they mean nothing on their own. They are emitted
 * deliberately by this theme's templates, because 601 portable rules and 67
 * `#left-area` rules in this stylesheet are written against that wrapper chain
 * and they all work. Renaming them at the same time as removing the page builder
 * would have meant changing 600+ working rules to gain a nicer class name, on a
 * site about to launch.
 *
 * It is a deliberate, temporary ugliness. Renaming is a mechanical find-and-replace
 * once the site is live and verified, and it should be done then — not now.
 */

:root {
	--qwp-ink: #10282d;
	--qwp-muted: #597074;
	--qwp-teal: #058f91;
	--qwp-teal-dark: #086166;
	--qwp-teal-deep: #0b343a;
	--qwp-copper: #d77b35;
	--qwp-orange: var(--qwp-copper);
	--qwp-paper: #f2f0e9;
	--qwp-canvas: var(--qwp-paper);
	--qwp-line: #d9ded9;
	--qwp-white: #ffffff;
	/*
	 * 1360px in a 1440 window leaves a 40px gutter, which reads as text jammed
	 * against the window edge. The approved board insets content much further.
	 */
	--qwp-content: 1200px;
	--qwp-space-1: 0.5rem;
	--qwp-space-2: 0.75rem;
	--qwp-space-3: 1rem;
	--qwp-space-4: 1.5rem;
	--qwp-space-5: 2rem;
	--qwp-space-6: 3rem;
	--qwp-space-7: 4.5rem;
	--qwp-radius: 0.25rem;
	--qwp-font-body: "Manrope", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
	--qwp-font-display: "Manrope", "Avenir Next", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
}

/*
 * Phase 1A foundation shell
 *
 * These rules are deliberately limited to shared tokens, accessibility-safe
 * interaction styling and compatibility corrections. Page composition remains
 * owned by editable Divi modules and Theme Builder templates.
 */

body:not(:has(.qwatt-pilot)):not(:has(.qwatt-review-hub)) {
	background: var(--qwp-white);
	color: var(--qwp-ink);
	font-family: var(--qwp-font-body);
}

body:not(:has(.qwatt-pilot)):not(:has(.qwatt-review-hub)) :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--qwp-orange);
	outline-offset: 3px;
}

body:not(:has(.qwatt-pilot)):not(:has(.qwatt-review-hub)) .mobile_menu_bar:focus-visible {
	border-radius: 0.25rem;
	outline: 3px solid var(--qwp-orange);
	outline-offset: 3px;
}

.qwc-layout-header {
	position: relative;
	z-index: 1000;
	/*
	 * Dark header, per the frozen board `00_HOMEPAGE_BOARD_AUTHORITY.png`.
	 * This was changed to white earlier on 2026-08-04 against the superseded
	 * real-asset proof board. Reverted.
	 */
	background: #0b0e0f;
	box-shadow: 0 1px 0 rgb(255 255 255 / 10%);
}

.qwc-layout-header .qwc-section,
.qwc-layout-header .qwc-row {
	padding-block: 0;
	background: #0b0e0f;
}

.qwc-layout-header .qwc-row {
	width: min(calc(100% - 2rem), var(--qwp-content));
	min-height: 82px;
	align-items: center;
	margin-inline: auto;
}

.qwc-layout-header .qwc-image {
	margin: 0;
}

.qwc-layout-header .qwc-row > .qwc-column:first-child {
	display: none;
}

.qwc-layout-header .qwc-row > .qwc-column:nth-child(2) {
	/* Masked: never rendered. Divi has always set these two header columns to
	 * 81.855% and 16.376%, which are now stated below. QWATT-DEC-2026-08-07-001. */
	flex: 1 1 auto !important;
}

.qwc-layout-header .qwc-row > .qwc-column:last-child {
	/* Masked: never rendered. Divi has always set these two header columns to
	 * 81.855% and 16.376%, which are now stated below. QWATT-DEC-2026-08-07-001. */
	flex: 0 0 auto !important;
}

.qwc-layout-header .qwc-menu-module,
.qwc-layout-header .qwc-menu-inner,
.qwc-layout-header .qwc-menu-wrap {
	align-items: center;
	background: transparent;
}

.qwc-layout-header .qwc-menu-logo-wrap {
	margin-right: clamp(1.25rem, 3vw, 3rem);
	margin-left: 0;
}

.qwc-layout-header .qwc-menu-inner {
	justify-content: flex-start;
}

/*
 * "Find a Dealer" is shown on desktop again.
 *
 * It used to be hidden here because the header also carried a teal dealer
 * button module, and rendering both wrapped the nav onto a second line. That
 * button is gone — on the approved board "Find a Dealer" is a plain nav link
 * like its four siblings — so the reason for hiding it went with it, and
 * hiding it now simply loses the fifth item off the board's nav.
 *
 * The class stays on the item because the mobile drawer still styles it.
 */

.qwc-layout-header .qwc-menu-logo img {
	width: clamp(158px, 15vw, 205px);
	max-height: 52px;
	filter: brightness(0) invert(1);
	object-fit: contain;
}

.qwc-layout-header .qwc-menu-nav > ul {
	gap: clamp(0.5rem, 1.3vw, 1.35rem);
}

.qwc-layout-header .qwc-menu-nav > ul > li {
	padding-inline: 0;
}

.qwc-layout-header .qwc-menu-nav > ul > li > a {
	min-height: 44px;
	align-items: center;
	text-decoration: none;
	/*
	 * `padding: 0` was here and has never rendered. Divi's own menu rule has
	 * always won, and every header link draws with 31px above and below and 20px
	 * to the right — measured on 2026-08-07 with Divi still on. Deleted rather
	 * than kept, on the owner's decision of the same day: the site keeps looking
	 * exactly as it does now, and the padding it actually uses is stated once, in
	 * the scaffolding block at the foot of this file.
	 * See `09_Maintenance/MASKED_DECLARATIONS.md`.
	 */
	color: #f3f7f7;
	font-size: 0.91rem;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.qwc-layout-header .qwc-menu-nav > ul > li > a:hover,
.qwc-layout-header .qwc-menu-nav > ul > li.current-menu-item > a {
	color: #69d7d0;
	opacity: 1;
}

.qwc-layout-header .qwc-button-wrap {
	display: flex;
	justify-content: flex-end;
}

.qwc-layout-header .qwc-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0.72rem 1.1rem;
	border: 2px solid var(--qwp-teal);
	border-radius: var(--qwp-radius);
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1.15;
}

.qwc-layout-header .qwc-button:hover {
	border-color: var(--qwp-teal-dark);
	background: var(--qwp-teal-dark);
}

.qwc-layout-footer {
	background: var(--qwp-teal-deep);
	color: #dce6e6;
}

.qwc-layout-footer .qwc-section,
.qwc-layout-footer .qwc-row {
	background: var(--qwp-teal-deep);
}

.qwc-layout-footer .qwc-section {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.qwc-layout-footer .qwc-row {
	width: min(calc(100% - 2rem), var(--qwp-content));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-inline: auto;
}

.qwc-layout-footer .qwc-text,
.qwc-layout-footer .qwc-text p {
	color: #b7c5c6;
	font-size: 0.93rem;
	line-height: 1.75;
}

.qwc-layout-footer .qwc-text strong {
	color: var(--qwp-white);
	font-size: 1rem;
	font-weight: 800;
}

.qwc-layout-footer .qwc-text a {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	color: #dce6e6;
	text-decoration: none;
}

.qwc-layout-footer .qwc-text a:hover {
	color: #75d8d3;
}

@media (max-width: 980px) {
	.qwc-layout-header .qwc-row {
		min-height: 72px;
		flex-wrap: nowrap !important;
		gap: 0.75rem;
	}

	.qwc-layout-header .qwc-column:nth-child(2) {
		flex: 1 1 auto !important;
	}

	.qwc-layout-header .qwc-column:last-child {
		display: none;
	}

	.qwc-layout-header .mobile_menu_bar {
		display: inline-flex;
		position: relative;
		width: 48px;
		height: 48px;
		align-items: center;
		justify-content: center;
		color: var(--qwp-white);
		cursor: pointer;
	}

	.qwc-layout-header .mobile_menu_bar::before,
	.qwc-layout-header .mobile_menu_bar::after {
		content: "";
		position: absolute;
		width: 24px;
		height: 2px;
		background: currentColor;
		transition: transform 160ms ease, box-shadow 160ms ease;
	}

	.qwc-layout-header .mobile_menu_bar::before {
		transform: translateY(-6px);
		box-shadow: 0 6px 0 currentColor;
	}

	.qwc-layout-header .mobile_menu_bar::after {
		transform: translateY(6px);
	}

	.qwc-layout-header .mobile_nav.opened .mobile_menu_bar::before {
		transform: rotate(45deg);
		box-shadow: none;
	}

	.qwc-layout-header .mobile_nav.opened .mobile_menu_bar::after {
		transform: rotate(-45deg);
	}

	.qwc-layout-header .qwc-mobile-menu {
		left: auto;
		right: 0;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
		width: min(92vw, 24rem);
		position: fixed;
		padding: 0.75rem;
		border-top: 3px solid var(--qwp-teal);
		box-shadow: 0 18px 38px rgb(13 31 33 / 18%);
		background: var(--qwp-paper);
		list-style: none;
		z-index: 9999;
	}

	.qwc-layout-header .mobile_nav.closed .qwc-mobile-menu {
		display: none;
	}

	.qwc-layout-header .mobile_nav.opened .qwc-mobile-menu {
		display: block;
	}

	.qwc-layout-header .qwc-mobile-menu ul,
	.qwc-layout-header .qwc-mobile-menu li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.qwc-layout-header .qwc-mobile-menu ul {
		padding-left: 1rem;
	}

	.qwc-layout-header .qwc-mobile-menu a {
		display: flex;
		min-height: 48px;
		padding: 0.85rem 1rem;
		color: var(--qwp-ink);
		font-weight: 700;
		text-decoration: none;
	}

	.qwc-layout-header .qwc-mobile-menu .qwatt-mobile-dealer-link {
		display: block;
		margin-top: 0.5rem;
	}

	.qwc-layout-header .qwc-mobile-menu .qwatt-mobile-dealer-link a {
		justify-content: center;
		border-radius: var(--qwp-radius);
		background: var(--qwp-teal);
		color: var(--qwp-white);
		text-align: center;
	}
}

/*
 * Guided Tool Finder owner-review homepage.
 *
 * Every visible copy, image, button, section and product grid is a native Divi
 * module. These styles provide the approved baseline; Divi module controls may
 * still override colours, spacing and sizing without editing this file.
 */

body.home .entry-title {
	display: none;
}

body.home .qwc-layout-body h1,
body.home .qwc-layout-body h2,
body.home .qwc-layout-body h3,
body.home .qwc-post-content h1,
body.home .qwc-post-content h2,
body.home .qwc-post-content h3 {
	margin: 0;
	font-family: var(--qwp-font-display);
}

body.home .qwgf-section.qwc-section {
	padding: clamp(3.2rem, 6vw, 5.4rem) 0;
	background: var(--qwp-white);
}

body.home .qwgf-section .qwc-row {
	width: min(calc(100% - 2rem), 1240px);
	max-width: 1240px;
	margin-inline: auto;
}

body.home .qwgf-hero.qwc-section {
	min-height: 620px;
	padding-block: clamp(3.4rem, 7vw, 6.8rem);
	overflow: hidden;
	background:
		radial-gradient(circle at 72% 36%, rgb(255 255 255 / 94%) 0 10%, transparent 36%),
		linear-gradient(135deg, #f6f8f8 0%, #ffffff 48%, #eef4f4 100%);
}

body.home .qwgf-hero-row {
	min-height: 480px;
	align-items: center;
}

body.home .qwgf-hero-copy-column {
	z-index: 3;
}

body.home .qwgf-kicker,
body.home .qwgf-section-kicker {
	margin: 0 0 0.8rem;
	color: var(--qwp-teal-dark);
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

body.home .qwgf-hero-copy h1 {
	max-width: 11ch;
	color: #101719;
	font-size: clamp(3.05rem, 5.4vw, 5.3rem);
	font-weight: 850;
	letter-spacing: -0.055em;
	line-height: 0.94;
}

body.home .qwgf-hero-copy p:last-child {
	max-width: 34rem;
	margin: 1.35rem 0 1.5rem;
	color: #526064;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.65;
}

body.home .qwgf-button.qwc-button,
body.home .qwgf-button .qwc-button {
	margin-right: 0.65rem;
	border: 2px solid var(--qwp-teal);
	border-radius: 0.5rem;
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-weight: 800;
}

body.home .qwgf-button--secondary.qwc-button,
body.home .qwgf-button--secondary .qwc-button {
	border-color: #b9c4c5;
	background: transparent;
	color: #172224;
}

body.home .qwgf-hero-stage {
	position: relative;
	min-height: 470px;
}

body.home .qwgf-hero-stage .qwc-image {
	position: absolute;
	margin: 0;
	filter: drop-shadow(0 24px 22px rgb(21 39 42 / 17%));
}

body.home .qwgf-hero-tool--grinder {
	top: 0;
	right: 3%;
	width: 54%;
	transform: rotate(-1deg);
}

body.home .qwgf-hero-tool--hammer {
	top: 31%;
	left: 4%;
	width: 62%;
	z-index: 2;
}

body.home .qwgf-hero-tool--drill {
	right: 8%;
	bottom: -1%;
	width: 40%;
	z-index: 3;
}

body.home .qwgf-steps.qwc-section {
	padding-block: 2.7rem 3.2rem;
	border-top: 1px solid var(--qwp-line);
	border-bottom: 1px solid var(--qwp-line);
}

body.home .qwgf-section-kicker {
	color: #435154;
	letter-spacing: 0.04em;
	text-transform: none;
}

body.home .qwgf-steps-row,
body.home .qwgf-category-row,
body.home .qwgf-support-row {
	gap: 1rem;
}

body.home .qwgf-step {
	position: relative;
	min-height: 150px;
	padding: 0.35rem 1.2rem 0.3rem 3.7rem;
}

body.home .qwgf-step > span {
	position: absolute;
	top: 0.25rem;
	left: 0;
	display: inline-grid;
	width: 2.4rem;
	height: 2.4rem;
	place-items: center;
	border-radius: 50%;
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-size: 0.75rem;
	font-weight: 850;
}

body.home .qwgf-step h3,
body.home .qwgf-support-card h3 {
	color: #182326;
	font-size: 1.05rem;
	font-weight: 820;
	line-height: 1.25;
}

body.home .qwgf-step p,
body.home .qwgf-support-card p {
	margin: 0.55rem 0 0;
	color: #607074;
	font-size: 0.92rem;
	line-height: 1.6;
}

body.home .qwgf-heading-row {
	align-items: end;
}

body.home .qwgf-section-heading h2,
body.home .qwgf-compare h2,
body.home .qwgf-application h2 {
	color: #111a1c;
	font-size: clamp(2rem, 3.2vw, 3.2rem);
	font-weight: 840;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

body.home .qwgf-section-heading p:last-child,
body.home .qwgf-compare-copy p:last-child,
body.home .qwgf-application-copy p:last-child {
	max-width: 46rem;
	margin: 0.9rem 0 0;
	color: #5c696d;
	font-size: 1rem;
	line-height: 1.65;
}

body.home .qwgf-text-link.qwc-button,
body.home .qwgf-text-link .qwc-button {
	min-height: 42px;
	margin-top: 0.7rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--qwp-teal-dark);
}

body.home .qwgf-category-row {
	margin-top: 1.75rem;
}

body.home .qwgf-category-card {
	display: flex;
	min-height: 220px;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.35rem;
	border: 1px solid #dfe5e5;
	border-radius: 0.45rem;
	background: linear-gradient(150deg, #ffffff 0%, #f4f7f7 100%);
	color: #192426;
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.home .qwgf-category-card:hover {
	border-color: #9eb7b8;
	box-shadow: 0 16px 28px rgb(27 49 52 / 8%);
	transform: translateY(-3px);
}

body.home .qwgf-category-icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	margin-bottom: auto;
	place-items: center;
	border: 1px solid #a8c8c9;
	border-radius: 50%;
	color: var(--qwp-teal-dark);
	font-size: 1.4rem;
}

body.home .qwgf-category-card strong {
	font-size: 1.03rem;
	font-weight: 820;
}

body.home .qwgf-category-card small {
	margin-top: 0.45rem;
	color: #677579;
	font-size: 0.82rem;
	line-height: 1.45;
}

body.home .qwgf-products.qwc-section {
	background: #f6f8f8;
}

body.home .qwgf-product-grid {
	margin-top: 1.7rem;
}

body.home .qwgf-product-grid ul.products li.product {
	padding: 1.15rem 1.15rem 1.3rem;
	border: 1px solid #dce3e3;
	border-radius: 0.55rem;
	box-shadow: none;
}

body.home .qwgf-product-grid ul.products li.product img {
	width: 100%;
	height: 230px;
	object-fit: contain;
	background: #fbfcfc;
}

body.home .qwgf-product-grid .woocommerce-loop-product__title {
	color: #121c1e;
	font-size: 1.02rem;
	font-weight: 850;
	line-height: 1.35;
}

body.home .qwgf-compare.qwc-section {
	overflow: hidden;
	background: #ffffff;
}

body.home .qwgf-compare-row {
	min-height: 380px;
	align-items: center;
}

body.home .qwgf-compare-stage {
	position: relative;
	min-height: 340px;
}

body.home .qwgf-compare-stage .qwc-image {
	position: absolute;
	filter: drop-shadow(0 20px 20px rgb(20 37 40 / 16%));
}

body.home .qwgf-compare-tool--one {
	top: 5%;
	right: 0;
	width: 66%;
}

body.home .qwgf-compare-tool--two {
	left: 0;
	bottom: 2%;
	width: 61%;
	z-index: 2;
}

body.home .qwgf-application.qwc-section {
	position: relative;
	overflow: hidden;
	background: linear-gradient(105deg, #0e5358 0%, #0d7074 54%, #6fc0bf 100%);
}

body.home .qwgf-application h2,
body.home .qwgf-application .qwgf-section-kicker,
body.home .qwgf-application-copy p:last-child {
	color: #ffffff;
}

body.home .qwgf-text-link--light.qwc-button,
body.home .qwgf-text-link--light .qwc-button {
	color: #ffffff;
}

body.home .qwgf-application-wave {
	position: relative;
	min-height: 230px;
	background:
		radial-gradient(ellipse at 35% 65%, transparent 0 44%, rgb(255 255 255 / 42%) 45% 47%, transparent 48% 100%),
		radial-gradient(ellipse at 70% 42%, transparent 0 40%, rgb(255 255 255 / 28%) 41% 43%, transparent 44% 100%);
}

body.home .qwgf-support-row {
	margin-top: 1.6rem;
}

body.home .qwgf-support-card {
	min-height: 190px;
	padding: 1.3rem;
	border-left: 1px solid var(--qwp-line);
}

body.home .qwgf-support-card a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	margin-top: 0.7rem;
	color: var(--qwp-teal-dark);
	font-weight: 800;
	text-decoration: none;
}

@media (max-width: 980px) {
	body.home .qwgf-hero-row,
	body.home .qwgf-compare-row,
	body.home .qwgf-application-row {
		flex-wrap: wrap !important;
	}

	body.home .qwgf-hero-row > .qwc-column,
	body.home .qwgf-compare-row > .qwc-column,
	body.home .qwgf-application-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwgf-hero-stage {
		min-height: 420px;
		margin-top: 2rem;
	}

	body.home .qwgf-category-row,
	body.home .qwgf-support-row {
		flex-wrap: wrap !important;
	}

	body.home .qwgf-category-row > .qwc-column,
	body.home .qwgf-support-row > .qwc-column {
		width: auto !important;
		max-width: none !important;
		flex: 1 1 calc(50% - 0.5rem) !important;
	}
}

@media (max-width: 767px) {
	body.home .qwgf-section.qwc-section {
		padding-block: 2.8rem;
	}

	body.home .qwgf-hero.qwc-section {
		min-height: 0;
		padding-top: 3rem;
	}

	body.home .qwgf-hero-copy h1 {
		font-size: clamp(2.75rem, 13vw, 4rem);
	}

	body.home .qwgf-hero-stage {
		min-height: 380px;
	}

	body.home .qwgf-hero-tool--grinder {
		width: 64%;
	}

	body.home .qwgf-hero-tool--hammer {
		top: 32%;
		left: -2%;
		width: 77%;
	}

	body.home .qwgf-hero-tool--drill {
		right: 0;
		width: 49%;
	}

	body.home .qwgf-steps-row,
	body.home .qwgf-category-row,
	body.home .qwgf-support-row {
		flex-wrap: wrap !important;
	}

	body.home .qwgf-steps-row > .qwc-column,
	body.home .qwgf-category-row > .qwc-column,
	body.home .qwgf-support-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwgf-step {
		min-height: 0;
		padding-bottom: 1.4rem;
	}

	body.home .qwgf-category-card {
		min-height: 165px;
	}

	body.home .qwgf-product-grid ul.products li.product img {
		height: 190px;
	}

	body.home .qwgf-compare-stage {
		min-height: 290px;
		margin-top: 1.5rem;
	}

	body.home .qwgf-application-wave {
		min-height: 150px;
	}

	body.home .qwgf-support-card {
		min-height: 0;
		border-top: 1px solid var(--qwp-line);
		border-left: 0;
	}
}

/*
 * D2 — approved Precision Product Discovery hero/task gateway.
 * Product, environment plate, copy and controls remain separate native Divi
 * modules. These rules are only the visual system; they do not own product
 * facts or category membership.
 */
body.home .qwd2-section.qwc-section {
	padding: 0;
	background: var(--qwp-paper);
}

body.home .qwd2-hero-row {
	width: 100%;
	max-width: 1440px;
	min-height: 620px;
	margin-inline: auto;
	display: flex;
	align-items: stretch;
}

/*
 * The approved board splits the hero roughly 63/37 — a wide landscape image stage
 * with a narrower task-gateway panel. The Divi column spec is `3_5,2_5`, but this
 * row is `display: flex`, and flex sizing ignores Divi's percentage widths, so both
 * columns fell back to content-driven basis and the stage rendered at ~41%.
 * State the ratio in flex terms, which is what actually governs here.
 */
body.home .qwd2-hero-row > .qwc-column {
	margin: 0;
	min-width: 0;
}

body.home .qwd2-hero-row > .qwd2-hero-media {
	flex: 0 0 62%;
	width: 62% !important;
	max-width: 62%;
}

body.home .qwd2-hero-row > .qwd2-hero-panel {
	flex: 1 1 38%;
	width: 38% !important;
	max-width: 38%;
}

body.home .qwd2-hero-media {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background: #0d1111;
}

body.home .qwd2-hero-media .qwc-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

/*
 * Divi wraps every image module's `img` in `span.qwc-image-wrap`. That span is
 * an inline-level shrink-to-fit box, so `height: 100%` on the `img` resolved
 * against a span that was only as tall as the image's own aspect ratio — 393px
 * inside a 941px stage. The result was a 466px slab of flat #0d1111 below the
 * photograph, which reads as a broken or unfinished hero. Give the module and the
 * wrap real height so `object-fit: cover` has something to cover.
 */
body.home .qwd2-hero-media .qwd2-hero-plate,
body.home .qwd2-hero-media .qwd2-hero-plate .qwc-image-wrap {
	display: block;
	width: 100%;
	height: 100%;
}

body.home .qwd2-hero-media .qwd2-hero-plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.76) saturate(0.88);
}

body.home .qwd2-hero-media .qwd2-hero-product {
	z-index: 2;
	top: 18%;
	right: 8%;
	bottom: auto;
	left: auto;
	width: 74%;
	height: auto;
	filter: drop-shadow(0 24px 25px rgb(0 0 0 / 42%));
	transform: rotate(-1deg);
}

body.home .qwd2-hero-media .qwd2-hero-product img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*
 * The hero label is a text module, not an image module, so it is not covered by
 * the `.qwd2-hero-media .qwc-image { position: absolute }` rule above. Without
 * its own positioning it falls into normal flow at the top of the hero and is
 * clipped by the sticky header. Position it explicitly.
 */
body.home .qwd2-hero-label {
	position: absolute;
	z-index: 3;
	top: auto;
	right: auto;
	bottom: 9%;
	left: 8%;
	width: min(84%, 22rem);
	height: auto;
	margin: 0;
	color: #fff;
}

body.home .qwd2-hero-label .qwd2-hero-product-label {
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
	text-shadow: 0 2px 14px rgb(0 0 0 / 60%);
}

body.home .qwd2-hero-label span {
	color: #f1f3ef;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

body.home .qwd2-hero-label strong {
	color: #fff;
	font-size: clamp(2.15rem, 3.4vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 0.91;
	/*
	 * "DEMOLITION" was breaking mid-word ("DEMOLITI / ON") in the narrow label
	 * column. A model name must never hyphenate or split — allow it to size down
	 * instead, and let the label take more width.
	 */
	hyphens: none;
	overflow-wrap: normal;
	word-break: keep-all;
	text-wrap: balance;
}

body.home .qwd2-hero-label small {
	max-width: 17rem;
	font-size: 0.94rem;
	line-height: 1.35;
}

body.home .qwd2-hero-panel {
	position: relative;
	display: flex;
	min-height: 620px;
	flex-direction: column;
	justify-content: center;
	/*
	 * The angled paper edge and its compensating left padding are both gone.
	 * The diagonal `clip-path: polygon(12% 0, ...)` does not appear on the
	 * owner-approved board — that panel is a plain rectangle butting against the
	 * image stage. The diagonal also cost real money: it clipped the eyebrow's
	 * first letter, and the `max(..., 15%)` padding added to clear it left only
	 * 179px of content width once the stage took its correct 62%, which wrapped
	 * the headline into six lines and stretched the hero to 1,619px tall.
	 */
	padding: clamp(2rem, 3.6vw, 3.4rem) clamp(1.6rem, 3vw, 3rem);
	background: var(--qwp-paper);
}

body.home .qwd2-hero-panel .qwc-text {
	margin: 0;
}

body.home .qwd2-hero-copy {
	max-width: 34rem;
}

body.home .qwd2-eyebrow {
	margin: 0 0 0.8rem;
	color: var(--qwp-copper);
	font-size: 0.74rem;
	font-weight: 850;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

body.home .qwd2-hero-copy h1 {
	margin: 0;
	color: var(--qwp-ink);
	/*
	 * Sized to the approved board, where "START WITH" sits on one line inside a
	 * ~530px panel. The previous 5.4rem ceiling could not fit it at any panel
	 * width the board actually uses.
	 */
	font-size: clamp(2.1rem, 3vw, 2.9rem);
	font-weight: 900;
	letter-spacing: -0.065em;
	line-height: 0.9;
}

body.home .qwd2-hero-copy h1 span {
	color: var(--qwp-teal-dark);
}

body.home .qwd2-hero-intro {
	margin: 0.7rem 0 0.8rem;
	color: var(--qwp-muted);
	font-size: 1rem;
}

body.home .qwd2-task-list {
	border-top: 1px solid rgb(16 40 45 / 20%);
}

body.home .qwd2-task-row {
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	gap: 0.7rem;
	align-items: center;
	/*
	 * Sized against the approved board, where the four task rows together read as
	 * a compact list rather than a stack of blocks. Still above the 44px target
	 * floor asserted further down.
	 */
	min-height: 46px;
	padding: 0.3rem 0.15rem;
	border-bottom: 1px solid rgb(16 40 45 / 20%);
	color: var(--qwp-ink);
	text-decoration: none;
}

body.home .qwd2-task-row:hover,
body.home .qwd2-task-row:focus-visible {
	color: var(--qwp-teal-dark);
	background: rgb(255 255 255 / 35%);
}

body.home .qwd2-task-icon {
	display: grid;
	width: 1.8rem;
	height: 1.8rem;
	place-items: center;
	border: 1px solid var(--qwp-teal-dark);
	border-radius: 50%;
	color: var(--qwp-teal-dark);
	font-size: 1rem;
}

body.home .qwd2-task-row strong,
body.home .qwd2-task-row small,
body.home .qwd2-task-row em {
	display: block;
}

body.home .qwd2-task-row strong {
	font-size: 0.9rem;
	font-weight: 850;
	letter-spacing: 0.01em;
}

body.home .qwd2-task-row small {
	margin-top: 0.1rem;
	color: var(--qwp-muted);
	font-size: 0.76rem;
	line-height: 1.25;
}

body.home .qwd2-task-row em {
	margin-top: 0.05rem;
	line-height: 1.2;
	color: var(--qwp-teal-dark);
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 750;
}

body.home .qwd2-task-arrow {
	color: var(--qwp-teal-dark);
	font-size: 1.2rem;
}

body.home .qwd2-hero-panel .qwd2-button {
	align-self: flex-start;
	margin-top: 1rem;
}

body.home .qwd2-button.qwc-button,
body.home .qwd2-button .qwc-button {
	min-height: 46px;
	border-radius: var(--qwp-radius);
	font-weight: 850;
}

body.home .qwd2-button--primary.qwc-button,
body.home .qwd2-button--primary .qwc-button {
	border: 2px solid var(--qwp-teal-dark);
	background: var(--qwp-teal-dark);
	color: #fff;
}

body.home .qwd2-button--text.qwc-button,
body.home .qwd2-button--text .qwc-button {
	min-height: 36px;
	margin-top: 0.35rem;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
	border: 0;
	background: transparent;
	color: var(--qwp-teal-dark);
}

body.home .qwd2-section {
	padding: clamp(3rem, 6vw, 5.2rem) 0;
}

body.home .qwd2-section > .qwc-row {
	width: min(calc(100% - 2rem), 1440px);
	max-width: 1440px;
	margin-inline: auto;
}

body.home .qwd2-section.qwd2-story {
	overflow: hidden;
}

body.home .qwd2-section.qwd2-story > .qwc-row {
	width: 100%;
	max-width: 100%;
}

/*
 * These are fluid rows so the band's background can run edge to edge, but their
 * CONTENT must sit in the same container as every other row on the page. Without
 * this they rendered at x=0 across the full viewport: the section heading was flush
 * against the window edge and the fourth story card was clipped off the right.
 */
body.home .qwd2-story-heading-row,
body.home .qwd2-story-row {
	width: min(calc(100% - 2rem), var(--qwp-content)) !important;
	max-width: var(--qwp-content) !important;
	margin-inline: auto;
}

body.home .qwd2-story-heading-row {
	margin-bottom: 0.8rem;
}

body.home .qwd2-story-row {
	display: flex;
	align-items: stretch;
	gap: clamp(0.8rem, 2vw, 1.2rem);
}

body.home .qwd2-story-row > .qwc-column {
	display: flex;
	width: calc(25% - 0.9rem);
	max-width: calc(25% - 0.9rem);
	flex: 0 0 calc(25% - 0.9rem);
	flex-direction: column;
	gap: 0.75rem;
}

body.home .qwd2-story-copy {
	display: block;
}

body.home .qwd2-story-copy .qwd2-story-kicker,
body.home .qwd2-story-copy .qwd2-story-count {
	color: var(--qwp-copper);
	font-weight: 800;
}

body.home .qwd2-story-copy .qwd2-story-kicker {
	margin-bottom: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

body.home .qwd2-story-copy h3 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 1.16rem;
	line-height: 1.12;
}

body.home .qwd2-story-copy .qwd2-story-copy {
	margin: 0.7rem 0;
	color: var(--qwp-muted);
	font-size: 0.94rem;
	line-height: 1.45;
}

body.home .qwd2-story-copy .qwd2-story-count {
	display: inline-block;
	margin: 0.75rem 0;
	font-size: 0.84rem;
}

body.home .qwd2-story-copy > .qwd2-story-panel {
	display: block;
	padding: 1rem 0.9rem 0.95rem;
	border: 1px solid #d6dddd;
	border-radius: 0.5rem;
	background: #f7f9f8;
	text-decoration: none;
	color: inherit;
}

body.home .qwd2-story-copy .qwd2-story-panel span {
	color: var(--qwp-teal-dark);
	font-weight: 800;
	font-size: 0.91rem;
}

body.home .qwd2-section.qwd2-story .qwd2-story-image .qwc-image {
	margin: 0;
}

/*
 * `max-height` alone let each scene keep its own intrinsic height, so the four
 * story panels sat at different vertical positions and the numbers/labels no
 * longer lined up across the row. A fixed aspect ratio makes all four identical
 * regardless of source crop.
 */
body.home .qwd2-section.qwd2-story .qwd2-story-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: saturate(0.92);
	border-radius: 0.58rem;
}

/* Numbered application panel — replaces the old family-link card. */
body.home .qwd2-story-copy .qwd2-story-number {
	margin: 0 0 0.15rem;
	color: var(--qwp-copper);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

body.home .qwd2-story-footer-row {
	margin-top: 1.6rem;
}

body.home .qwd2-section.qwd2-why {
	background: linear-gradient(120deg, #f7fafb 0%, #f1f5f5 100%);
}

body.home .qwd2-section.qwd2-tool-focus {
	background: linear-gradient(120deg, #0f666f 0%, #0a4d52 100%);
	color: #f4fffd;
}

body.home .qwd2-section.qwd2-tool-focus .qwd2-section-kicker,
body.home .qwd2-section.qwd2-tool-focus h2,
body.home .qwd2-section.qwd2-tool-focus h3 {
	color: #ffffff;
}

body.home .qwd2-section.qwd2-tool-focus .qwd2-focus-cards .qwatt-focus-card {
	border-color: rgb(255 255 255 / 24%);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(2px);
}

body.home .qwd2-why-heading-row,
body.home .qwd2-range-heading-row,
body.home .qwd2-range-filter-row,
body.home .qwd2-comparison-heading-row {
	align-items: end;
}

body.home .qwd2-why-row,
body.home .qwd2-range-filter-row {
	gap: 0.85rem;
}

/*
 * WHY QWATT was the only band on the homepage 240px wider than the rest.
 *
 * MEASURED. Every content row on the page was listed with its computed
 * max-width:
 *
 *   qwd2-story-heading-row   1200px      qwd2-starter-heading-row  1200px
 *   qwd2-story-row           1200px      qwd2-starter-row          1200px
 *   qwd2-tool-focus          1200px      qwd2-comparison-row       1200px
 *   qwd2-catalogue-row       1200px      qwd2-dealer-row           1200px
 *   qwd2-support-row         1200px      qwd2-footer-row           1200px
 *   qwd2-why-heading-row     1440px  <-- these two
 *   qwd2-why-row             1440px  <--
 *
 * 1200px is `var(--qwp-content)`, the site's declared content width. The 1440px
 * comes from Divi's generated cache — `.qwc-row-4 { max-width: 1440px
 * !important }` in et-core-unified-*.min.css, written from the builder's row
 * settings — and it outranked the theme's own rule.
 *
 * Because both rows are centred with `margin-inline: auto`, a 1440px band starts
 * (viewport − 1440) ÷ 2 from the left and a 1200px band starts (viewport − 1200)
 * ÷ 2. The gap between them is a constant 120px at ANY viewport wider than
 * 1200px, and exactly zero at or below it — which is why the fault is plainly
 * visible on the owner's screen and invisible in a 1200px window. Do not try to
 * confirm this one by eye in a narrow window; compare the computed max-widths.
 *
 * Enough specificity to beat an `!important` from a single class: this is
 * 0,5,1 with !important against Divi's 0,1,0 with !important.
 */
body.home .qwd2-section.qwd2-why > .qwc-row.qwc-row {
	max-width: var(--qwp-content) !important;
}

body.home .qwd2-why-point,
body.home .qwd2-filter-block {
	height: 100%;
	padding: 1rem;
	border: 1px solid #d8e2e5;
	border-radius: 0.56rem;
	background: #ffffff;
}

body.home .qwd2-why-point h3,
body.home .qwd2-filter-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
}

body.home .qwd2-why-point p,
body.home .qwd2-filter-summary {
	margin: 0.6rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

body.home .qwd2-why-kicker,
body.home .qwd2-filter-count {
	margin: 0;
	font-weight: 800;
	color: var(--qwp-copper);
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

body.home .qwd2-tool-focus {
	margin-top: 0.4rem;
}

body.home .qwd2-focus-cards .qwatt-focus-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(0.8rem, 1.8vw, 1.1rem);
	margin-top: 1.4rem;
}

/*
 * The approved board lays each starter card out horizontally: a small product
 * image on the left, kicker/model/specs/link on the right, card roughly 140px
 * tall. WooCommerce emits its thumbnail at 300x300 with hard width and height
 * attributes, and nothing constrained it, so each card rendered a 300px image
 * stacked above the text and stood 580px tall — four times the board.
 */
body.home .qwd2-focus-cards .qwatt-focus-card {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem;
	border: 1px solid var(--qwp-line);
	border-radius: 0.58rem;
	background: #fff;
}

body.home .qwd2-focus-cards .qwatt-focus-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

body.home .qwd2-focus-cards .qwatt-focus-card-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 118px;
	object-fit: contain;
}

body.home .qwd2-focus-cards .qwatt-focus-card-body {
	padding: 0;
	min-width: 0;
}

body.home .qwd2-focus-cards .qwatt-focus-card .qwatt-focus-kicker {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	color: var(--qwp-copper);
	text-transform: uppercase;
}

body.home .qwd2-focus-cards .qwatt-focus-card h3 {
	font-size: 1rem;
	line-height: 1.16;
}

body.home .qwd2-focus-cards .qwatt-focus-specs dt,
body.home .qwd2-focus-cards .qwatt-focus-specs dd {
	color: var(--qwp-ink);
}

body.home .qwd2-range {
	background: var(--qwp-paper);
}

body.home .qwd2-filter-card {
	text-decoration: none;
	color: var(--qwp-ink);
	display: block;
}

body.home .qwd2-filter-card .qwd2-filter-count {
	font-size: 0.82rem;
	color: var(--qwp-muted);
}

body.home .qwd2-filter-block {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	justify-content: space-between;
}

body.home .qwd2-range-explorer-row {
	margin-top: 0.9rem;
}

body.home .qwd2-range-grid .qwc-shop-grid .qwc-with-background {
	background: #fff;
}

body.home .qwd2-range-grid .qwc-shop-grid .add_to_cart_button,
body.home .qwd2-range-grid .qwc-shop-grid .added_to_cart,
body.home .qwd2-range-grid .qwc-shop-grid .button {
	display: none !important;
}

body.home .qwd2-range-grid .qwc-shop-grid .woocommerce-loop-product__title ~ .price,
body.home .qwd2-range-grid .qwc-shop-grid .price,
body.home .qwd2-range-grid .qwc-shop-grid .stock,
body.home .qwd2-range-grid .qwc-shop-grid .wc-forward {
	display: none !important;
}

body.home .qwd2-comparison {
	background: #ffffff;
}

body.home .qwd2-comparison .qwatt-comparison-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--qwatt-compare-gap, 1.25rem);
}

body.home .qwd2-section.qwd2-support {
	background: linear-gradient(125deg, var(--qwp-teal-dark) 0%, var(--qwp-teal-deep) 100%);
}

body.home .qwd2-comparison .qwatt-comparison-card {
	background: #f8fafa;
}

body.home .qwd2-conversion-row,
body.home .qwd2-conversion-row > .qwc-column {
	display: flex;
}

body.home .qwd2-conversion-row {
	gap: 0.85rem;
}

body.home .qwd2-conversion-card {
	padding: 1rem;
	border: 1px solid #d7e5e5;
	border-radius: 0.6rem;
	background: #ffffff;
}

body.home .qwd2-conversion-card h3 {
	margin: 0;
	font-size: 1.15rem;
}

body.home .qwd2-conversion-card p {
	color: var(--qwp-muted);
	line-height: 1.45;
}

body.home .qwd2-conversion-card .qwd2-button--text.qwc-button,
body.home .qwd2-conversion-card .qwd2-button--text .qwc-button {
	margin-top: 0.65rem;
}

body.home .qwd2-whatsapp.qwc-button,
body.home .qwd2-whatsapp .qwc-button {
	border-color: #1ea14f;
	background: #20b358;
	color: #fff;
}

body.home .qwd2-text-link {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	margin-right: 0.8rem;
	color: var(--qwp-teal-dark);
	font-weight: 800;
}

@media (max-width: 980px) {
	body.home .qwd2-hero-row {
	flex-wrap: wrap !important;
	}

	body.home .qwd2-hero-row > .qwc-column {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	}

	body.home .qwd2-hero-media,
	body.home .qwd2-hero-panel {
	min-height: 560px;
	}

	body.home .qwd2-hero-panel {
	clip-path: none;
	/*
	 * The diagonal is removed below 980px, so the extra left indent that clears
	 * it is no longer needed. Reset padding-inline or the panel reads as
	 * accidentally indented on tablet and mobile.
	 */
	padding-block: 3.5rem;
	padding-inline: clamp(1.3rem, 4.5vw, 4.6rem);
	}

	body.home .qwd2-story-row > .qwc-column,
	body.home .qwd2-why-row > .qwc-column,
	body.home .qwd2-conversion-row > .qwc-column {
		width: 100% !important;
		max-width: none !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-story-row,
	body.home .qwd2-why-row,
	body.home .qwd2-range-filter-row,
	body.home .qwd2-conversion-row {
		flex-wrap: wrap !important;
	}

	body.home .qwd2-comparison .qwatt-comparison-grid {
		grid-template-columns: 1fr;
	}

	body.home .qwd2-focus-cards .qwatt-focus-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .qwd2-section > .qwc-row {
		width: calc(100% - 1.35rem);
	}
}

@media (max-width: 767px) {
	body.home .qwd2-hero-media {
	min-height: 410px;
	}

	body.home .qwd2-hero-media .qwd2-hero-product {
		top: 15%;
		right: 4%;
		width: 88%;
	}

	body.home .qwd2-hero-label {
		bottom: 7%;
		left: 6%;
		width: 70%;
	}

	body.home .qwd2-hero-label strong {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	body.home .qwd2-hero-panel {
		min-height: 0;
		padding: 2.8rem 1.25rem 3rem;
	}

	body.home .qwd2-hero-copy h1 {
		font-size: clamp(2.75rem, 13vw, 4rem);
	}

	body.home .qwd2-task-row {
		min-height: 62px;
	}

	body.home .qwd2-story-row > .qwc-column,
	body.home .qwd2-why-row > .qwc-column,
	body.home .qwd2-range-filter-row > .qwc-column,
	body.home .qwd2-conversion-row > .qwc-column {
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-story-copy h3 {
		font-size: 1.02rem;
	}

	body.home .qwd2-focus-cards .qwatt-focus-grid {
		grid-template-columns: 1fr;
	}

	body.home .qwd2-range > .qwc-row,
	body.home .qwd2-comparison > .qwc-row {
		max-width: calc(100% - 1.35rem);
	}

	body.home .qwd2-range-actions {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
}

@media (max-width: 767px) {
	.qwc-layout-header .qwc-row,
	.qwc-layout-footer .qwc-row {
		width: min(calc(100% - 1.25rem), var(--qwp-content));
	}

	.qwc-layout-header .qwc-image img {
		max-width: 68px;
	}

	.qwc-layout-header .qwc-menu-logo img {
		width: 148px;
		max-height: 44px;
	}

	.qwc-layout-footer .qwc-column {
		margin-bottom: 0.75rem;
	}
}

body.page-template-default:has(.qwatt-pilot),
body.page-template-default:has(.qwatt-review-hub) {
	background: var(--qwp-white);
	color: var(--qwp-ink);
}

/*
 * Phase 1B product-discovery slice. The component order, copy, field bindings,
 * images and calls to action live in editable Divi modules. These rules provide
 * the shared QWATT baseline only and can later be migrated into Divi presets.
 */

.qwc-layout-body .qwc-row {
	gap: clamp(1.5rem, 4vw, 4rem);
}

.qwc-layout-body .qwc-product-gallery .woocommerce-product-gallery__image,
.qwc-layout-body .qwc-product-gallery .flex-viewport {
	border: 1px solid var(--qwp-line);
	border-radius: 1rem;
	background: var(--qwp-white);
}

.qwc-layout-body .qwc-product-title h1,
.qwc-layout-body h1 {
	color: var(--qwp-ink);
	font-size: clamp(2.25rem, 5vw, 4.75rem);
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.qwc-layout-body h2 {
	color: var(--qwp-ink);
	font-size: clamp(1.65rem, 3vw, 2.7rem);
	font-weight: 820;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.qwc-layout-body .qwatt-eyebrow {
	margin-bottom: 0.75rem;
	color: var(--qwp-teal-dark);
	font-size: 0.76rem;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.qwc-layout-body .qwatt-product-type,
.qwc-layout-body .qwatt-category-intro {
	max-width: 50rem;
	color: var(--qwp-muted);
	font-size: 1.05rem;
	line-height: 1.65;
}

.qwc-layout-body .qwatt-key-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.75rem 0;
}

.qwc-layout-body .qwatt-key-specs > div,
.qwc-layout-body .qwatt-spec-card {
	display: flex;
	min-height: 104px;
	flex-direction: column;
	justify-content: center;
	padding: 1rem;
	border: 1px solid var(--qwp-line);
	border-radius: 0.72rem;
	background: var(--qwp-white);
}

.qwc-layout-body .qwatt-key-specs strong,
.qwc-layout-body .qwatt-spec-card strong {
	color: var(--qwp-ink);
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	font-weight: 850;
	line-height: 1.15;
}

.qwc-layout-body .qwatt-key-specs span,
.qwc-layout-body .qwatt-spec-card span {
	margin-top: 0.45rem;
	color: var(--qwp-muted);
	font-size: 0.78rem;
	font-weight: 700;
}

.qwc-layout-body .qwatt-field-lines {
	padding-left: 1.2rem;
	border-left: 3px solid var(--qwp-teal);
	color: var(--qwp-ink);
	font-size: 1rem;
	line-height: 2;
	white-space: pre-line;
}

.qwc-layout-body .qwatt-divi-spec-table {
	margin-top: 1.5rem;
	border-top: 1px solid var(--qwp-line);
}

.qwc-layout-body .qwatt-divi-spec-table > div {
	display: grid;
	grid-template-columns: minmax(9rem, 1fr) 1.2fr;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--qwp-line);
}

.qwc-layout-body .qwatt-divi-spec-table dt {
	color: var(--qwp-muted);
	font-weight: 650;
}

.qwc-layout-body .qwatt-divi-spec-table dd {
	margin: 0;
	color: var(--qwp-ink);
	font-weight: 800;
}

.qwc-layout-body .qwc-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	margin: 0.35rem 0.4rem 0.35rem 0;
	padding: 0.75rem 1.15rem;
	border: 2px solid var(--qwp-teal);
	border-radius: 0.42rem;
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-weight: 800;
}

.qwc-layout-body .qwc-shop ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.qwc-layout-body .qwc-shop ul.products li.product {
	width: 100% !important;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--qwp-line);
	border-radius: 0.8rem;
	background: var(--qwp-white);
}

.qwc-layout-body .qwc-shop .price,
.qwc-layout-body .qwc-shop .button {
	display: none !important;
}

.qwc-layout-body .qwatt-comparison-grid {
	display: grid;
	grid-template-columns: repeat(var(--qwatt-compare-columns, 2), minmax(0, 1fr));
	gap: var(--qwatt-compare-gap, 20px);
	margin-top: 2rem;
}

.qwc-layout-body .qwatt-comparison-card {
	padding: var(--qwatt-compare-card-padding, 24px);
	border: 1px solid var(--qwp-line);
	border-radius: 0.8rem;
	background: var(--qwp-white);
}

.qwc-layout-body .qwatt-comparison-card dl > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--qwp-line);
}

@media (max-width: 980px) {
	.qwc-layout-body .qwc-row:has(.qwatt-spec-card) {
		flex-wrap: wrap !important;
		gap: 1rem;
	}

	.qwc-layout-body .qwc-row:has(.qwatt-spec-card) > .qwc-column {
		width: auto !important;
		max-width: none !important;
		flex: 1 1 calc(50% - 0.5rem) !important;
	}

	.qwc-layout-body .qwc-shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.qwc-layout-body .qwc-row {
		flex-wrap: wrap !important;
	}

	.qwc-layout-body .qwc-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	.qwc-layout-body .qwatt-key-specs,
	.qwc-layout-body .qwc-shop ul.products,
	.qwc-layout-body .qwatt-comparison-grid {
		grid-template-columns: 1fr;
	}

	.qwc-layout-body .qwc-row:has(.qwatt-spec-card) > .qwc-column {
		flex-basis: 100% !important;
	}

	.qwc-layout-body .qwatt-divi-spec-table > div {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.qwc-layout-body .qwc-button-wrap,
	.qwc-layout-body .qwc-button {
		width: 100%;
	}
}

body:has(.qwatt-pilot) #main-header,
body:has(.qwatt-review-hub) #main-header,
body:has(.qwatt-pilot) #main-footer,
body:has(.qwatt-review-hub) #main-footer,
body:has(.qwatt-pilot) .qwc-layout-header,
body:has(.qwatt-review-hub) .qwc-layout-header,
body:has(.qwatt-pilot) .qwc-layout-footer,
body:has(.qwatt-review-hub) .qwc-layout-footer {
	display: none;
}

body:has(.qwatt-pilot) #page-container,
body:has(.qwatt-review-hub) #page-container {
	padding-top: 0;
}

body:has(.qwatt-pilot) .qwc-section,
body:has(.qwatt-review-hub) .qwc-section,
body:has(.qwatt-pilot) .qwc-row,
body:has(.qwatt-review-hub) .qwc-row,
body:has(.qwatt-pilot) .qwc-column,
body:has(.qwatt-review-hub) .qwc-column,
body:has(.qwatt-pilot) .qwc-text,
body:has(.qwatt-review-hub) .qwc-text,
body:has(.qwatt-pilot) .qwc-text-inner,
body:has(.qwatt-review-hub) .qwc-text-inner {
	margin: 0;
	padding: 0;
}

.qwatt-pilot,
.qwatt-review-hub {
	box-sizing: border-box;
	font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

.qwatt-pilot *,
.qwatt-review-hub * {
	box-sizing: border-box;
}

.qwatt-pilot h1,
.qwatt-pilot h2,
.qwatt-pilot h3,
.qwatt-review-hub h1,
.qwatt-review-hub h2 {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
}

.qwatt-pilot p,
.qwatt-pilot dl,
.qwatt-pilot ol,
.qwatt-pilot ul,
.qwatt-review-hub p {
	margin-top: 0;
}

.qwatt-pilot a,
.qwatt-review-hub a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.qwatt-pilot a:focus-visible,
.qwatt-review-hub a:focus-visible {
	outline: 3px solid var(--qwp-orange);
	outline-offset: 4px;
}

.qwatt-pilot-eyebrow {
	margin-bottom: var(--qwp-space-2);
	color: var(--qwp-teal-dark);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.35;
	text-transform: uppercase;
}

.qwatt-pilot-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.15rem;
	border: 2px solid var(--qwp-teal);
	border-radius: 0.4rem;
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
}

.qwatt-pilot-button:hover {
	border-color: var(--qwp-teal-dark);
	background: var(--qwp-teal-dark);
}

.qwatt-pilot-text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	font-weight: 750;
}

.qwatt-pilot-nav {
	position: relative;
	z-index: 20;
	display: flex;
	width: min(calc(100% - 2rem), var(--qwp-content));
	min-height: 76px;
	align-items: center;
	justify-content: space-between;
	gap: var(--qwp-space-4);
	margin-inline: auto;
	padding-block: var(--qwp-space-3);
	border-bottom: 1px solid var(--qwp-line);
}

.qwatt-pilot-brand {
	display: inline-flex;
	align-items: baseline;
	gap: var(--qwp-space-2);
	color: var(--qwp-ink);
	text-decoration: none !important;
}

.qwatt-pilot-brand strong {
	font-size: 1.3rem;
	letter-spacing: 0.05em;
}

.qwatt-pilot-brand span {
	color: var(--qwp-muted);
	font-size: 0.75rem;
}

.qwatt-pilot-nav > div {
	display: flex;
	align-items: center;
	gap: var(--qwp-space-4);
}

.qwatt-pilot-nav > div a {
	font-size: 0.88rem;
	font-weight: 720;
	text-decoration: none;
}

.qwatt-pilot-nav .qwatt-pilot-nav-review {
	color: var(--qwp-teal-dark);
}

.qwatt-pilot-hero,
.qwatt-pilot-categories,
.qwatt-pilot-products,
.qwatt-pilot-specs,
.qwatt-pilot-features,
.qwatt-pilot-contents,
.qwatt-pilot-compare,
.qwatt-pilot-trust {
	width: min(calc(100% - 2rem), var(--qwp-content));
	margin-inline: auto;
}

.qwatt-pilot-hero {
	display: grid;
	min-height: 640px;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-block: var(--qwp-space-7);
}

.qwatt-pilot-hero-copy {
	max-width: 42rem;
}

.qwatt-pilot-hero h1 {
	max-width: 18ch;
	margin-bottom: var(--qwp-space-4);
	font-size: clamp(2.2rem, 4.4vw, 4rem);
	letter-spacing: -0.045em;
	line-height: 1;
}

.qwatt-pilot-hero-copy > p:not(.qwatt-pilot-eyebrow) {
	max-width: 58ch;
	margin-bottom: var(--qwp-space-4);
	color: var(--qwp-muted);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.65;
}

.qwatt-pilot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qwp-space-3);
	align-items: center;
}

.qwatt-pilot-hero-visual {
	position: relative;
	display: grid;
	min-height: 460px;
	place-items: center;
	padding: clamp(1rem, 3vw, 2rem);
	background: var(--qwp-canvas);
}

.qwatt-pilot-hero-visual img {
	width: 100%;
	max-width: 560px;
	height: auto;
	max-height: 430px;
	object-fit: contain;
	filter: drop-shadow(0 22px 28px rgb(17 31 34 / 15%));
}

.qwatt-pilot-proof {
	position: absolute;
	right: var(--qwp-space-3);
	bottom: var(--qwp-space-3);
	display: grid;
	gap: 0.15rem;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--qwp-teal);
	background: rgb(255 255 255 / 94%);
	color: var(--qwp-ink);
	box-shadow: 0 10px 26px rgb(17 31 34 / 12%);
}

.qwatt-pilot-proof span {
	color: var(--qwp-muted);
	font-size: 0.72rem;
}

.qwatt-pilot-categories,
.qwatt-pilot-products,
.qwatt-pilot-specs,
.qwatt-pilot-features,
.qwatt-pilot-contents,
.qwatt-pilot-compare {
	padding-block: var(--qwp-space-7);
}

.qwatt-pilot-categories > header,
.qwatt-pilot-products > header,
.qwatt-pilot-specs > header,
.qwatt-pilot-features > header,
.qwatt-pilot-compare > header {
	max-width: 54rem;
	margin-bottom: var(--qwp-space-5);
}

.qwatt-pilot-categories h2,
.qwatt-pilot-products h2,
.qwatt-pilot-specs h2,
.qwatt-pilot-features h2,
.qwatt-pilot-contents h2,
.qwatt-pilot-compare h2,
.qwatt-pilot-trust h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.8rem);
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.qwatt-pilot-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--qwp-space-3);
}

.qwatt-pilot-category-grid article {
	display: grid;
	min-height: 250px;
	align-content: end;
	padding: var(--qwp-space-4);
	border: 1px solid var(--qwp-line);
}

.qwatt-pilot-category-grid article > span {
	margin-bottom: auto;
	color: var(--qwp-teal);
	font-size: 0.78rem;
	font-weight: 800;
}

.qwatt-pilot-category-grid h3 {
	margin-bottom: var(--qwp-space-2);
	font-size: 1.35rem;
}

.qwatt-pilot-category-grid p {
	min-height: 4.6em;
	margin-bottom: var(--qwp-space-3);
	color: var(--qwp-muted);
	line-height: 1.55;
}

.qwatt-pilot-category-grid a,
.qwatt-pilot-product-card-body > a {
	font-weight: 800;
}

.qwatt-pilot-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--qwp-space-4);
}

.qwatt-pilot-product-card {
	overflow: hidden;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-white);
}

.qwatt-pilot-product-image {
	display: grid;
	aspect-ratio: 4 / 3;
	place-items: center;
	padding: var(--qwp-space-3);
	background: var(--qwp-canvas);
}

.qwatt-pilot-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 180ms ease;
}

.qwatt-pilot-product-image:hover img {
	transform: scale(1.025);
}

.qwatt-pilot-product-card-body {
	padding: var(--qwp-space-4);
}

.qwatt-pilot-product-card h3 {
	margin-bottom: var(--qwp-space-3);
	font-size: 1.55rem;
}

.qwatt-pilot-product-card dl {
	display: grid;
	gap: var(--qwp-space-2);
	margin-bottom: var(--qwp-space-4);
}

.qwatt-pilot-product-card dl div {
	display: flex;
	justify-content: space-between;
	gap: var(--qwp-space-3);
	padding-bottom: var(--qwp-space-2);
	border-bottom: 1px solid var(--qwp-line);
}

.qwatt-pilot-product-card dt {
	color: var(--qwp-muted);
	font-size: 0.8rem;
}

.qwatt-pilot-product-card dd {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 800;
	text-align: right;
}

.qwatt-pilot-spec-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--qwp-space-2);
}

.qwatt-pilot-spec-grid > div {
	min-height: 118px;
	padding: var(--qwp-space-3);
	border-top: 3px solid var(--qwp-teal);
	background: var(--qwp-canvas);
}

.qwatt-pilot-spec-grid dt {
	margin-bottom: var(--qwp-space-2);
	color: var(--qwp-muted);
	font-size: 0.75rem;
	line-height: 1.35;
}

.qwatt-pilot-spec-grid dd {
	margin: 0;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 850;
	line-height: 1.15;
}

.qwatt-pilot-features ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qwp-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qwatt-pilot-features li {
	display: grid;
	min-height: 96px;
	grid-template-columns: auto 1fr;
	gap: var(--qwp-space-3);
	align-items: center;
	padding: var(--qwp-space-3);
	border: 1px solid var(--qwp-line);
}

.qwatt-pilot-features li span {
	color: var(--qwp-orange);
	font-size: 0.76rem;
	font-weight: 850;
}

.qwatt-pilot-features li strong {
	font-size: 1rem;
	line-height: 1.35;
}

.qwatt-pilot-contents {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	gap: var(--qwp-space-6);
	align-items: start;
}

.qwatt-pilot-contents ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qwp-space-2);
	margin: var(--qwp-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.qwatt-pilot-contents li {
	padding: var(--qwp-space-2) 0 var(--qwp-space-2) 1.2rem;
	border-bottom: 1px solid var(--qwp-line);
	background: linear-gradient(var(--qwp-teal), var(--qwp-teal)) left 0.9rem / 0.5rem 2px no-repeat;
}

.qwatt-pilot-contents aside {
	padding: var(--qwp-space-4);
	background: var(--qwp-canvas);
}

.qwatt-pilot-contents aside h3 {
	margin-bottom: var(--qwp-space-4);
	font-size: 1.35rem;
}

.qwatt-pilot-contents aside p:last-child {
	margin: var(--qwp-space-4) 0 0;
	color: var(--qwp-muted);
	font-size: 0.85rem;
}

.qwatt-pilot-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--qwp-line);
}

.qwatt-pilot-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.qwatt-pilot-compare th,
.qwatt-pilot-compare td {
	min-width: 150px;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--qwp-line);
	text-align: left;
	vertical-align: top;
}

.qwatt-pilot-compare thead th {
	background: var(--qwp-ink);
	color: var(--qwp-white);
}

.qwatt-pilot-compare tbody th {
	color: var(--qwp-muted);
	font-weight: 650;
}

.qwatt-pilot-trust {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: var(--qwp-space-5);
	align-items: center;
	margin-block: var(--qwp-space-6);
	padding: var(--qwp-space-5);
	background: var(--qwp-ink);
	color: var(--qwp-white);
}

.qwatt-pilot-trust .qwatt-pilot-eyebrow {
	color: #9ed5d6;
}

.qwatt-pilot-trust p {
	margin-bottom: 0;
	color: #cdd6d7;
	line-height: 1.6;
}

/* Direction A: bright, measured and conversion-focused. */
.qwatt-pilot--precision.qwatt-pilot-hero-visual,
.qwatt-pilot--precision .qwatt-pilot-product-image {
	border-radius: var(--qwp-radius);
}

.qwatt-pilot--precision .qwatt-pilot-category-grid article,
.qwatt-pilot--precision .qwatt-pilot-product-card,
.qwatt-pilot--precision .qwatt-pilot-spec-grid > div,
.qwatt-pilot--precision .qwatt-pilot-features li {
	border-radius: var(--qwp-radius);
}

.qwatt-pilot--precision .qwatt-pilot-product-card {
	box-shadow: 0 12px 32px rgb(17 31 34 / 7%);
}

/* Direction B: controlled industrial contrast and asymmetric structure. */
body:has(.qwatt-pilot--industrial) {
	background: #121a1d;
}

.qwatt-pilot--industrial.qwatt-pilot-nav {
	width: 100%;
	max-width: none;
	padding-inline: max(1rem, calc((100vw - var(--qwp-content)) / 2));
	border-color: #354246;
	background: #121a1d;
	color: var(--qwp-white);
}

.qwatt-pilot--industrial .qwatt-pilot-brand,
.qwatt-pilot--industrial.qwatt-pilot-nav a {
	color: var(--qwp-white);
}

.qwatt-pilot--industrial.qwatt-pilot-hero,
.qwatt-pilot--industrial.qwatt-pilot-products,
.qwatt-pilot--industrial.qwatt-pilot-features,
.qwatt-pilot--industrial.qwatt-pilot-trust {
	width: 100%;
	max-width: none;
	padding-inline: max(1rem, calc((100vw - var(--qwp-content)) / 2));
}

.qwatt-pilot--industrial.qwatt-pilot-hero {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	background: #121a1d;
	color: var(--qwp-white);
}

.qwatt-pilot--industrial .qwatt-pilot-eyebrow {
	color: #f0a36d;
}

.qwatt-pilot--industrial .qwatt-pilot-hero-copy > p:not(.qwatt-pilot-eyebrow) {
	color: #c8d1d2;
}

.qwatt-pilot--industrial .qwatt-pilot-button {
	border-color: var(--qwp-orange);
	background: var(--qwp-orange);
}

.qwatt-pilot--industrial .qwatt-pilot-text-link {
	color: var(--qwp-white);
}

.qwatt-pilot--industrial.qwatt-pilot-hero-visual {
	background:
		linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 46%),
		repeating-linear-gradient(135deg, transparent 0 22px, rgb(255 255 255 / 2%) 22px 23px),
		#202b2f;
}

.qwatt-pilot--industrial.qwatt-pilot-categories,
.qwatt-pilot--industrial.qwatt-pilot-specs,
.qwatt-pilot--industrial.qwatt-pilot-contents,
.qwatt-pilot--industrial.qwatt-pilot-compare {
	color: var(--qwp-ink);
}

.qwatt-pilot--industrial .qwatt-pilot-category-grid article {
	border-left: 5px solid var(--qwp-orange);
	background: var(--qwp-canvas);
}

.qwatt-pilot--industrial.qwatt-pilot-products,
.qwatt-pilot--industrial.qwatt-pilot-features {
	background: #1c2629;
	color: var(--qwp-white);
}

.qwatt-pilot--industrial .qwatt-pilot-product-card {
	border-color: #3c484b;
	background: #121a1d;
}

.qwatt-pilot--industrial .qwatt-pilot-product-card-body,
.qwatt-pilot--industrial .qwatt-pilot-product-card-body a {
	color: var(--qwp-white);
}

.qwatt-pilot--industrial .qwatt-pilot-product-card dl div,
.qwatt-pilot--industrial .qwatt-pilot-features li {
	border-color: #3c484b;
}

.qwatt-pilot--industrial .qwatt-pilot-product-card dt {
	color: #b9c4c5;
}

.qwatt-pilot--industrial .qwatt-pilot-features li {
	border-left: 4px solid var(--qwp-orange);
}

.qwatt-pilot--industrial.qwatt-pilot-trust {
	margin-block: 0;
	background: var(--qwp-orange);
}

.qwatt-pilot--industrial.qwatt-pilot-trust .qwatt-pilot-eyebrow,
.qwatt-pilot--industrial.qwatt-pilot-trust p {
	color: var(--qwp-white);
}

.qwatt-pilot--industrial.qwatt-pilot-trust .qwatt-pilot-button {
	border-color: var(--qwp-white);
	background: transparent;
}

/* Direction C: compact, structured and dealer-comparison led. */
.qwatt-pilot--dealer.qwatt-pilot-nav {
	border-bottom-width: 3px;
	border-bottom-color: var(--qwp-teal);
}

.qwatt-pilot--dealer.qwatt-pilot-hero {
	min-height: 520px;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	padding-block: var(--qwp-space-6);
}

.qwatt-pilot--dealer .qwatt-pilot-hero-copy {
	padding-left: var(--qwp-space-4);
	border-left: 6px solid var(--qwp-orange);
}

.qwatt-pilot--dealer .qwatt-pilot-hero h1 {
	font-size: clamp(2rem, 3.7vw, 3.35rem);
}

.qwatt-pilot--dealer.qwatt-pilot-categories,
.qwatt-pilot--dealer.qwatt-pilot-products,
.qwatt-pilot--dealer.qwatt-pilot-specs,
.qwatt-pilot--dealer.qwatt-pilot-features,
.qwatt-pilot--dealer.qwatt-pilot-contents,
.qwatt-pilot--dealer.qwatt-pilot-compare {
	padding-block: var(--qwp-space-6);
}

.qwatt-pilot--dealer .qwatt-pilot-category-grid article {
	min-height: 190px;
	border-top: 5px solid var(--qwp-teal);
	background: var(--qwp-canvas);
}

.qwatt-pilot--dealer .qwatt-pilot-product-grid {
	gap: 1px;
	background: var(--qwp-line);
}

.qwatt-pilot--dealer .qwatt-pilot-product-card {
	border: 0;
}

.qwatt-pilot--dealer .qwatt-pilot-product-image {
	aspect-ratio: 16 / 11;
}

.qwatt-pilot--dealer .qwatt-pilot-spec-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--qwp-line);
}

.qwatt-pilot--dealer .qwatt-pilot-spec-grid > div {
	border-top: 0;
	background: var(--qwp-white);
}

.qwatt-pilot--dealer .qwatt-pilot-features ol {
	grid-template-columns: 1fr;
	gap: 0;
}

.qwatt-pilot--dealer .qwatt-pilot-features li {
	min-height: 68px;
	border-width: 0 0 1px;
}

.qwatt-pilot--dealer.qwatt-pilot-trust {
	border-left: 8px solid var(--qwp-orange);
}

/* Direction review hub. */
.qwatt-review-hub {
	width: min(calc(100% - 2rem), var(--qwp-content));
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 7rem);
}

.qwatt-review-hub > header {
	max-width: 58rem;
	margin-bottom: var(--qwp-space-6);
}

.qwatt-review-hub h1 {
	margin-bottom: var(--qwp-space-4);
	font-size: clamp(2.2rem, 5vw, 4.25rem);
	letter-spacing: -0.05em;
	line-height: 1;
}

.qwatt-review-hub > header > p:last-child {
	color: var(--qwp-muted);
	font-size: 1.1rem;
	line-height: 1.65;
}

.qwatt-review-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--qwp-space-4);
}

.qwatt-review-card {
	display: grid;
	min-height: 430px;
	align-content: start;
	padding: var(--qwp-space-4);
	border: 1px solid var(--qwp-line);
}

.qwatt-review-card > span {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	margin-bottom: auto;
	background: var(--qwp-teal);
	color: var(--qwp-white);
	font-weight: 850;
}

.qwatt-review-card h2 {
	margin: var(--qwp-space-6) 0 var(--qwp-space-3);
	font-size: 1.65rem;
}

.qwatt-review-card p {
	min-height: 8em;
	color: var(--qwp-muted);
	line-height: 1.55;
}

.qwatt-review-card nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qwp-space-2);
	margin-top: var(--qwp-space-4);
}

.qwatt-review-card nav a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--qwp-line);
	font-size: 0.78rem;
	font-weight: 750;
	text-decoration: none;
}

.qwatt-review-card--industrial {
	background: var(--qwp-ink);
	color: var(--qwp-white);
}

.qwatt-review-card--industrial > span {
	background: var(--qwp-orange);
}

.qwatt-review-card--industrial p {
	color: #cbd3d4;
}

.qwatt-review-card--industrial nav a {
	border-color: #465256;
}

.qwatt-review-card--dealer {
	border-top: 7px solid var(--qwp-teal);
}

@media (max-width: 1023px) {
	.qwatt-pilot-nav {
		align-items: flex-start;
	}

	.qwatt-pilot-nav > div {
		max-width: 58%;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--qwp-space-2) var(--qwp-space-3);
	}

	.qwatt-pilot-hero,
	.qwatt-pilot--industrial.qwatt-pilot-hero,
	.qwatt-pilot--dealer.qwatt-pilot-hero {
		min-height: auto;
		grid-template-columns: 1fr;
		padding-block: var(--qwp-space-6);
	}

	.qwatt-pilot-hero-copy {
		max-width: 48rem;
	}

	.qwatt-pilot-hero-visual {
		min-height: 380px;
	}

	.qwatt-pilot-category-grid,
	.qwatt-pilot-product-grid,
	.qwatt-review-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qwatt-pilot-product-grid > :last-child,
	.qwatt-review-grid > :last-child {
		grid-column: 1 / -1;
	}

	.qwatt-pilot-spec-grid,
	.qwatt-pilot--dealer .qwatt-pilot-spec-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.qwatt-pilot-trust {
		grid-template-columns: 1fr 1fr;
	}

	.qwatt-pilot-trust .qwatt-pilot-button {
		justify-self: start;
	}
}

@media (max-width: 639px) {
	.qwatt-pilot-nav {
		display: grid;
		min-height: auto;
		padding-block: var(--qwp-space-3);
	}

	.qwatt-pilot-brand {
		justify-content: space-between;
	}

	.qwatt-pilot-nav > div {
		max-width: none;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}

	.qwatt-pilot-nav > div a {
		display: inline-flex;
		min-height: 44px;
		align-items: center;
	}

	.qwatt-pilot-hero,
	.qwatt-pilot--industrial.qwatt-pilot-hero,
	.qwatt-pilot--dealer.qwatt-pilot-hero,
	.qwatt-pilot-categories,
	.qwatt-pilot-products,
	.qwatt-pilot-specs,
	.qwatt-pilot-features,
	.qwatt-pilot-contents,
	.qwatt-pilot-compare {
		padding-block: var(--qwp-space-5);
	}

	.qwatt-pilot-hero h1 {
		font-size: clamp(2.05rem, 11vw, 2.8rem);
		line-height: 1.02;
	}

	.qwatt-pilot-hero-visual {
		min-height: 300px;
		padding: var(--qwp-space-2);
	}

	.qwatt-pilot-hero-visual img {
		max-height: 280px;
	}

	.qwatt-pilot-proof {
		position: static;
		width: 100%;
		margin-top: var(--qwp-space-2);
	}

	.qwatt-pilot-category-grid,
	.qwatt-pilot-product-grid,
	.qwatt-pilot-spec-grid,
	.qwatt-pilot--dealer .qwatt-pilot-spec-grid,
	.qwatt-pilot-features ol,
	.qwatt-pilot-contents,
	.qwatt-pilot-trust,
	.qwatt-review-grid {
		grid-template-columns: 1fr;
	}

	.qwatt-pilot-product-grid > :last-child,
	.qwatt-review-grid > :last-child {
		grid-column: auto;
	}

	.qwatt-pilot-category-grid article {
		min-height: 190px;
	}

	.qwatt-pilot-category-grid p {
		min-height: auto;
	}

	.qwatt-pilot-product-image {
		aspect-ratio: 4 / 3;
	}

	.qwatt-pilot-spec-grid {
		gap: 1px;
		background: var(--qwp-line);
	}

	.qwatt-pilot-spec-grid > div {
		min-height: 90px;
		border-top: 0;
	}

	.qwatt-pilot-contents ul {
		grid-template-columns: 1fr;
	}

	.qwatt-pilot-trust {
		margin-block: var(--qwp-space-4);
		padding: var(--qwp-space-4);
	}

	.qwatt-review-card {
		min-height: auto;
	}

	.qwatt-review-card p {
		min-height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qwatt-pilot-product-image img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * D4b — Tool in Focus (Approved Direction v1.2 §3.5)
 * Full-width teal product-theatre band, one genuine cordless product.
 * ------------------------------------------------------------------------ */

body.home .qwd2-section.qwd2-focus-hero {
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	background: linear-gradient(135deg, #10777a 0%, #0b5f62 62%, #084a4d 100%);
}

body.home .qwd2-focus-hero-row {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	align-items: center;
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}

body.home .qwd2-focus-hero-copy .qwd2-section-kicker {
	color: #c6eeee;
}

body.home .qwd2-focus-hero-copy h2 {
	margin: 0.4rem 0 1.1rem;
	color: #fff;
	font-size: clamp(2.1rem, 3.6vw, 3.4rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

body.home .qwd2-focus-hero-intro {
	max-width: 27rem;
	margin: 0 0 1.6rem;
	color: #c9e8e8;
	font-size: 0.98rem;
	line-height: 1.55;
}

body.home .qwd2-focus-hero-specs {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: 1.9rem;
}

body.home .qwd2-focus-hero-spec {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

body.home .qwd2-focus-hero-spec strong {
	min-width: 8.5rem;
	color: #fff;
	font-size: 1.32rem;
	font-weight: 800;
}

body.home .qwd2-focus-hero-spec span {
	color: #a9d4d4;
	font-size: 0.86rem;
}

body.home .qwd2-focus-hero-media .qwc-image {
	margin: 0;
}

body.home .qwd2-focus-hero-media img {
	width: 100%;
	height: auto;
	max-height: 430px;
	object-fit: contain;
	filter: drop-shadow(0 30px 34px rgb(0 0 0 / 34%));
}

body.home .qwd2-button--light {
	background: #fff;
	color: #0b5f62;
}

body.home .qwd2-button--ghost {
	border: 1px solid rgb(255 255 255 / 46%);
	background: transparent;
	color: #fff;
}

@media (max-width: 980px) {
	body.home .qwd2-focus-hero-row {
		flex-wrap: wrap !important;
	}

	body.home .qwd2-focus-hero-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-focus-hero-media {
		order: 2;
		margin-top: 1.5rem;
	}

	body.home .qwd2-focus-hero-media img {
		max-height: 320px;
	}
}

/* ---------------------------------------------------------------------------
 * Homepage completion — Tool in Focus action row and responsive states.
 * ------------------------------------------------------------------------ */

/*
 * The two Tool in Focus actions were stacking because each Divi button is its
 * own block-level module. Lay the column out as flex so they sit inline, and
 * let them wrap rather than overflow on narrow widths.
 */
body.home .qwd2-focus-hero-text > .qwc-module.qwc-button-wrap {
	display: inline-flex;
	margin: 0 0.7rem 0 0;
}

body.home .qwd2-focus-hero-text {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

body.home .qwd2-focus-hero-text > .qwc-text {
	flex: 1 1 100%;
}

/*
 * `.qwd2-focus-grid` was dead CSS — the plugin renders `.qwatt-focus-grid`, which
 * is styled above. An earlier pass of mine edited this block believing it drove the
 * card row; it never did. Removed rather than left to mislead the next reader.
 */

@media (max-width: 1024px) {
	body.home .qwd2-story-row > .qwc-column {
		width: calc(50% - 0.6rem) !important;
		max-width: calc(50% - 0.6rem) !important;
		flex: 0 0 calc(50% - 0.6rem) !important;
	}

	body.home .qwd2-story-row {
		flex-wrap: wrap !important;
		gap: 1.2rem;
	}

	body.home .qwd2-why-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		margin-bottom: 1.1rem;
	}
}

@media (max-width: 767px) {
	body.home .qwd2-story-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-focus-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.home .qwd2-focus-hero-copy h2 {
		font-size: clamp(1.85rem, 8.5vw, 2.6rem);
	}

	body.home .qwd2-focus-hero-spec strong {
		min-width: 7rem;
		font-size: 1.15rem;
	}

	body.home .qwd2-focus-hero-text > .qwc-module.qwc-button-wrap {
		width: 100%;
		margin: 0 0 0.6rem;
	}

	body.home .qwd2-focus-hero-text > .qwc-module.qwc-button-wrap .qwc-button {
		display: block;
		text-align: center;
	}
}

/* No interactive target below the 44px accessibility floor at any width. */
body.home .qwd2-task-row,
body.home .qwd2-button,
body.home .qwd2-focus-card a {
	min-height: 44px;
}

/*
 * D2 visual calibration pass (homepage styling only).
 * Keeps blocks editable and restores strong hierarchy across D2-D7.
 */
body.home {
	--qwd2-card-shadow: 0 16px 32px rgb(13 32 35 / 10%);
	--qwd2-card-shadow-hover: 0 22px 42px rgb(13 32 35 / 14%);
}

body.home .qwd2-section .qwc-text p,
body.home .qwd2-section .qwc-text p strong {
	color: currentColor;
}

body.home .qwd2-section .qwd2-section-kicker {
	margin-bottom: 0.46rem;
	letter-spacing: 0.1em;
}

body.home .qwd2-section h2,
body.home .qwd2-section h3 {
	letter-spacing: -0.03em;
}

body.home .qwd2-section.qwd2-hero {
	background:
		linear-gradient(100deg, #eef4f4 0%, #f8fbfb 45%, #e8eeec 100%);
}

body.home .qwd2-hero-media .qwd2-hero-plate img {
	filter: brightness(0.72) saturate(0.95) contrast(1.08);
}

body.home .qwd2-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.02) 38%, rgb(255 255 255 / 0) 58%);
	pointer-events: none;
}

body.home .qwd2-hero-media .qwd2-hero-product {
	filter:
		drop-shadow(0 22px 32px rgb(0 0 0 / 38%))
		drop-shadow(0 0 0 2px rgb(255 255 255 / 12%));
}

body.home .qwd2-hero-panel {
	background:
		linear-gradient(125deg, #f7f8f4 0%, #f2f3ef 58%, #e6edea 100%);
}

body.home .qwd2-task-row {
	transition: transform 160ms ease, background-color 180ms ease;
}

body.home .qwd2-task-row:hover {
	transform: translateX(0.24rem);
}

body.home .qwd2-section.qwd2-story {
	background:
		linear-gradient(0deg, #f6f8f9 0%, #f2f0e9 55%, #f2f0e9 100%);
}

body.home .qwd2-story-copy > .qwd2-story-panel {
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgb(5 143 145 / 16%);
	border-radius: 0.68rem;
	box-shadow: var(--qwd2-card-shadow);
	backdrop-filter: blur(1px);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

body.home .qwd2-story-copy > .qwd2-story-panel:hover {
	transform: translateY(-3px);
	box-shadow: var(--qwd2-card-shadow-hover);
}

body.home .qwd2-story-row .qwc-image-wrap,
body.home .qwd2-story-row .qwc-image {
	border-radius: 0.68rem;
	overflow: hidden;
}

body.home .qwd2-story-copy .qwd2-story-number {
	display: inline-flex;
	width: 2.1rem;
	height: 2.1rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: linear-gradient(130deg, var(--qwp-copper), #ff9b48);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
}

body.home .qwd2-why {
	background:
		radial-gradient(1000px 250px at 4% 20%, rgb(5 143 145 / 5%), transparent),
		var(--qwp-white);
}

body.home .qwd2-why-point,
body.home .qwd2-filter-block,
body.home .qwd2-conversion-card {
	border-radius: 0.72rem;
	box-shadow: 0 12px 28px rgb(11 50 56 / 8%);
	border-color: #d7e2e4;
}

body.home .qwd2-why-point:hover,
body.home .qwd2-filter-block:hover,
body.home .qwd2-conversion-card:hover {
	box-shadow: 0 16px 32px rgb(11 52 58 / 13%);
	border-color: rgb(5 143 145 / 25%);
}

body.home .qwd2-section.qwd2-tool-focus {
	background: linear-gradient(120deg, #0b5a61 0%, #0e4f54 42%, #0a3f44 100%);
}

body.home .qwd2-focus-cards .qwatt-focus-card {
	border-radius: 0.72rem;
	box-shadow: 0 14px 30px rgb(11 52 56 / 12%);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

body.home .qwd2-focus-cards .qwatt-focus-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 35px rgb(11 52 56 / 16%);
}

body.home .qwd2-range {
	background:
		linear-gradient(90deg, #fbfbf7 0%, #f3f1ea 45%, #f5f3ec 100%);
}

body.home .qwd2-filter-card .qwd2-filter-title,
body.home .qwd2-filter-summary {
	font-family: var(--qwp-font-display);
}

body.home .qwd2-filter-block {
	padding: 1.1rem;
}

body.home .qwd2-filter-card {
	background: linear-gradient(0deg, rgb(255 255 255 / 72%), #fff);
}

body.home .qwd2-range-grid .qwc-shop-grid .qwc-with-background {
	box-shadow: 0 12px 30px rgb(11 52 56 / 8%);
}

body.home .qwd2-range-actions .qwd2-text-link {
	display: inline-flex;
	margin-top: 0.4rem;
}

body.home .qwd2-comparison {
	background: #f7fbfb;
}

body.home .qwd2-comparison .qwatt-comparison-grid {
	align-items: stretch;
}

body.home .qwd2-comparison .qwatt-comparison-card {
	border-radius: 0.72rem;
	box-shadow: 0 12px 30px rgb(11 52 56 / 10%);
}

body.home .qwd2-comparison .qwatt-comparison-card dl > div:nth-child(even) {
	background: #ffffff;
}

body.home .qwd2-comparison .qwatt-comparison-card dl > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	align-items: baseline;
}

body.home .qwd2-comparison .qwatt-comparison-card dl > div:last-child {
	border-bottom: 0;
}

body.home .qwd2-section.qwd2-support .qwd2-conversion-row {
	align-items: stretch;
}

body.home .qwd2-section.qwd2-support .qwd2-conversion-card {
	background: #ffffff;
}

body.home .qwd2-conversion-card .qwd2-button {
	min-width: 210px;
}

body.home .qwd2-button--text .qwc-button {
	font-weight: 780;
}

body.home .qwd2-button--text .qwc-button::after {
	content: "↗";
	padding-left: 0.35rem;
}

body.home .qwd2-button--primary.qwc-button:hover,
body.home .qwd2-button--primary .qwc-button:hover {
	box-shadow: 0 14px 22px rgb(8 97 102 / 35%);
	transform: translateY(-1px);
}

@media (min-width: 1201px) {
	body.home .qwd2-range-heading-row,
	body.home .qwd2-comparison-heading-row {
		max-width: 72rem;
	}
}

@media (max-width: 1024px) {
	body.home .qwd2-hero-row {
		min-height: auto;
	}

	body.home .qwd2-hero-panel {
		padding-top: clamp(2rem, 5vw, 3.2rem);
	}

	body.home .qwd2-task-row {
		grid-template-columns: 2rem 1fr;
	}

	body.home .qwd2-task-arrow {
		grid-column: 2 / -1;
		justify-self: end;
	}

	body.home .qwd2-story-row > .qwc-column {
		width: calc(50% - 0.6rem) !important;
		max-width: calc(50% - 0.6rem) !important;
		flex: 0 0 calc(50% - 0.6rem) !important;
	}

	body.home .qwd2-comparison .qwatt-comparison-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body.home .qwd2-hero-row {
		flex-wrap: wrap !important;
	}

	body.home .qwd2-hero-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-hero-copy h1 {
		font-size: clamp(2.1rem, 12vw, 2.8rem);
	}

	body.home .qwd2-task-row {
		grid-template-columns: 2rem 1fr auto;
	}

	body.home .qwd2-story-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}

	body.home .qwd2-focus-cards .qwatt-focus-grid,
	body.home .qwd2-why-row,
	body.home .qwd2-conversion-row {
		grid-template-columns: 1fr !important;
	}

	body.home .qwd2-range-copy,
	body.home .qwd2-comparison-copy,
	body.home .qwd2-why-copy {
		max-width: 100%;
	}

	body.home .qwd2-text-link {
		width: auto;
	}
}


/*
 * ---------------------------------------------------------------------------
 * Homepage rhythm and band contrast — added after the first real visual review.
 *
 * Every `.qwd2-section` computed to `padding: 0px` on the live page despite the
 * rule at the top of the homepage block. Sections butted straight into one
 * another with no breathing room anywhere, which is the single largest reason
 * the page read as unfinished. Asserted here at the end of the cascade.
 *
 * The hero is deliberately exempt: it is a full-bleed stage.
 * ---------------------------------------------------------------------------
 */
body.home .qwd2-section:not(.qwd2-hero) {
	padding-block: clamp(3.25rem, 5.5vw, 5.5rem);
}

body.home .qwd2-section > .qwc-row {
	width: min(calc(100% - 2rem), var(--qwp-content));
	max-width: var(--qwp-content);
	margin-inline: auto;
}

/*
 * The Workshop Story is a dark band on the approved board — it is the page's
 * one strong tonal break between the hero and the cream lower half. It had been
 * changed to a pale gradient, which left the whole page one continuous wash of
 * off-white and removed the only structural contrast on the page.
 */
body.home .qwd2-section.qwd2-story {
	background: linear-gradient(155deg, #0e3b3f 0%, #0b2f33 100%);
}

body.home .qwd2-section.qwd2-story h2,
body.home .qwd2-section.qwd2-story h3,
body.home .qwd2-section.qwd2-story .qwc-text p {
	color: #f2f6f6;
}

body.home .qwd2-section.qwd2-story .qwd2-section-kicker {
	color: var(--qwp-copper);
}

body.home .qwd2-section.qwd2-story .qwd2-story-copy > .qwd2-story-panel {
	background: rgb(255 255 255 / 6%);
	border-color: rgb(255 255 255 / 14%);
}

body.home .qwd2-section.qwd2-story a {
	color: #7fd3cf;
}


/*
 * ---------------------------------------------------------------------------
 * Board fidelity — 00_HOMEPAGE_BOARD_AUTHORITY.png, SHA d1c0a679.
 * ---------------------------------------------------------------------------
 */

/*
 * The Workshop Story band is NEAR-BLACK on the board, not teal. Teal is reserved
 * for the Tool in Focus band further down; using it here gave the page two teal
 * bands and blunted the contrast the story section is meant to carry.
 */
body.home .qwd2-section.qwd2-story {
	background: #0a0c0c;
}

/*
 * Plain copper numerals, as on the board — 01 02 03 04 set beside the task word,
 * not inside a filled circle. The badge treatment was added later and reads as
 * decoration on a band whose job is editorial.
 */
/*
 * Specificity note: the story band's light-text rule is
 * `body.home .qwd2-section.qwd2-story .qwc-text p` (0,4,1), which outranked the
 * plainer number selector (0,3,1) and painted the numerals white. Matched here.
 */
body.home .qwd2-section.qwd2-story .qwd2-story-copy .qwd2-story-number {
	display: inline !important;
	width: auto !important;
	height: auto !important;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--qwp-copper);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1;
}

/*
 * Why QWATT is three open blocks separated by thin rules on the board — no card,
 * no border, no shadow, no white fill. The boxed treatment turned a calm trust
 * strip into three floating panels.
 */
body.home .qwd2-why-point {
	height: auto !important;
	padding: 0 2rem 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

body.home .qwd2-why-row > .qwc-column:not(:last-child) .qwd2-why-point {
	border-right: 1px solid rgb(16 40 45 / 14%);
}

@media (max-width: 980px) {
	body.home .qwd2-why-point {
		padding: 0 0 1.4rem;
	}

	body.home .qwd2-why-row > .qwc-column:not(:last-child) .qwd2-why-point {
		border-right: 0;
		border-bottom: 1px solid rgb(16 40 45 / 14%);
	}
}


/*
 * ---------------------------------------------------------------------------
 * Step 3b — hero, against 00_HOMEPAGE_BOARD_AUTHORITY.png (SHA d1c0a679).
 * ---------------------------------------------------------------------------
 *
 * The board's paper panel has an angled left edge: the workshop stage runs under
 * it on a diagonal. The wedge was removed in an earlier lock because it was
 * absent from the superseded board. It belongs.
 *
 * The reason it was removed the first time was a real defect, not a whim: the
 * diagonal ate the eyebrow's first letter. The fix then was `max(..., 15%)` left
 * padding, which crushed the content box to 179px once the stage took its correct
 * width. Both failures came from padding stated as a percentage of a panel whose
 * width kept changing.
 *
 * Stated in absolute terms instead. The cut reaches 12% of panel width; at the
 * board's ~456px panel that is ~55px, so 4.5rem (72px) clears it at every width
 * the layout actually uses, and leaves ~380px of content — enough for the 43px
 * headline to hold "START WITH" on one line.
 */
body.home .qwd2-hero-panel {
	padding-left: 4.5rem;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/*
 * The stage sits under the wedge so no paper-coloured sliver shows through the
 * diagonal. Without the negative margin the two columns butt edge to edge and the
 * cut reveals the section background rather than the photograph.
 */
body.home .qwd2-hero-row > .qwd2-hero-media {
	margin-right: -4%;
	flex-basis: 66% !important;
	width: 66% !important;
	max-width: 66% !important;
}

/*
 * Task rows: the board shows a chevron at the right edge, not a circled arrow,
 * and counts read "tools". The circled arrow competed with the primary action
 * directly beneath it.
 */
/*
 * Superseded by the corrected Step 3b block at the end of this file, which
 * sizes the icon box to hold a drawn mark rather than a glyph. Left as a note
 * rather than a live rule: at (0,3,1) it outranked the corrected rule's (0,2,1)
 * and held the icons at 24px, so the four task marks rendered too small to read
 * as distinct. Deleted rather than out-specified — the corrected block is the
 * one that should own this, and two rules fighting is how it got here.
 */

@media (max-width: 980px) {
	/* No diagonal on stacked layouts — it would cut the top of the copy. */
	body.home .qwd2-hero-panel {
		padding-left: clamp(1.6rem, 5vw, 2.4rem);
		clip-path: none;
	}

	body.home .qwd2-hero-row > .qwd2-hero-media {
		margin-right: 0;
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}


/*
 * ---------------------------------------------------------------------------
 * Step 3b, corrected — hero, against 00_HOMEPAGE_BOARD_AUTHORITY.png
 * (SHA-256 d1c0a679…, checksum re-verified against the owner's upload).
 * ---------------------------------------------------------------------------
 *
 * WHY THE FIRST ATTEMPT LOOKED RIGHT IN THE DOM AND WRONG ON SCREEN
 *
 * The previous block set `clip-path` on `.qwd2-hero-panel` and verified the
 * polygon by DOM measurement. The polygon was correct. It was also invisible,
 * for two independent reasons:
 *
 *   1. The panel's computed background-color was `rgba(0,0,0,0)` — a
 *      Divi-generated column rule outranked `background: var(--qwp-paper)`.
 *      Clipping a transparent box removes nothing you can see.
 *   2. Behind the panel sat the section's own paper fill, not the photograph.
 *      Even opaque, the cut would have revealed paper on paper.
 *
 * A clip-path is only visible where an opaque foreground is removed AND
 * something different is behind it. Both halves are asserted below.
 *
 * BOARD GEOMETRY, measured off the authority at 3x
 *
 *   panel edge, top of hero .......... 60.2% of viewport
 *   panel edge, bottom of hero ....... 52.2% of viewport
 *   panel content, left .............. 64.8% of viewport
 *   panel content, right ............. 91.0% of viewport
 *
 * The stage and the panel both bleed to their viewport edges. There is no
 * centred content rail in this hero.
 *
 * THE PADDING TRAP, THIRD TIME
 *
 * This same padding has failed twice: once stated as a fixed value against a
 * moving panel (the diagonal ate the eyebrow's first letter), once as
 * `max(…, 15%)` of a panel whose width then changed (179px of content, a
 * six-line headline, a 1,619px hero). Both failures share one cause: the cut
 * and the padding that clears it were measured against different references.
 *
 * They are stated against the SAME reference here — the viewport. The cut is
 * 8vw wide (60.2% − 52.2%). The content inset is 12.6vw. 12.6 > 8 holds at
 * every viewport width, so the cut can never reach the copy, at any size,
 * without anyone having to re-measure a panel.
 */

/* Full bleed. Divi's row rail is 80%/1080px; the board's hero has no rail. */
body.home .qwd2-hero-row.qwc-row {
	width: 100% !important;
	max-width: none !important;
	padding: 0;
	gap: 0 !important;
}

/*
 * Stage runs to 62% so the photograph is continuous under the whole diagonal,
 * including its widest point at the top of the hero.
 */
body.home .qwd2-hero-row > .qwd2-hero-media {
	flex: 0 0 62% !important;
	width: 62% !important;
	max-width: 62% !important;
	margin: 0;
}

/*
 * Panel is 47.8vw wide and pulled 9.8vw left so its widest edge lands on the
 * board's 52.2%. 62 + 47.8 − 9.8 = 100: the pair still fills the viewport
 * exactly, with the overlap being precisely the strip the diagonal cuts away.
 */
body.home .qwd2-hero-row > .qwd2-hero-panel {
	position: relative;
	z-index: 2;
	flex: 0 0 47.8% !important;
	width: 47.8% !important;
	max-width: 47.8% !important;
	margin: 0 0 0 -9.8%;
}

body.home .qwd2-hero-panel {
	/* Opaque, and stated without the custom property that Divi outranked. */
	background: #f2f0e9;
	/* 8vw of 47.8vw of panel width = 16.74%. */
	clip-path: polygon(16.74% 0, 100% 0, 100% 100%, 0 100%) !important;
	padding-block: clamp(2rem, 3.6vw, 3.4rem);
	/*
	 * Stated in `vw`, NOT in `%`. Percentage padding resolves against the
	 * containing block's inline size — the row, 1,425px — not against the
	 * element it is written on. `26.36%` therefore billed 376px of left padding
	 * and 271px of right against a 681px panel and left 34px of content: the
	 * headline set one letter per line. This is the same trap that took the
	 * eyebrow's first letter and produced the 1,619px hero, wearing a third
	 * disguise. `vw` cannot be reinterpreted by a parent.
	 */
	padding-left: 12.6vw;
	padding-right: 9.1vw;
}

/*
 * The stage's own dark fill is what the diagonal reveals in the strip between
 * the photograph's right edge and the panel's widest edge. Keep it dark rather
 * than paper so the cut never flashes a light sliver mid-transition.
 */
body.home .qwd2-hero-media {
	background: #0d1111;
}

/* Board: a short copper rule above the headline, not a wordmark line. */
body.home .qwd2-hero-copy .qwd2-eyebrow {
	width: 2.1rem;
	height: 3px;
	overflow: hidden;
	margin-bottom: 1.15rem;
	background: var(--qwp-copper);
	color: transparent;
	font-size: 0;
	text-indent: -999em;
}

body.home .qwd2-hero-copy h1 {
	font-size: clamp(2.1rem, 3.8vw, 3.45rem);
	letter-spacing: -0.045em;
	line-height: 0.94;
}

/*
 * Task rows: the board sets a teal line icon, a title, a count and a hairline
 * chevron. No ring around the icon, and the row's own left column is wider to
 * hold a drawn icon rather than a glyph.
 */
body.home .qwd2-task-row {
	grid-template-columns: 2.6rem 1fr auto !important;
	min-height: 52px;
	gap: 0.85rem !important;
	border-bottom-color: rgb(16 40 45 / 12%) !important;
}

body.home .qwd2-task-icon {
	display: grid !important;
	width: 2.2rem !important;
	height: 2.2rem !important;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--qwp-teal-dark);
	place-items: center;
}

body.home .qwd2-task-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.home .qwd2-task-row strong {
	font-size: 0.96rem;
	font-weight: 800;
	letter-spacing: 0;
}

/* Board carries no description line in the hero rows — title and count only. */
body.home .qwd2-task-row small {
	display: none !important;
}

body.home .qwd2-task-row em {
	color: var(--qwp-muted);
	font-size: 0.78rem;
	font-weight: 500;
}

body.home .qwd2-task-arrow {
	color: rgb(16 40 45 / 42%);
	font-size: 1.05rem;
	font-weight: 400;
}

/*
 * Both hero actions span the full content box on the board, with the arrow
 * pushed to the right edge. `.qwd2-button` is the `<a>` itself, not a wrapper,
 * so the width has to be asserted on the anchor and on Divi's wrapper above it.
 * Divi supplies the arrow as `::after`; `justify-content: space-between` is what
 * moves it off the label and out to the edge.
 */
body.home .qwd2-hero-panel .qwc-button-wrap {
	width: 100%;
	margin-top: 1.1rem;
}

/*
 * `width: 100%` without `!important` lost to Divi's own button width, leaving a
 * 216px anchor inside a 369px wrapper; the arrow then had nowhere to sit and
 * dropped to a second line, adding 66px to the button and 160px to the hero.
 * Both the width and the direction are asserted.
 */
body.home .qwd2-hero-panel a.qwd2-button.qwc-button {
	display: flex !important;
	width: 100% !important;
	/* Divi caps its buttons at `max-width: max-content`, which held the anchor
	 * to 278px of a 369px wrapper even with `width: 100% !important`. */
	max-width: none !important;
	box-sizing: border-box !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	align-self: stretch !important;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

body.home .qwd2-hero-panel a.qwd2-button.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

/* Secondary reads as a link on paper: no fill, no border, teal label. */
body.home .qwd2-hero-panel a.qwd2-button--text.qwc-button {
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
	border: 0;
	background: none;
	color: var(--qwp-teal-dark);
}

/* Label block sits higher on the board — clear of the workbench edge. */
body.home .qwd2-hero-label {
	bottom: 22% !important;
	left: 6% !important;
}

/* Tool sits further into the frame than the current 8% right offset. */
body.home .qwd2-hero-media .qwd2-hero-product {
	width: 66% !important;
	right: 17% !important;
}

@media (max-width: 980px) {
	/*
	 * Stacked: no diagonal (it would cut the top of the copy), no overlap, and
	 * the padding returns to a plain gutter now that nothing has to be cleared.
	 */
	body.home .qwd2-hero-row > .qwd2-hero-media,
	body.home .qwd2-hero-row > .qwd2-hero-panel {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0;
	}

	body.home .qwd2-hero-panel {
		clip-path: none !important;
		padding-left: clamp(1.6rem, 5vw, 2.4rem);
		padding-right: clamp(1.6rem, 5vw, 2.4rem);
	}

	body.home .qwd2-hero-label {
		bottom: 8% !important;
	}
}


/*
 * ---------------------------------------------------------------------------
 * §5 Tool in Focus and §6 A good place to start — against the board
 * (00_HOMEPAGE_BOARD_AUTHORITY.png, SHA d1c0a679…).
 * ---------------------------------------------------------------------------
 */

/* Shared marks. The board uses two: a rule with a kicker, and a bare rule. */
body.home .qwd2-kicker-rule {
	display: flex;
	align-items: center;
	margin: 0 0 1.5rem;
	color: inherit;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

body.home .qwd2-kicker-rule::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

body.home .qwd2-rule-only {
	width: 2.1rem;
	height: 3px;
	margin: 0 0 1rem;
	background: var(--qwp-copper);
}

/* --- §5 Tool in Focus ---------------------------------------------------- */

/*
 * Deep teal, sampled off the board: a soft radial lift behind the tool falling
 * to near-black teal at the edges. Flat teal read as a slab and lost the tool.
 */
body.home .qwd2-section.qwd2-tool-focus {
	background: radial-gradient(120% 105% at 62% 45%, #0a4a52 0%, #06333a 46%, #00212a 100%);
}

body.home .qwd2-tool-focus.qwc-row {
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	align-items: center;
	gap: 2rem;
	padding-block: clamp(2.4rem, 3.6vw, 3.4rem);
}

/*
 * Left as normal block flow on purpose. Making the column a flex column turns
 * every Divi module into a flex item, at which point `display: inline-block` on
 * the two button wrappers is ignored and the pair stacks. The board sets them
 * side by side.
 */
body.home .qwd2-focus-copy-column {
	display: block;
}

body.home .qwd2-focus-copy .qwd2-kicker-rule {
	color: #fff;
}

body.home .qwd2-focus-copy h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 3.4vw, 3.05rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-transform: uppercase;
}

body.home .qwd2-focus-intro {
	max-width: 21rem;
	margin: 1.35rem 0 0;
	color: rgb(255 255 255 / 76%);
	font-size: 0.97rem;
	line-height: 1.55;
}

/*
 * Two actions sit side by side on the board. Divi wraps each button in its own
 * block-level module wrapper, so they stack unless the wrappers are made inline.
 */
body.home .qwd2-focus-copy-column .qwc-button-wrap {
	display: inline-block;
	margin: 1.9rem 0.75rem 0 0;
}

body.home .qwd2-focus-copy-column a.qwd2-button--onteal.qwc-button {
	border: 1px solid #fff;
	background: #f7f6f2;
	color: var(--qwp-ink);
}

/* Both actions carry the board's arrow. Divi hides it until hover by default. */
body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button {
	display: inline-flex !important;
	max-width: none !important;
	/* Divi's flex module sets `flex-direction: column`, which put the arrow on
	 * its own line under the label in both buttons. */
	flex-direction: row !important;
	align-items: center;
	gap: 1.15rem;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

body.home a.qwd2-button--outline.qwc-button {
	border: 1px solid rgb(255 255 255 / 45%);
	background: none;
	color: #fff;
}

body.home a.qwd2-button--outline.qwc-button:hover {
	border-color: #fff;
	background: rgb(255 255 255 / 8%);
}

body.home .qwd2-focus-stage {
	display: flex;
	justify-content: center;
}

body.home .qwd2-focus-product img {
	width: 100%;
	max-width: 30rem;
	height: auto;
	filter: drop-shadow(0 30px 34px rgb(0 0 0 / 45%));
	object-fit: contain;
}

/* --- §6 A good place to start -------------------------------------------- */

body.home .qwd2-section.qwd2-starter {
	background: var(--qwp-paper);
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

body.home .qwd2-starter-heading-row.qwc-row,
body.home .qwd2-starter-row.qwc-row {
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	padding: 0;
}

body.home .qwd2-starter-heading h2 {
	margin: 0 0 1.8rem;
	color: var(--qwp-ink);
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/*
 * The board's third column is wider than the two cards — it holds a heading,
 * two lines of copy, four labelled tiles and a full-width action. Divi's
 * `1_3,1_3,1_3` gives three equal columns, so the ratio is restated on the grid
 * rather than by asking Divi for a structure it does not have.
 */
body.home .qwd2-starter-row.qwc-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1.12fr;
	align-items: stretch;
	gap: 1.5rem;
}

body.home .qwd2-starter-row > .qwc-column {
	width: auto !important;
	max-width: none !important;
	margin: 0;
}

body.home .qwd2-starter-card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.6rem 1.5rem;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-white);
}

body.home .qwd2-starter-image {
	display: block;
	margin: 0 0 1.6rem;
}

body.home .qwd2-starter-image img {
	display: block;
	width: 100%;
	height: 11.5rem;
	object-fit: contain;
	object-position: center;
}

body.home .qwd2-starter-copy {
	margin-top: auto;
}

body.home .qwd2-starter-copy h3 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 1.12rem;
	font-weight: 900;
	letter-spacing: -0.01em;
}

body.home .qwd2-starter-category {
	margin: 0.3rem 0 1.3rem;
	color: var(--qwp-teal-dark);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

body.home .qwd2-starter-action a {
	color: var(--qwp-teal-dark);
	font-size: 0.88rem;
	font-weight: 800;
	text-decoration: none;
}

body.home .qwd2-starter-action a:hover {
	text-decoration: underline;
}

/* Gateway — a way into the range, deliberately not shaped like a product card. */
body.home .qwd2-gateway {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.9rem;
	background: linear-gradient(155deg, #0b3a42 0%, #052a31 62%, #021f26 100%);
}

body.home .qwd2-gateway-copy h3 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.25rem, 1.9vw, 1.62rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-transform: uppercase;
}

/*
 * Specificity, matched not escalated: the starter section's paper-ground text
 * colour is set at (0,3,1) and outranked this rule at (0,2,1), painting the
 * gateway's subcopy near-black on dark teal — legible only as a shadow.
 */
body.home .qwd2-gateway .qwd2-gateway-copy p {
	margin: 0.85rem 0 0;
	color: rgb(255 255 255 / 72%);
	font-size: 0.9rem;
	line-height: 1.5;
}

body.home .qwd2-gateway-tiles {
	display: grid;
	margin: 1.7rem 0 0;
	gap: 0.7rem;
	grid-template-columns: repeat(4, 1fr);
}

body.home .qwd2-gateway-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
}

body.home .qwd2-gateway-icon {
	display: block;
	width: 2.1rem;
	height: 2.1rem;
	color: rgb(255 255 255 / 88%);
}

body.home .qwd2-gateway-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.home .qwd2-gateway-label {
	color: rgb(255 255 255 / 78%);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
}

body.home .qwd2-gateway .qwc-button-wrap {
	width: 100%;
	margin-top: auto;
	padding-top: 1.7rem;
}

body.home .qwd2-gateway a.qwd2-button.qwc-button {
	display: flex !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	/* Divi's flex module defaults to `column`, which stacked the arrow under the
	 * label and doubled the button's height. */
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between !important;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

body.home .qwd2-gateway a.qwd2-button.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

@media (max-width: 980px) {
	body.home .qwd2-tool-focus.qwc-row {
		flex-direction: column;
	}

	body.home .qwd2-focus-product img {
		max-width: 22rem;
	}

	body.home .qwd2-starter-row.qwc-row {
		grid-template-columns: 1fr;
	}
}


/*
 * ---------------------------------------------------------------------------
 * §4 corrections, §7 comparison, §9 dealer, §10 support — against the board.
 * ---------------------------------------------------------------------------
 */

/* --- §4 Why QWATT: warm paper ground, and the board's line icons ---------- */

/*
 * The band had drifted to a cool blue-white. The board's trust strip sits on
 * the same warm paper as the rest of the light page; a cooler ground made it
 * read as a separate inserted panel.
 */
body.home .qwd2-section.qwd2-why {
	background: var(--qwp-paper);
}

/*
 * The board sets a line icon above each of the three titles. They are drawn
 * here rather than added to the migration because they are decoration on an
 * existing, owner-approved trust point — adding them as content would put three
 * more editable modules in front of copy that is deliberately fixed.
 */
body.home .qwd2-why-point::before {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: 1rem;
	background: currentcolor;
	color: var(--qwp-teal-dark);
	content: "";
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

body.home .qwd2-why-row > .qwc-column:nth-child(1) .qwd2-why-point::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6M9 8.5h2'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6M9 8.5h2'/%3E%3C/svg%3E");
}

body.home .qwd2-why-row > .qwc-column:nth-child(2) .qwd2-why-point::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3a4.5 4.5 0 0 0-4.2 6.1L3.6 16.8a1.9 1.9 0 0 0 2.7 2.7l7.7-7.7A4.5 4.5 0 0 0 19.8 5.6l-2.6 2.6-2.3-.6-.6-2.3 2.6-2.6A4.6 4.6 0 0 0 15.5 3z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3a4.5 4.5 0 0 0-4.2 6.1L3.6 16.8a1.9 1.9 0 0 0 2.7 2.7l7.7-7.7A4.5 4.5 0 0 0 19.8 5.6l-2.6 2.6-2.3-.6-.6-2.3 2.6-2.6A4.6 4.6 0 0 0 15.5 3z'/%3E%3C/svg%3E");
}

body.home .qwd2-why-row > .qwc-column:nth-child(3) .qwd2-why-point::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.6 6.5-10.4A6.5 6.5 0 0 0 5.5 10.6C5.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.4' r='2.4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.6 6.5-10.4A6.5 6.5 0 0 0 5.5 10.6C5.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.4' r='2.4'/%3E%3C/svg%3E");
}

/* --- §7 Same wheel. Different switch. ------------------------------------ */

/*
 * Warm sand, sampled off the board — a half-step darker than the paper either
 * side of it, which is what separates this band without another colour.
 */
body.home .qwd2-section.qwd2-comparison {
	background: #e4ded4;
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

body.home .qwd2-comparison-row.qwc-row {
	display: flex !important;
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	align-items: center;
	gap: 3rem;
	padding: 0;
}

body.home .qwd2-comparison-copy h2 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-transform: uppercase;
}

body.home .qwd2-comparison-copy p {
	max-width: 17rem;
	margin: 1rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

body.home .qwd2-comparison-copy-column .qwc-button-wrap {
	margin-top: 1.7rem;
}

body.home a.qwd2-button--ink.qwc-button {
	display: inline-flex !important;
	max-width: none !important;
	flex-direction: row !important;
	align-items: center;
	border: 0;
	background: #10151a;
	color: #fff;
	gap: 1.4rem;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

body.home a.qwd2-button--ink.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

body.home .qwd2-comparison-table-wrap {
	padding: 1.6rem 1.8rem;
	background: #f4f1eb;
}

body.home .qwatt-comparison-table {
	width: 100%;
	border-collapse: collapse;
}

body.home .qwatt-comparison-table th,
body.home .qwatt-comparison-table td {
	padding: 0.85rem 0.9rem;
	border: 0;
	border-bottom: 1px solid rgb(16 40 45 / 10%);
	text-align: center;
}

body.home .qwatt-comparison-table tbody tr:last-child th,
body.home .qwatt-comparison-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Row labels are quiet; the values are what the reader is comparing. */
body.home .qwatt-comparison-table tbody th[scope="row"] {
	color: var(--qwp-muted);
	font-size: 0.86rem;
	font-weight: 500;
	text-align: left;
}

body.home .qwatt-comparison-table thead th a {
	color: var(--qwp-ink);
	font-size: 0.92rem;
	font-weight: 850;
	letter-spacing: 0.02em;
	text-decoration: none;
}

body.home .qwatt-comparison-table td {
	color: var(--qwp-ink);
	font-size: 0.92rem;
	font-weight: 800;
}

/*
 * The board rules between the model columns, not around every cell. One hairline
 * on the left of each value column after the first does it.
 */
body.home .qwatt-comparison-table tr > *:not(:first-child):not(:nth-child(2)) {
	border-left: 1px solid rgb(16 40 45 / 10%);
}

/*
 * Copper marks a value that differs from the first model listed. Rows where
 * every product agrees carry no mark, which is the whole point: the eye should
 * land on the switch position and not on the wheel diameter.
 */
body.home .qwatt-comparison-table td.qwatt-compare-differs {
	color: var(--qwp-copper);
}

/* --- §9 Found your tool? ------------------------------------------------- */

body.home .qwd2-section.qwd2-support {
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 60%, #021d23 100%);
	padding-block: clamp(2.6rem, 4vw, 3.6rem) 0;
}

body.home .qwd2-dealer-row.qwc-row,
body.home .qwd2-support-row.qwc-row {
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	padding: 0;
}

body.home .qwd2-dealer-row.qwc-row {
	display: flex !important;
	align-items: center;
	gap: 2.5rem;
}

body.home .qwd2-dealer-copy h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

body.home .qwd2-dealer-copy p {
	max-width: 24rem;
	margin: 0.8rem 0 0;
	color: rgb(255 255 255 / 72%);
	font-size: 0.92rem;
	line-height: 1.5;
}

body.home .qwd2-dealer-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.7rem;
}

body.home .qwd2-dealer-input {
	min-width: 0;
	height: 46px;
	padding: 0 0.95rem;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 2px;
	background: rgb(255 255 255 / 6%);
	color: #fff;
	font-size: 0.88rem;
}

body.home .qwd2-dealer-input--area {
	flex: 1 1 11rem;
	border-color: #fff;
	background: #fff;
	color: var(--qwp-ink);
}

body.home .qwd2-dealer-input--model {
	flex: 0 1 9rem;
}

body.home .qwd2-dealer-input::placeholder {
	color: rgb(255 255 255 / 62%);
}

body.home .qwd2-dealer-input--area::placeholder {
	color: #7c8a8c;
}

body.home .qwd2-dealer-submit {
	display: inline-flex;
	height: 46px;
	align-items: center;
	padding: 0 1.15rem;
	border: 0;
	border-radius: 2px;
	background: var(--qwp-copper);
	color: #fff;
	cursor: pointer;
	font-size: 0.88rem;
	font-weight: 850;
	gap: 0.8rem;
}

body.home .qwd2-dealer-submit:hover {
	background: #c26c2a;
}

body.home .qwd2-dealer-whatsapp {
	margin: 0.7rem 0 0;
}

/* WhatsApp green is the platform's own recognition cue, not a QWATT colour. */
body.home .qwd2-dealer-whatsapp a {
	display: inline-flex;
	height: 46px;
	align-items: center;
	padding: 0 1.15rem;
	border-radius: 2px;
	background: #25a244;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 850;
	gap: 0.6rem;
	text-decoration: none;
}

body.home .qwd2-dealer-whatsapp a:hover {
	background: #1f8c3a;
}

body.home .qwd2-whatsapp-glyph svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- §10 Support strip, paper over the band ------------------------------ */

body.home .qwd2-support-row.qwc-row {
	display: grid !important;
	margin-top: clamp(2rem, 3.4vw, 3rem);
	background: var(--qwp-paper);
	grid-template-columns: repeat(3, 1fr);
}

body.home .qwd2-support-row > .qwc-column {
	width: auto !important;
	max-width: none !important;
	margin: 0;
}

body.home .qwd2-support-row > .qwc-column:not(:last-child) {
	border-right: 1px solid rgb(16 40 45 / 12%);
}

body.home .qwd2-support-item {
	display: flex;
	padding: 1.5rem 1.6rem;
	gap: 1rem;
}

body.home .qwd2-support-icon svg {
	display: block;
	width: 2.3rem;
	height: 2.3rem;
	fill: none;
	stroke: var(--qwp-teal-dark);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.home .qwd2-support-body {
	display: flex;
	flex-direction: column;
}

body.home .qwd2-support-body strong {
	color: var(--qwp-ink);
	font-size: 0.98rem;
	font-weight: 850;
}

body.home .qwd2-support-note {
	max-width: 12rem;
	margin: 0.35rem 0 0.7rem;
	color: var(--qwp-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

body.home .qwd2-support-body a {
	color: var(--qwp-teal-dark);
	font-size: 0.85rem;
	font-weight: 800;
	text-decoration: none;
}

body.home .qwd2-support-body a:hover {
	text-decoration: underline;
}

@media (max-width: 980px) {
	body.home .qwd2-comparison-row.qwc-row,
	body.home .qwd2-dealer-row.qwc-row {
		flex-direction: column;
		align-items: stretch;
		gap: 1.6rem;
	}

	/*
	 * `flex: 0 0 42%` and `flex: 0 0 34%` were written for a ROW. Once the
	 * direction flips to column, flex-basis resolves against the cross axis —
	 * height — so both copy columns were handed a fixed fraction of the row's
	 * height and their neighbours overflowed the section entirely. At 390 and
	 * 768 the dealer band rendered straight through the comparison table.
	 *
	 * Any fixed basis has to be released at the breakpoint that flips the axis.
	 * Stated as `auto` rather than re-derived, because in a stacked column
	 * every child is full width and there is nothing left to divide.
	 */
	body.home .qwd2-comparison-row > .qwc-column,
	body.home .qwd2-dealer-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}

	/* Nowrap protects a one-line label at desktop; at 390 it overflows. */
	body.home a.qwd2-button--ink.qwc-button {
		white-space: normal;
	}

	body.home .qwd2-support-row.qwc-row {
		grid-template-columns: 1fr;
	}

	body.home .qwd2-support-row > .qwc-column:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid rgb(16 40 45 / 12%);
	}

	body.home .qwd2-dealer-input--model {
		flex: 1 1 8rem;
	}
}


/*
 * ---------------------------------------------------------------------------
 * Board-fidelity corrections found by looking at §7, §9 and §10 in the browser.
 * ---------------------------------------------------------------------------
 */

/*
 * The dealer band's four controls belong on one row. WhatsApp sits in its own
 * paragraph in the markup — correct for a screen reader, since it is a message
 * route and not part of the lookup form — but that made it a block and it
 * always dropped to a second line. Laying the wrapper out as a flex row puts it
 * beside the form without pulling it inside a form it does not submit.
 */
/*
 * Divi puts an `.qwc-text-inner` between a text module and its content, so
 * `.qwd2-dealer-controls` has exactly one child and laying IT out as a flex row
 * did nothing at all. This is why two attempts at the wrap behaviour changed
 * nothing: they were being applied to a box with a single item in it. The row
 * has to be declared on the inner wrapper.
 */
body.home .qwd2-dealer-controls > .qwc-text-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
}

/*
 * Wrapping was the wrong tool here and cost two attempts. `flex: 1 1 auto` on
 * the form made it claim the whole wrapper and push WhatsApp to a second line;
 * `flex: 0 1 auto` let it shrink to ~358px and wrap internally into three.
 *
 * The board's row does not wrap at desktop at all, so say that: nothing wraps,
 * every control may shrink, and the row stacks wholesale at the breakpoint.
 * A single line that shrinks is easier to reason about than four items
 * negotiating two levels of wrap.
 */
body.home .qwd2-dealer-controls > .qwc-text-inner {
	flex-wrap: nowrap;
}

body.home .qwd2-dealer-form {
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: nowrap;
}

body.home .qwd2-dealer-whatsapp {
	flex: 0 0 auto;
}

body.home .qwd2-dealer-submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * `flex: 0 1 36%` still gave the copy only 307px, because the controls column's
 * `auto` basis is its ~880px nowrap content and the copy was the only item
 * allowed to shrink. "FOUND YOUR TOOL?" needs ~340px and broke in two.
 *
 * The copy's share is fixed and the controls absorb from zero, so the shrinking
 * happens where it was designed to happen — inside the two inputs, which carry
 * `min-width: 0` for exactly this.
 */
body.home .qwd2-dealer-row > .qwd2-dealer-copy-column {
	flex: 0 0 34%;
}

body.home .qwd2-dealer-row > .qwd2-dealer-controls-column {
	min-width: 0;
	flex: 1 1 0;
}

body.home .qwd2-dealer-whatsapp {
	margin: 0;
}

body.home .qwd2-dealer-input--area {
	min-width: 0;
	flex: 1 1 11rem;
}

/* 8rem clipped "Model (optional)" mid-word in the placeholder. */
body.home .qwd2-dealer-input--model {
	min-width: 0;
	flex: 1 1 9.5rem;
}

@media (max-width: 980px) {
	/* Stacked, wrapping is right again — there is no single line to protect. */
	body.home .qwd2-dealer-controls > .qwc-text-inner,
	body.home .qwd2-dealer-form {
		flex-wrap: wrap;
	}
}

/* The rule was sitting on the cap-line of the heading beneath it. */
body.home .qwd2-rule-only {
	margin-bottom: 1.35rem;
}

body.home .qwd2-comparison-copy .qwd2-rule-only {
	width: 2.1rem;
	height: 3px;
	min-height: 0;
	margin-bottom: 1.1rem;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

/*
 * The comparison table starts further left on the board than a plain 2_5/3_5
 * split puts it. Widen the copy's share slightly and let the table take the
 * rest, rather than pushing the table over with a margin it would then lose at
 * the stacked breakpoint.
 */
/*
 * Fixed share, same reasoning as the dealer row: the table column's `auto`
 * basis is wide, so a shrinkable copy column collapses to ~290px and breaks
 * "SAME WHEEL. DIFFERENT SWITCH." over three lines. The board holds it on one,
 * which needs about 500px.
 */
body.home .qwd2-comparison-row > .qwd2-comparison-copy-column {
	flex: 0 0 42%;
}

body.home .qwd2-comparison-row > .qwd2-comparison-table-column {
	min-width: 0;
	flex: 1 1 0;
}

/* The action is two words on the board, not a two-line block. */
body.home a.qwd2-button--ink.qwc-button {
	white-space: nowrap;
}


/*
 * ---------------------------------------------------------------------------
 * Header search and footer — against 00_HOMEPAGE_BOARD_AUTHORITY.png.
 * Global, not `body.home`: the shell is on every page.
 * ---------------------------------------------------------------------------
 */

.qwd2-header-row.qwc-row {
	width: 100% !important;
	max-width: 1440px !important;
	align-items: center;
	gap: 1.5rem;
	padding-inline: clamp(1.2rem, 3vw, 2.6rem);
}

/*
 * A note worth keeping. The first attempt at this header used a two-column
 * `3_4,1_4` row with `flexType: 17_24` on the nav column. Divi emitted the class
 * `et_flex_column_17_24` and no rule to go with it, so the column computed to
 * 0px and the logo and the entire primary navigation vanished — the search
 * field was all that was left of the header. `n_24` looked like a general
 * pattern because the shipped shell used 5, 6, 7, 12 and 19. It is not one, and
 * a CSS override on the column did not bring the menu back either.
 *
 * Reverted to the three-column structure that was already proven in this
 * template, with the search module simply taking the slot the dealer pill used
 * to occupy. Not worth inventing a column geometry for a header that fails
 * silently and completely when the guess is wrong.
 */
.qwd2-header-search-column {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.qwd2-header-search-module {
	margin: 0;
}

.qwd2-header-search {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}

.qwd2-header-search-field {
	width: 100%;
	max-width: 15rem;
	min-width: 0;
	height: 40px;
	padding: 0 0.85rem;
	border: 0;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: var(--qwp-ink);
	font-size: 0.85rem;
}

.qwd2-header-search-field::placeholder {
	color: #8a9698;
}

.qwd2-header-search-submit {
	display: grid;
	width: 44px;
	height: 40px;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: var(--qwp-teal-dark);
	color: #fff;
	cursor: pointer;
	place-items: center;
}

.qwd2-header-search-submit:hover {
	background: var(--qwp-teal);
}

.qwd2-header-search-submit svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/*
 * The search field is desktop-only. On mobile the board collapses the header to
 * the mark and a hamburger, and a search field wedged beside them would take a
 * third of the bar to save one tap from inside the menu.
 */
@media (max-width: 980px) {
	.qwd2-header-search-column {
		display: none !important;
	}
}

/* --- Footer -------------------------------------------------------------- */

.qwd2-footer.qwc-section {
	background: #08090a;
	padding-block: clamp(2.4rem, 4vw, 3.4rem) clamp(1.4rem, 2vw, 1.8rem);
}

.qwd2-footer-row.qwc-row,
.qwd2-footer-legal-row.qwc-row {
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	padding: 0;
}

.qwd2-footer-row.qwc-row {
	display: flex !important;
	align-items: flex-start;
	gap: 2rem;
}

.qwd2-footer-brand {
	flex: 0 0 22%;
}

.qwd2-footer-links {
	flex: 1 1 0;
	min-width: 0;
}

.qwd2-footer-logo img {
	width: auto;
	max-width: 11rem;
	height: auto;
}

.qwd2-footer .qwd2-footer-heading {
	margin: 0 0 0.9rem;
	color: #fff;
	font-size: 0.74rem;
	font-weight: 850;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.qwd2-footer .qwd2-footer-links p {
	margin: 0;
	line-height: 2;
}

/*
 * DUAL MARKUP: the footer link columns render as EITHER <p>+<br> OR <ul><li>.
 * Added 2026-08-08, step 1 of the launch conversion.
 *
 * Which one appears depends on whether the owner has assigned a menu to that
 * column's location in Appearance > Menus. Both must look identical, or the
 * footer changes shape the moment somebody edits a link — a change nobody asked
 * for, arriving as a side effect of a link edit, which is the worst way to find
 * out about a layout regression.
 *
 * `line-height: 2` on the <li> reproduces the rhythm the <br>-separated <p> got
 * from its own line-height, so the two shapes occupy the same vertical space.
 */
/*
 * THE ID IS IN THESE SELECTORS ON PURPOSE, AND IT IS THE SAME LESSON THIS FILE
 * ALREADY LEARNED ONCE — see the note above the product-list rules further down.
 *
 * Divi ships a list rule whose selector list reads
 *
 *     #left-area ul, .entry-content ul, .qwc-layout-body ul, …  { list-style: disc; padding-left: 1em }
 *
 * `#left-area ul` is (1,0,1). An ID outranks any number of classes, so a
 * class-only reset loses no matter where it sits in the file. The footer is
 * `.qwc-layout-footer`, not `.qwc-layout-body`, and it is not inside `#left-area` — so on
 * a reading of the selectors above, the footer should not be hit at all.
 *
 * "Should not be hit" is a prediction, and the ellipsis in that selector list is
 * doing unknown work. Scoping to `#page-container`, which header.php opens
 * around the entire document, makes these (1,2,0) and therefore immune to any
 * (1,0,1) rule Divi has, whether or not the prediction is right.
 *
 * Matching the ID rather than reaching for `!important` is deliberate: the same
 * choice, for the same reason, as the product-list fix. `!important` would take
 * the override away from whoever needs it next.
 *
 * THIS IS REASONING, NOT A MEASUREMENT. It must be confirmed in the browser
 * before this ships — `bin/divi-scaffolding.sh` for computed properties and
 * `bin/visual-gate.sh compare` for the visual result.
 */
#page-container .qwd2-footer .qwd2-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#page-container .qwd2-footer .qwd2-footer-links .qwd2-footer-menu li {
	margin: 0;
	padding: 0;
	line-height: 2;
	list-style: none;
}

/*
 * The legal row is the exception: flex, not stacked.
 *
 * IT DELIBERATELY DOES NOT RESTATE display, gap OR justify-content. The existing
 * `.qwd2-footer .qwd2-footer-legal` rule below already sets all three, and a
 * class selector matches the <ul> exactly as well as it matched the <p>.
 *
 * Restating them here would have been the bug. `.qwd2-footer ul.qwd2-footer-legal`
 * is specificity (0,2,1); the `@media (max-width: 980px)` override that switches
 * the row to `justify-content: flex-start` is (0,2,0). The higher-specificity
 * rule wins REGARDLESS of the media query, so hard-coding flex-end here would
 * have pinned the legal links to the right on mobile and quietly undone a
 * responsive rule that has been correct all along.
 *
 * So this adds only what a <ul> needs and a <p> did not.
 */
#page-container .qwd2-footer ul.qwd2-footer-legal {
	padding: 0;
	list-style: none;
}

#page-container .qwd2-footer ul.qwd2-footer-legal li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qwd2-footer .qwd2-footer-links a {
	color: rgb(255 255 255 / 62%);
	font-size: 0.86rem;
	text-decoration: none;
}

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

.qwd2-footer-legal-row.qwc-row {
	margin-top: clamp(2rem, 3vw, 2.8rem);
	border-top: 1px solid rgb(255 255 255 / 10%);
	padding-top: 1.2rem;
}

.qwd2-footer .qwd2-footer-legal {
	display: flex;
	margin: 0;
	gap: 2rem;
	justify-content: flex-end;
}

.qwd2-footer .qwd2-footer-legal a {
	color: rgb(255 255 255 / 55%);
	font-size: 0.8rem;
	text-decoration: none;
}

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

@media (max-width: 980px) {
	.qwd2-footer-row.qwc-row {
		flex-wrap: wrap;
	}

	.qwd2-footer-brand {
		flex: 0 0 100%;
	}

	.qwd2-footer-links {
		flex: 1 1 44%;
	}

	.qwd2-footer .qwd2-footer-legal {
		justify-content: flex-start;
	}
}


/*
 * Small-screen gutter.
 *
 * Several of the rows rebuilt against the board carry `padding: 0 !important`,
 * which is right at desktop where the 1200px rail supplies the margin, and
 * wrong below it: at 390 the copy, the table and the buttons all sat flush
 * against the left edge of the screen with nothing between them and the bezel.
 *
 * Applied to the rows rather than the sections so the full-bleed grounds — the
 * teal band, the sand band, the hero stage — keep running edge to edge.
 */
@media (max-width: 980px) {
	body.home .qwd2-comparison-row.qwc-row,
	body.home .qwd2-dealer-row.qwc-row,
	body.home .qwd2-support-row.qwc-row,
	body.home .qwd2-starter-row.qwc-row,
	body.home .qwd2-starter-heading-row.qwc-row,
	body.home .qwd2-tool-focus.qwc-row,
	.qwd2-footer-row.qwc-row,
	.qwd2-footer-legal-row.qwc-row {
		padding-inline: clamp(1.1rem, 4vw, 2rem);
	}

	/* The support strip is a paper card; its own padding is the gutter. */
	body.home .qwd2-support-row.qwc-row {
		margin-inline: clamp(1.1rem, 4vw, 2rem);
		padding-inline: 0;
	}
}


/*
 * ---------------------------------------------------------------------------
 * 1024 corrections — the band between the stacked breakpoint and the full rail.
 * ---------------------------------------------------------------------------
 *
 * 980–1240px was the gap nobody had looked at. Above 980 the desktop layout
 * applies; below ~1240 the 1200px rail is wider than the viewport. The result
 * at 1024: every section ran flush to both edges, and the dealer row — which is
 * deliberately nowrap at desktop — pushed "Ask on WhatsApp" off the right of
 * the screen and squeezed both placeholders to "Enter PIN code c".
 */
@media (max-width: 1240px) {
	body.home .qwd2-comparison-row.qwc-row,
	body.home .qwd2-dealer-row.qwc-row,
	body.home .qwd2-support-row.qwc-row,
	body.home .qwd2-starter-row.qwc-row,
	body.home .qwd2-starter-heading-row.qwc-row,
	body.home .qwd2-tool-focus.qwc-row,
	body.home .qwd2-why-row.qwc-row,
	body.home .qwd2-why-heading-row.qwc-row,
	.qwd2-footer-row.qwc-row,
	.qwd2-footer-legal-row.qwc-row {
		padding-inline: clamp(1.1rem, 3vw, 2.4rem);
	}
}

/*
 * The dealer row's nowrap is a desktop-rail decision, not a general one. It is
 * only correct where there is room for four controls on one line, which is the
 * full rail and not a step below it.
 */
@media (max-width: 1240px) and (min-width: 981px) {
	body.home .qwd2-dealer-controls > .qwc-text-inner,
	body.home .qwd2-dealer-form {
		flex-wrap: wrap;
	}

	body.home .qwd2-dealer-row > .qwd2-dealer-copy-column {
		flex: 0 0 30%;
	}
}

/*
 * The footer mark needs the same inversion the header mark already uses — the
 * supplied asset is dark, and on the board's black footer it was legible only
 * as a slightly darker shape. Same treatment, same asset, no new artwork: the
 * logo is not redrawn, recoloured or replaced, only rendered as the monochrome
 * reverse the dark ground requires.
 */
.qwd2-footer-logo img {
	filter: brightness(0) invert(1);
}


/*
 * ===========================================================================
 * Detailing pass, 2026-08-04 — owner review of the built page.
 * ===========================================================================
 */

/* --- Arrows --------------------------------------------------------------
 *
 * Divi's button arrow is a glyph from its own icon font, positioned absolutely
 * and revealed on hover. Every place a button was made flex, that glyph became
 * a flex item carrying the button's line-height and its own font metrics, so it
 * sat high, sat small, or sat on a second line. It has been patched three times
 * in three different rules.
 *
 * Replaced once, here, for every button that takes one: the font glyph is
 * suppressed and a drawn arrow is set as a mask on the pseudo-element. A mask
 * has no baseline and no font metrics, so it centres like a box because it is
 * one, at every size and in every button on the page.
 */
body.home a.qwd2-button.qwc-button::after,
body.home .qwd2-gateway a.qwd2-button.qwc-button::after,
body.home a.qwd2-button--ink.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

/* Inline text arrows in links, matched to the same drawn form. */
body.home .qwd2-starter-action a span[aria-hidden],
body.home .qwd2-support-body a span[aria-hidden],
body.home .qwd2-catalogue-secondary a span[aria-hidden],
body.home .qwd2-dealer-submit span[aria-hidden] {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	background: currentcolor;
	text-indent: -999em;
	vertical-align: -0.15em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The hero task rows keep a chevron, as on the board — a different mark. */
body.home .qwd2-task-arrow {
	display: block;
	width: 0.72rem;
	height: 0.72rem;
	background: currentcolor;
	color: rgb(16 40 45 / 38%);
	font-size: 0;
	text-indent: -999em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- §4 Why QWATT: alignment ---------------------------------------------
 *
 * The three blocks were top-aligned only by accident — each is a separate Divi
 * module in a separate column, so the icon, the title and the body all sat
 * wherever their own text length put them, and the dividers ran the full column
 * height regardless of content. Given a shared grid, the three rows line up
 * across all three columns whatever the copy does.
 */
body.home .qwd2-why-row.qwc-row {
	display: grid !important;
	align-items: stretch;
	gap: 0;
	grid-template-columns: repeat(3, 1fr);
}

body.home .qwd2-why-row > .qwc-column {
	display: grid;
	width: auto !important;
	max-width: none !important;
	margin: 0;
	grid-template-rows: subgrid;
	grid-row: span 3;
}

body.home .qwd2-why-point {
	display: grid !important;
	padding: 0 2.6rem 0 0;
	gap: 0;
	grid-row: span 3;
	grid-template-rows: subgrid;
}

/* Fallback where subgrid is unavailable: fixed rows still line the three up. */
@supports not (grid-template-rows: subgrid) {
	body.home .qwd2-why-row > .qwc-column,
	body.home .qwd2-why-point {
		display: block;
	}

	body.home .qwd2-why-point::before {
		height: 2.4rem;
	}

	body.home .qwd2-why-point h3 {
		min-height: 2.6rem;
	}
}

body.home .qwd2-why-point::before {
	margin-bottom: 1.1rem;
}

body.home .qwd2-why-point h3 {
	margin: 0 0 0.6rem;
	align-self: start;
	font-size: 1.06rem;
	font-weight: 850;
	letter-spacing: -0.01em;
}

body.home .qwd2-why-point p {
	max-width: 17rem;
	margin: 0;
	align-self: start;
	color: var(--qwp-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* --- §6 A good place to start: image sizing and card rhythm --------------
 *
 * The two products are photographed at different scales — a 100mm grinder and a
 * pressure washer are not the same size in frame — so `object-fit: contain` in
 * a fixed box left the grinder floating small and high while the washer filled
 * its card. A taller box, centred contain, and a little optical padding give
 * both a consistent presence without resizing either photograph.
 */
body.home .qwd2-starter-card {
	padding: 0 0 1.5rem;
}

body.home .qwd2-starter-image {
	/*
	 * Was `margin: 0 0 1.4rem`. The 1.4rem has never rendered — Divi's own module
	 * CSS has always zeroed it, and the starter cards draw with no gap under the
	 * image. Measured 2026-08-07 with Divi still on. Reduced to `0` rather than
	 * deleted outright, because the rule still needs to beat the browser default.
	 * QWATT-DEC-2026-08-07-001.
	 */
	margin: 0;
	padding: 1.6rem 1.6rem 0;
	background: #fff;
}

body.home .qwd2-starter-image img {
	height: 13.5rem;
	object-fit: contain;
	object-position: center;
}

body.home .qwd2-starter-copy {
	padding-inline: 1.6rem;
}

body.home .qwd2-starter-copy h3 {
	font-size: 1.05rem;
}

body.home .qwd2-starter-category {
	margin: 0.35rem 0 1.15rem;
	font-size: 0.7rem;
}

/* The gateway matches the cards' vertical rhythm rather than floating taller. */
body.home .qwd2-gateway {
	padding: 1.9rem 1.7rem;
}

body.home .qwd2-gateway-tiles {
	margin-top: 1.5rem;
	gap: 0.5rem;
}

body.home .qwd2-gateway-label {
	font-size: 0.62rem;
	line-height: 1.3;
}

/* --- §7 Comparison: the catalogue's alignment ----------------------------
 *
 * Modelled on page 11 of the frozen A4 v1.4.3, which is the house pattern for
 * comparing two models: a coloured rule over each model column, the model name
 * left-aligned beneath it, quiet row labels on the left, and values set left so
 * the eye reads down a column instead of hunting across a centred one.
 *
 * `table-layout: fixed` is what actually fixes the "alignment" complaint: the
 * columns were sizing to their content, so "Top-mounted sliding switch" made
 * one value column half again as wide as the other and nothing lined up.
 */
body.home .qwd2-comparison-table-wrap {
	padding: 1.8rem 2rem 1.6rem;
}

body.home .qwatt-comparison-table {
	table-layout: fixed;
}

body.home .qwatt-comparison-table th,
body.home .qwatt-comparison-table td {
	padding: 0.9rem 1rem;
	text-align: left;
	vertical-align: baseline;
}

body.home .qwatt-comparison-table thead th {
	padding-top: 0.85rem;
	border-bottom: 1px solid rgb(16 40 45 / 14%);
}

body.home .qwatt-comparison-table thead th:nth-child(2) {
	border-top: 3px solid var(--qwp-teal-dark);
}

body.home .qwatt-comparison-table thead th:nth-child(3) {
	border-top: 3px solid var(--qwp-copper);
}

body.home .qwatt-comparison-table thead th:first-child {
	width: 34%;
}

body.home .qwatt-comparison-table tbody th[scope="row"] {
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.home .qwatt-comparison-table td {
	font-size: 0.95rem;
	line-height: 1.35;
}

/* The rule between model columns is the catalogue's, not a full grid. */
body.home .qwatt-comparison-table tr > *:not(:first-child):not(:nth-child(2)) {
	border-left: 0;
}

/* --- §8 Catalogue band --------------------------------------------------- */

body.home .qwd2-section.qwd2-catalogue {
	background: linear-gradient(120deg, #0b3b42 0%, #06303705 0%, #063037 58%, #02222a 100%);
	padding-block: clamp(2.6rem, 4.2vw, 3.8rem);
}

body.home .qwd2-catalogue-row.qwc-row {
	display: flex !important;
	width: 100% !important;
	max-width: var(--qwp-content) !important;
	align-items: center;
	gap: 3rem;
	padding: 0;
}

body.home .qwd2-catalogue-row > .qwd2-catalogue-cover-column {
	flex: 0 0 32%;
}

body.home .qwd2-catalogue-row > .qwd2-catalogue-copy-column {
	min-width: 0;
	flex: 1 1 0;
}

body.home .qwd2-catalogue-cover img {
	display: block;
	width: 100%;
	max-width: 15rem;
	height: auto;
	box-shadow: 0 26px 40px rgb(0 0 0 / 45%);
	transform: rotate(-2.5deg);
}

body.home .qwd2-catalogue-copy .qwd2-kicker-rule {
	color: #fff;
}

body.home .qwd2-catalogue-copy h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
}

body.home .qwd2-catalogue-copy p:not(.qwd2-kicker-rule) {
	max-width: 26rem;
	margin: 1rem 0 0;
	color: rgb(255 255 255 / 74%);
	font-size: 0.95rem;
	line-height: 1.55;
}

body.home a.qwd2-button--copper.qwc-button {
	display: inline-flex !important;
	max-width: none !important;
	align-items: center;
	border: 0;
	background: var(--qwp-copper);
	color: #fff;
	flex-direction: row !important;
	gap: 1.2rem;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.home a.qwd2-button--copper.qwc-button:hover {
	background: #c26c2a;
}

body.home .qwd2-catalogue-copy-column .qwc-button-wrap {
	margin-top: 1.8rem;
}

body.home .qwd2-catalogue-secondary-module {
	margin-top: 1rem;
}

body.home .qwd2-catalogue-secondary a {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
}

body.home .qwd2-catalogue-secondary a:hover {
	text-decoration: underline;
}

/* --- Footer: mark alignment ---------------------------------------------
 *
 * The mark was sitting on the column's text baseline while the four link
 * columns started at their heading cap-height, so it read as dropped. Aligned
 * to the same top edge and sized against the headings rather than the column.
 */
.qwd2-footer-brand {
	display: flex;
	align-items: flex-start;
}

.qwd2-footer-logo {
	margin: 0;
}

.qwd2-footer-logo img {
	display: block;
	width: auto;
	max-width: 10.5rem;
	max-height: 3rem;
	margin: 0;
	object-fit: contain;
	object-position: left top;
}

.qwd2-footer .qwd2-footer-heading--social {
	margin-top: 1.6rem;
}

.qwd2-footer .qwd2-footer-social a {
	color: rgb(255 255 255 / 62%);
	font-size: 0.86rem;
	text-decoration: none;
}

.qwd2-footer .qwd2-footer-social a:hover {
	color: #fff;
}

@media (max-width: 980px) {
	body.home .qwd2-why-row.qwc-row {
		grid-template-columns: 1fr;
	}

	body.home .qwd2-catalogue-row.qwc-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.8rem;
	}

	body.home .qwd2-catalogue-row > .qwc-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}

	body.home .qwd2-catalogue-cover img {
		max-width: 11rem;
	}
}

@media (max-width: 1240px) {
	body.home .qwd2-catalogue-row.qwc-row {
		padding-inline: clamp(1.1rem, 3vw, 2.4rem);
	}
}


/*
 * ===========================================================================
 * Second detailing pass — from walking the built page section by section.
 * ===========================================================================
 */

/*
 * Inline arrows were sitting like superscripts. `vertical-align` is measured
 * from the baseline of the surrounding text, but these are inline-block masks
 * whose own box has no baseline to speak of, so the offset never landed. Set as
 * inline-flex against the line box instead, which is what actually centres them.
 */
body.home .qwd2-starter-action a,
body.home .qwd2-support-body a,
body.home .qwd2-catalogue-secondary a,
body.home .qwd2-story-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

body.home .qwd2-starter-action a span[aria-hidden],
body.home .qwd2-support-body a span[aria-hidden],
body.home .qwd2-catalogue-secondary a span[aria-hidden],
body.home .qwd2-story-link a span[aria-hidden] {
	width: 1em;
	height: 1em;
	vertical-align: baseline;
}

/* --- Workshop Story: the board's closing link ---------------------------- */

body.home .qwd2-story .qwd2-kicker-rule {
	color: rgb(255 255 255 / 78%);
}

body.home .qwd2-story-link-row.qwc-row {
	padding-top: 2.2rem;
}

body.home .qwd2-story-link {
	margin: 0;
	text-align: center;
}

body.home .qwd2-story-link a {
	color: #fff;
	font-size: 0.92rem;
	font-weight: 800;
	text-decoration: none;
}

/* --- §6 starter cards: equalise the two products optically --------------- */

/*
 * The two photographs are framed differently at source — the grinder sits small
 * in a generous margin, the pressure washer nearly fills its frame — so a
 * shared `contain` box rendered one at roughly half the presence of the other.
 *
 * Corrected by modestly scaling the RENDERED IMAGE inside its box. The first
 * pass used 1.32 for the grinder, which enlarged it beyond the media plate and
 * visibly cut off the cable and gear head. Keep the full approved product in
 * frame instead: 1.10 gives it presence without clipping. The asset remains
 * untouched and its aspect ratio is preserved exactly.
 */
body.home .qwd2-starter-card:nth-of-type(1) .qwd2-starter-image img,
body.home .qwd2-starter-row > .qwc-column:nth-child(1) .qwd2-starter-image img {
	transform: scale(1.1);
}

body.home .qwd2-starter-row > .qwc-column:nth-child(2) .qwd2-starter-image img {
	transform: scale(1.02);
}

body.home .qwd2-starter-image {
	overflow: hidden;
}

/* --- §7 comparison: hold the heading on one line ------------------------- */

body.home .qwd2-comparison-row > .qwd2-comparison-copy-column {
	flex: 0 0 46%;
}

body.home .qwd2-comparison-copy h2 {
	font-size: clamp(1.4rem, 2.15vw, 1.85rem);
}

/* --- §8 catalogue band --------------------------------------------------- */

/*
 * The gradient carried a typo — `#06303705 0%`, an eight-digit hex whose last
 * pair read as alpha — which put a pale wash across the left third of the band,
 * directly behind the cover.
 */
body.home .qwd2-section.qwd2-catalogue {
	background: linear-gradient(120deg, #0b3b42 0%, #063037 55%, #02222a 100%);
}

/* --- Footer ---------------------------------------------------------------
 *
 * Divi's rows carried the old dark-teal fill, so the black section showed only
 * in the margins and the footer read as two floating teal slabs. The section
 * owns the ground; the rows are transparent.
 */
.qwd2-footer .qwc-row {
	background: transparent;
}

.qwd2-footer-legal-row.qwc-row {
	margin-top: 1.6rem;
	background: transparent;
}

/* "Terms of Use" was clipped against the right edge. */
.qwd2-footer .qwd2-footer-legal {
	padding-right: 0.1rem;
}

.qwd2-footer-logo img {
	margin-top: -0.35rem;
}

/* Connect sits under Company on the board's last column, not as a fifth. */
.qwd2-footer .qwd2-footer-heading--social {
	margin-top: 1.9rem;
}


/*
 * ===========================================================================
 * Contrast pass — every text/ground pair on the homepage measured, not judged.
 * ===========================================================================
 *
 * Audited by walking every text node, resolving the ground it actually sits on
 * (including through gradients and transparent ancestors), and computing WCAG
 * contrast. Everything below failed AA. `.screen-reader-text` hits appear in
 * such an audit and are false positives — those are clipped to 1px.
 */

/*
 * The kicker sat at `color: inherit`, which on the catalogue band resolved to
 * the ink colour a Divi text module sets — #10282d text on a #063037 ground,
 * a contrast of 1.09. The words were there and nobody could read them.
 *
 * Kickers now state their colour per ground rather than inheriting, because
 * "inherit" on a page with four different grounds is not a colour decision, it
 * is a coin toss.
 */
body.home .qwd2-catalogue-copy .qwd2-kicker-rule,
body.home .qwd2-focus-copy .qwd2-kicker-rule,
body.home .qwd2-story .qwd2-kicker-rule {
	color: rgb(255 255 255 / 88%);
}

body.home .qwd2-starter-heading .qwd2-kicker-rule,
body.home .qwd2-comparison-copy .qwd2-kicker-rule,
body.home .qwd2-why-copy .qwd2-kicker-rule {
	color: var(--qwp-ink);
}

/*
 * A copper for TEXT on light grounds.
 *
 * `--qwp-copper` (#d77b35) is a fine rule and dash colour, and it is what the
 * board uses for those marks. As text it measures 2.75:1 on the comparison
 * card and 2.32:1 on the sand band — well under AA, and it is carrying the one
 * thing that section exists to communicate.
 *
 * The decorative copper is unchanged. This token is only for copper that has to
 * be read.
 */
:root {
	--qwp-copper-text: #a15417;
}

body.home .qwatt-comparison-table td.qwatt-compare-differs {
	color: var(--qwp-copper-text);
}

body.home .qwd2-story-number,
body.home .qwd2-section.qwd2-story .qwd2-story-copy .qwd2-story-number {
	/* Copper numerals sit on near-black, where the lighter copper is fine. */
	color: var(--qwp-copper);
}

/*
 * White on the board's orange measured 3.1:1, and on WhatsApp green 3.32:1 —
 * both under AA for a 14px bold label. Darkened until each passes: 4.99 and
 * 5.03. Both stay unmistakably the same colour; neither is now a button whose
 * label you have to lean in to read.
 */
body.home .qwd2-dealer-submit,
body.home a.qwd2-button--copper.qwc-button {
	background: #ab5a1c;
}

body.home .qwd2-dealer-submit:hover,
body.home a.qwd2-button--copper.qwc-button:hover {
	background: #964d13;
}

body.home .qwd2-dealer-whatsapp a {
	background: #188034;
}

body.home .qwd2-dealer-whatsapp a:hover {
	background: #12752e;
}

/*
 * Muted body copy on the sand band. #597074 on #e4ded4 is 4.0:1 — the muted
 * token was chosen against white paper and the sand band is a half-step darker.
 */
body.home .qwd2-comparison-copy p {
	color: #4a5f63;
}

/* Same reasoning for the gateway and dealer copy on their dark grounds. */
body.home .qwd2-gateway .qwd2-gateway-copy p,
body.home .qwd2-dealer-copy p,
body.home .qwd2-catalogue-copy p:not(.qwd2-kicker-rule),
body.home .qwd2-focus-intro {
	color: rgb(255 255 255 / 82%);
}

body.home .qwd2-gateway-label {
	color: rgb(255 255 255 / 86%);
}

.qwd2-footer .qwd2-footer-links a,
.qwd2-footer .qwd2-footer-social a {
	color: rgb(255 255 255 / 78%);
}

.qwd2-footer .qwd2-footer-legal a {
	color: rgb(255 255 255 / 72%);
}

/* Hero task counts: #597074 on the hero's #f2f0e9 panel is 4.3:1. */
body.home .qwd2-task-row em {
	color: #556b6f;
}


/*
 * Placeholders are text and are held to the same measure.
 *
 * The header search placeholder was #8a9698 on white — 3.04:1. The dealer
 * PIN/city placeholder was #7c8a8c — 3.58:1. Both are the first thing a person
 * reads to work out what the field wants. The placeholders on the dark inputs
 * already measure 5.56:1 and are left alone.
 */
.qwd2-header-search-field::placeholder,
body.home .qwd2-dealer-input--area::placeholder {
	color: #626f71;
	opacity: 1;
}

/*
 * The four gateway labels wrapped to different line counts — "Drilling &
 * Driving" fitted on one, its neighbours took two — so the icons above them
 * sat on a ragged baseline. Reserving two lines squares the row up.
 */
body.home .qwd2-gateway-label {
	display: flex;
	min-height: 2.3em;
	align-items: flex-start;
	justify-content: center;
}

/*
 * Visible focus on everything interactive that this page added. Divi's own
 * focus styles do not reach a bare <form>, <input> or <button>, and the dealer
 * lookup and header search are both keyboard entry points.
 */
.qwd2-header-search-field:focus-visible,
body.home .qwd2-dealer-input:focus-visible,
body.home .qwd2-dealer-submit:focus-visible,
.qwd2-header-search-submit:focus-visible,
body.home .qwd2-task-row:focus-visible,
body.home .qwd2-starter-action a:focus-visible,
body.home .qwd2-support-body a:focus-visible,
body.home .qwd2-story-link a:focus-visible,
body.home .qwd2-catalogue-secondary a:focus-visible,
.qwd2-footer a:focus-visible {
	outline: 3px solid var(--qwp-copper);
	outline-offset: 2px;
}

/*
 * The comparison table is the one thing on this page a person may need to read
 * across on a narrow screen. Let it scroll rather than crushing four columns of
 * specification into 350px, and say so to a screen reader.
 */
@media (max-width: 700px) {
	body.home .qwd2-comparison-table-wrap {
		overflow-x: auto;
		padding-inline: 1.1rem;
		-webkit-overflow-scrolling: touch;
	}

	body.home .qwatt-comparison-table {
		min-width: 30rem;
	}
}


/*
 * Button labels and their arrows share a centre line.
 *
 * The arrow was landing a few pixels high in the two-action buttons. The mask
 * centres correctly as a flex item, but the label carried the button's own
 * line-height, so its glyphs sat low inside a taller line box and the two read
 * as misaligned even though both boxes were centred. Collapsing the line-height
 * and letting padding set the height removes the discrepancy at source.
 */
body.home a.qwd2-button.qwc-button {
	/*
	 * `line-height: 1` was here and HAS NEVER RENDERED. Divi declared
	 * `line-height: 1.7em !important` on its own button rule, so every homepage
	 * button has always drawn at 34px, not 20px. Measured on 2026-08-07 with Divi
	 * still on: computed line-height 34px. Removed rather than kept, because
	 * keeping it would have changed every homepage button the moment Divi went.
	 * The 1.7em now comes from the scaffolding block at the foot of this file.
	 */
	padding-block: 0.95rem;
}

body.home .qwd2-dealer-submit {
	line-height: 1;
}


/*
 * ===========================================================================
 * Owner markup, 2026-08-05 — arrows, Why QWATT dividers, comparison rule.
 * ===========================================================================
 */

/*
 * The arrows were drawn but too light for the labels beside them: a 2px stroke
 * next to an 850-weight label reads as a hairline, and at 1.15rem in a 46px
 * button it looked lost rather than deliberate. Heavier stroke, slightly larger,
 * shorter shaft so the head carries the mark.
 */
body.home a.qwd2-button.qwc-button::after,
body.home .qwd2-gateway a.qwd2-button.qwc-button::after,
body.home a.qwd2-button--ink.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

body.home .qwd2-starter-action a span[aria-hidden],
body.home .qwd2-support-body a span[aria-hidden],
body.home .qwd2-catalogue-secondary a span[aria-hidden],
body.home .qwd2-story-link a span[aria-hidden],
body.home .qwd2-dealer-submit span[aria-hidden] {
	width: 1.15em;
	height: 1.15em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 6.5L18 12l-5.5 5.5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 6.5L18 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The two Tool in Focus actions were cramped against their arrows. */
body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button {
	gap: 1.6rem;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

/*
 * Why QWATT dividers.
 *
 * The rule sat hard against the following column's icon — 27px of clearance
 * where the first column's content had 196px from the section edge — so the
 * three blocks read as unevenly spaced even though the columns were equal. The
 * divider is now a gutter with matched space either side, and it spans the full
 * row rather than stopping where the shortest block's text ends.
 */
body.home .qwd2-why-row > .qwc-column:not(:last-child) .qwd2-why-point {
	border-right: 1px solid rgb(16 40 45 / 14%);
}

body.home .qwd2-why-row > .qwc-column:not(:first-child) .qwd2-why-point {
	padding-left: 2.6rem;
}

body.home .qwd2-why-point {
	padding-right: 2.6rem;
}

body.home .qwd2-why-row > .qwc-column:last-child .qwd2-why-point {
	padding-right: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Gated catalogue request form (/downloads/).
 * ---------------------------------------------------------------------------
 */

.qwatt-catalogue-form {
	max-width: 34rem;
	margin: 0 0 3rem;
	padding: 2rem 2.2rem 2.2rem;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-paper);
}

.qwatt-catalogue-form h2 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.qwatt-catalogue-intro {
	margin: 0.7rem 0 1.6rem;
	color: var(--qwp-muted);
	font-size: 0.95rem;
}

.qwatt-catalogue-field {
	margin: 0 0 1rem;
}

.qwatt-catalogue-field label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--qwp-ink);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.qwatt-catalogue-field input {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	padding: 0 0.9rem;
	border: 1px solid #c8cfc9;
	border-radius: 2px;
	background: #fff;
	color: var(--qwp-ink);
	font-size: 0.95rem;
}

.qwatt-catalogue-field input:focus-visible,
.qwatt-catalogue-consent input:focus-visible,
.qwatt-catalogue-submit button:focus-visible {
	outline: 3px solid var(--qwp-copper);
	outline-offset: 2px;
}

.qwatt-required {
	color: #a15417;
}

.qwatt-catalogue-consent {
	margin: 1.3rem 0 0;
	color: var(--qwp-ink);
	font-size: 0.88rem;
	line-height: 1.5;
}

/*
 * The consent label is inline flow with the box pulled out of it, NOT a grid.
 *
 * It was `display: grid; grid-template-columns: auto 1fr`, which works only if
 * the label contains exactly two things. It contains four: the checkbox, the
 * sentence, a privacy-policy link and the full stop after it — and grid makes
 * an anonymous item of every text run, so the link and the full stop wrapped
 * onto their own rows. The consent notice read as three broken fragments, which
 * on the one control that has to be understood before it is ticked is worse
 * than ugly.
 *
 * Absolute positioning takes the box out of the flow so the sentence stays one
 * sentence, wraps like prose and keeps its link inline, however many inline
 * elements the copy grows to contain.
 */
.qwatt-catalogue-consent label {
	display: block;
	position: relative;
	padding-left: 1.85rem;
}

/*
 * The consent checkbox measured 17x17 CSS px at a 390px viewport.
 *
 * It is a REQUIRED control on a lead form, and on a phone it was the smallest
 * tappable thing on the page — below WCAG 2.2 AA's 24x24 minimum (2.5.8), on the
 * one input a visitor cannot skip. Someone who cannot reliably hit it does not
 * send the form, and QWATT never learns they tried.
 *
 * 1.5rem = 24px, with the label padding widened to match so the text does not
 * ride up against it. The label is already the click target too, which helps,
 * but the box itself has to be hittable.
 */
.qwatt-catalogue-consent label {
	padding-left: 2.35rem;
}

.qwatt-catalogue-consent input[type="checkbox"] {
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--qwp-teal-dark);
}

.qwatt-catalogue-consent label a {
	display: inline;
}

.qwatt-catalogue-consent a {
	color: var(--qwp-teal-dark);
}

.qwatt-catalogue-submit {
	margin: 1.5rem 0 0;
}

.qwatt-catalogue-submit button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 2px;
	background: #ab5a1c;
	color: #fff;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 850;
	gap: 1rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.qwatt-catalogue-submit button:hover {
	background: #964d13;
}

.qwatt-catalogue-submit button span[aria-hidden] {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	background: currentcolor;
	text-indent: -999em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 6.5L18 12l-5.5 5.5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 6.5L18 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qwatt-catalogue-small {
	margin: 1.2rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.8rem;
	line-height: 1.5;
}

.qwatt-catalogue-notice {
	margin: 0 0 1.4rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--qwp-teal-dark);
	background: rgb(8 97 102 / 8%);
	color: var(--qwp-ink);
	font-size: 0.92rem;
}

.qwatt-catalogue-notice--error {
	border-left-color: #a15417;
	background: rgb(161 84 23 / 8%);
}

/* The honeypot is for bots; it must not be reachable by a person or a reader. */
.qwatt-catalogue-hp {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.qwatt-catalogue-form--unavailable {
	max-width: 34rem;
}


/*
 * ===========================================================================
 * Arrow alignment, settled. And /downloads/ split from /manuals/.
 * ===========================================================================
 */

/*
 * The arrow kept sitting a few pixels above the label's centre. `align-self`
 * has now been tried on the pseudo-element twice and both times it depended on
 * the parent's `align-items` surviving whatever Divi sets on `.qwc-button` —
 * which it does not, reliably, across the five different button variants here.
 *
 * `margin-block: auto` centres a flex item on the cross axis regardless of the
 * container's `align-items`. It cannot be overridden by an ancestor because it
 * is not inherited, and it does not care what the label's line box is doing.
 * Belt and braces: the label side is given the same treatment.
 */
body.home a.qwd2-button.qwc-button::after,
body.home .qwd2-gateway a.qwd2-button.qwc-button::after,
body.home a.qwd2-button--ink.qwc-button::after,
body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button::after {
	/* Neutralised: Divi renders the button icon now. */
}

body.home a.qwd2-button.qwc-button {
	align-items: center !important;
}

/* The same guarantee for the inline link arrows. */
body.home .qwd2-starter-action a span[aria-hidden],
body.home .qwd2-support-body a span[aria-hidden],
body.home .qwd2-catalogue-secondary a span[aria-hidden],
body.home .qwd2-story-link a span[aria-hidden],
body.home .qwd2-dealer-submit span[aria-hidden],
.qwatt-catalogue-submit button span[aria-hidden] {
	align-self: center;
	margin-block: auto;
}

/* --- /downloads/ pointer to the manuals page ----------------------------- */

.qwatt-manuals-pointer {
	max-width: 34rem;
	margin: 0 0 3rem;
}

.qwatt-manuals-pointer a {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark);
	font-size: 0.95rem;
	font-weight: 800;
	gap: 0.5rem;
	text-decoration: none;
}

.qwatt-manuals-pointer a:hover {
	text-decoration: underline;
}


/*
 * ===========================================================================
 * Stage 1 — hand the design tabs back to Divi.
 * ===========================================================================
 *
 * 208 `!important` declarations were removed from colour, type, spacing, border
 * and background above. Those are the properties an owner actually reaches for
 * in Divi's design tabs, and while the stylesheet forced them, the builder was
 * inert: you could change a colour and watch nothing happen. That is worse than
 * a locked field, because it looks like it worked.
 *
 * What is left with `!important` is structural — width, flex, display, position,
 * clip-path, grid. Divi's own column and row CSS actively fights those, they are
 * not things a design tab exposes meaningfully, and losing them means the hero
 * wedge and the full-bleed bands collapse.
 *
 * THE ONE COST, and it has to be paid back here.
 *
 * A handful of those colour rules were not decoration — they were the fix for
 * the contrast bugs, and each was written to beat a Divi text-module rule at
 * (0,4,1). Stripped of `!important` and left at (0,3,1) they lose again, and
 * "PRODUCT CATALOGUE" goes back to 1.09:1 on the teal band.
 *
 * They are restored below by SPECIFICITY rather than by force: an extra class
 * in the selector beats Divi's default, but Divi's per-module generated CSS
 * still overrides it. So the contrast floor holds by default, and the owner can
 * still change any of these in the builder. That is the whole point of the
 * exercise — a default, not a lock.
 */
body.home .qwd2-section .qwd2-catalogue-copy .qwd2-kicker-rule,
body.home .qwd2-section .qwd2-focus-copy .qwd2-kicker-rule,
body.home .qwd2-section.qwd2-story .qwd2-story-copy .qwd2-kicker-rule {
	color: rgb(255 255 255 / 88%);
}

body.home .qwd2-section .qwd2-gateway .qwd2-gateway-copy p,
body.home .qwd2-section .qwd2-dealer-copy p,
body.home .qwd2-section .qwd2-catalogue-copy p:not(.qwd2-kicker-rule),
body.home .qwd2-section .qwd2-focus-copy .qwd2-focus-intro {
	color: rgb(255 255 255 / 82%);
}

body.home .qwd2-section.qwd2-story .qwd2-story-copy .qwd2-story-number {
	color: var(--qwp-copper);
}

body.home .qwd2-section .qwd2-task-list .qwd2-task-row em {
	color: #556b6f;
}

body.home .qwd2-section .qwd2-comparison-table-wrap .qwatt-comparison-table td.qwatt-compare-differs {
	color: var(--qwp-copper-text);
}


/*
 * ===========================================================================
 * Stage 2 — Why QWATT and the support strip now use real Divi icon modules.
 * ===========================================================================
 *
 * The icon is a sibling module of its text, not a mask on a pseudo-element and
 * not an inline <svg> buried in HTML. It answers to the icon picker, the colour
 * control and the size control, which is the point.
 *
 * The layout rules below therefore stop styling `::before` and start laying out
 * two real modules. Nothing here sets a colour or a size for the icons: those
 * come from the module's own attributes so the builder owns them.
 */

/* The CSS-drawn Why QWATT icons are retired — the module supplies them now. */
body.home .qwd2-why-point::before {
	content: none;
}

body.home .qwd2-why-column {
	display: flex;
	flex-direction: column;
}

body.home .qwd2-why-icon {
	margin: 0 0 1rem !important;
}

body.home .qwd2-why-icon .qwc-icon {
	line-height: 1;
}

/*
 * Subgrid was aligning icon, title and body across the three columns while all
 * three lived in one module. With the icon split out, the alignment it was
 * providing now comes from the two modules being the same shape in every
 * column, so the subgrid rules are stood down rather than left half-applying.
 */
body.home .qwd2-why-row.qwc-row > .qwc-column,
body.home .qwd2-why-point {
	display: block;
	grid-template-rows: none;
	grid-row: auto;
}

body.home .qwd2-why-point h3 {
	margin: 0 0 0.6rem;
}

/* --- Support strip: icon module above its text module -------------------- */

body.home .qwd2-support-item {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.6rem;
}

body.home .qwd2-support-icon {
	margin: 0 0 0.85rem !important;
}

body.home .qwd2-support-icon .qwc-icon {
	line-height: 1;
}

body.home .qwd2-support-body {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
}

body.home .qwd2-support-body strong {
	color: var(--qwp-ink);
	font-size: 0.98rem;
	font-weight: 850;
}


/*
 * ===========================================================================
 * Button icons belong to Divi.
 * ===========================================================================
 *
 * Every rule that drew, masked or repositioned `a.qwd2-button::after` above is
 * neutralised. The arrow is now Divi's own button icon, set in the module's
 * `button.decoration.button` attribute, which means the icon picker changes it
 * and the colour control colours it.
 *
 * That also ends three rounds of alignment fixes. The glyph was being positioned
 * by Divi and then re-styled by me, so neither of us owned it and each fix moved
 * it somewhere new. Divi owns it; Divi centres it.
 *
 * What is left here is layout only: how wide the button is and where the icon
 * sits relative to the label. No content, no colour, no glyph.
 */
body.home .qwd2-hero-panel a.qwd2-button.qwc-button {
	justify-content: space-between;
}

body.home .qwd2-gateway a.qwd2-button.qwc-button {
	justify-content: space-between;
}

body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button,
body.home a.qwd2-button--ink.qwc-button,
body.home a.qwd2-button--copper.qwc-button {
	justify-content: center;
}

/* Divi positions its button icon absolutely and reveals it on hover by default.
 * `enable: on` / `onHover: off` in the module attributes turns that off, so the
 * only thing the stylesheet still owns is leaving room for it. */
body.home a.qwd2-button.qwc-button {
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}


/*
 * ===========================================================================
 * Regression repair — header ground, button icons, Why QWATT hover.
 * ===========================================================================
 */

/*
 * Header ground.
 *
 * Divi's menu module default really is `#ffffff`, set in its own render
 * attributes. The migration now overrides it on the module, which is the
 * editable place for it — but the page must not depend on a migration having
 * been run to have a readable header.
 *
 * Specificity, not force: (0,3,0) beats Divi's generated single-class rule, and
 * still loses to anything the owner sets in the design tab, which Divi emits
 * with its own higher-priority selector. A safe default that stays overridable.
 */
.qwc-layout-header .qwc-menu-module.qwc-module,
.qwc-layout-header .qwc-menu-module.qwc-module .qwc-menu-inner {
	background-color: transparent;
}

/*
 * Button icons: visible, and on the right.
 *
 * Divi's default is reveal-on-hover with the glyph parked left — that is what
 * `opacity: 0` and `left: 18px` in the computed style were. `enable: on` and
 * `placement: right` in the module attributes say otherwise, and the render code
 * reads exactly that path, so the two agree once the migration runs.
 *
 * These rules make it true either way. Deliberately they touch only VISIBILITY
 * and POSITION — never `content` and never `font-family`. The glyph itself stays
 * Divi's, so the icon picker still chooses it. That was the whole failure with
 * the CSS mask: it painted over Divi's icon and made the picker look broken.
 */
body a.qwd2-button.qwc-button::after,
body .qwatt-catalogue-form a.qwc-button::after {
	position: absolute;
	right: 1.15rem;
	left: auto;
	/* Was `margin: 0`. The left component never rendered — the arrow sits 6px from
	 * the label, and always has. QWATT-DEC-2026-08-07-001. */
	margin: 0 0 0 6px;
	opacity: 1;
	line-height: 1;
	transform: translateY(-50%);
	top: 50%;
}

body a.qwd2-button.qwc-button {
	position: relative;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

/* The two-action row keeps its label centred in the space that leaves. */
body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button,
body.home a.qwd2-button--ink.qwc-button,
body.home a.qwd2-button--copper.qwc-button {
	justify-content: flex-start;
}

/*
 * Why QWATT: no hover state, and the three blocks aligned.
 *
 * Divi's text module carries a hover treatment that lifted the middle block into
 * a card whenever the pointer crossed it — on a static trust strip that reads as
 * a bug, not an affordance. Nothing here is clickable, so nothing should respond
 * to hover.
 */
body.home .qwd2-why-point,
body.home .qwd2-why-point:hover,
body.home .qwd2-why-column:hover .qwd2-why-point {
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

body.home .qwd2-why-row.qwc-row > .qwc-column {
	display: flex;
	flex-direction: column;
	padding-top: 0;
}

body.home .qwd2-why-icon {
	min-height: 2.6rem;
}

body.home .qwd2-why-point h3 {
	min-height: 2.4rem;
	margin: 0 0 0.55rem;
}

/*
 * "Explore applications" was rendering its arrow as a stray mark: the inline
 * mask span sits in a link whose colour and line box come from the story band,
 * and at that size the drawn glyph collapsed. Sized against the label instead.
 */
body.home .qwd2-story-link a {
	gap: 0.6rem;
}

body.home .qwd2-story-link a span[aria-hidden] {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}


/*
 * ===========================================================================
 * Comparison pages — the family chooser and the per-family tables.
 * ===========================================================================
 *
 * The chooser was one button on a white page. It is now a card per family, with
 * a product image, because "angle grinders" and "demolition hammers" are things
 * people recognise by sight faster than by name.
 */

.qwatt-cmp.qwc-section {
	background: var(--qwp-paper);
	padding-block: clamp(2.6rem, 4.5vw, 4rem);
}

.qwatt-cmp .qwc-row {
	width: 100%;
	max-width: var(--qwp-content);
	padding-inline: clamp(1.1rem, 3vw, 2.4rem);
}

.qwatt-cmp-kicker {
	display: flex;
	align-items: center;
	margin: 0 0 1rem;
	color: var(--qwp-ink);
	font-size: 0.72rem;
	font-weight: 800;
	gap: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.qwatt-cmp-kicker::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

.qwatt-cmp-head h1 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-transform: uppercase;
}

.qwatt-cmp-intro {
	max-width: 34rem;
	margin: 0.9rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.98rem;
	line-height: 1.55;
}

/* --- Family chooser ------------------------------------------------------ */

.qwatt-cmp-cards {
	display: grid;
	margin-top: 2.4rem;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.qwatt-cmp-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--qwp-line);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.qwatt-cmp-card:hover {
	border-color: var(--qwp-teal-dark);
	transform: translateY(-2px);
}

.qwatt-cmp-card-media {
	display: block;
	padding: 1.4rem 1.4rem 0;
	background: #fff;
}

.qwatt-cmp-card-media img {
	display: block;
	width: 100%;
	height: 8.5rem;
	object-fit: contain;
}

.qwatt-cmp-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.3rem 1.4rem 1.4rem;
}

.qwatt-cmp-card-name {
	color: var(--qwp-ink);
	font-size: 1.02rem;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.qwatt-cmp-card-count {
	margin: 0.3rem 0 1.1rem;
	color: var(--qwp-teal-dark);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.qwatt-cmp-card-go {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	color: var(--qwp-teal-dark);
	font-size: 0.88rem;
	font-weight: 800;
	gap: 0.45rem;
}

/* --- Per-family table ---------------------------------------------------- */

.qwatt-cmp-table {
	margin-top: 2.2rem;
	padding: 1.8rem 2rem 1.6rem;
	background: #f4f1eb;
}

.qwatt-cmp-back {
	margin: 1.8rem 0 0;
}

.qwatt-cmp-back a {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark);
	font-size: 0.92rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

.qwatt-cmp-back a:hover {
	text-decoration: underline;
}

/* The homepage table styling is reused here rather than duplicated. */
.qwatt-cmp-table .qwatt-comparison-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.qwatt-cmp-table .qwatt-comparison-table th,
.qwatt-cmp-table .qwatt-comparison-table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgb(16 40 45 / 10%);
	text-align: left;
	vertical-align: baseline;
}

.qwatt-cmp-table .qwatt-comparison-table thead th {
	border-bottom: 1px solid rgb(16 40 45 / 14%);
}

.qwatt-cmp-table .qwatt-comparison-table thead th:nth-child(2) {
	border-top: 3px solid var(--qwp-teal-dark);
}

.qwatt-cmp-table .qwatt-comparison-table thead th:nth-child(3) {
	border-top: 3px solid var(--qwp-copper);
}

.qwatt-cmp-table .qwatt-comparison-table thead th:first-child {
	width: 30%;
}

.qwatt-cmp-table .qwatt-comparison-table thead th a {
	color: var(--qwp-ink);
	font-size: 0.92rem;
	font-weight: 850;
	text-decoration: none;
}

.qwatt-cmp-table .qwatt-comparison-table tbody th[scope="row"] {
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qwatt-cmp-table .qwatt-comparison-table td {
	color: var(--qwp-ink);
	font-size: 0.95rem;
	font-weight: 800;
}

.qwatt-cmp-table .qwatt-comparison-table td.qwatt-compare-differs {
	color: var(--qwp-copper-text);
}

@media (max-width: 700px) {
	.qwatt-cmp-table {
		overflow-x: auto;
		padding-inline: 1.1rem;
	}

	.qwatt-cmp-table .qwatt-comparison-table {
		min-width: 30rem;
	}
}


/*
 * ===========================================================================
 * Product and category pages.
 * ===========================================================================
 *
 * These were WooCommerce's defaults wearing the site's fonts: a breadcrumb, a
 * magnifier, an unstyled title, blue links and a grid of images floating on
 * white with no card, no rhythm and no relationship to the homepage.
 *
 * Brought onto the same system as the rest of the site — paper ground, the same
 * card, the same teal and copper, the same spec-tile treatment the catalogue
 * uses. Nothing here invents a product fact; it restyles what WooCommerce and
 * the qwatt_* fields already output.
 */

body.woocommerce-page,
body.single-product,
body.tax-product_cat {
	background: var(--qwp-paper);
}

body.single-product .woocommerce,
body.tax-product_cat .woocommerce,
body.post-type-archive-product .woocommerce {
	width: min(100% - 2.4rem, var(--qwp-content));
	margin-inline: auto;
	padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(3rem, 5vw, 4.5rem);
}

/* --- Breadcrumb ---------------------------------------------------------- */

.woocommerce-breadcrumb {
	margin: 0 0 1.8rem !important;
	color: var(--qwp-muted);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

.woocommerce-breadcrumb a {
	color: var(--qwp-teal-dark);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* --- Single product ------------------------------------------------------ */

body.single-product:not(.qwc-has-layout-body) div.product.type-product {
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

body.single-product:not(.qwc-has-layout-body) div.product.type-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 1.8rem;
	border: 1px solid var(--qwp-line);
	background: #fff;
}

body.single-product:not(.qwc-has-layout-body) div.product.type-product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

body.single-product .product_title {
	margin: 0.2rem 0 0.6rem !important;
	color: var(--qwp-ink);
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

body.single-product .qwatt-kicker,
body.single-product .qwatt-identity p:first-child {
	color: var(--qwp-teal-dark);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.single-product .woocommerce-product-details__short-description {
	max-width: 32rem;
	color: var(--qwp-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/*
 * Specification tiles, modelled on the frozen catalogue's page-9 treatment:
 * value large, label small and quiet beneath it, thin rule above in teal.
 * "3,300 W" was wrapping to "3,30 / 0 W" in a tile too narrow to hold it.
 */
body.single-product .qwatt-spec-strip,
body.single-product .qwatt-specification-strip {
	display: grid !important;
	margin: 1.6rem 0 !important;
	gap: 0.8rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

body.single-product .qwatt-spec-strip > *,
body.single-product .qwatt-specification-strip > * {
	min-width: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--qwp-line);
	border-top: 3px solid var(--qwp-teal-dark);
	background: #fff;
}

body.single-product .qwatt-spec-strip strong,
body.single-product .qwatt-specification-strip strong {
	display: block;
	color: var(--qwp-ink);
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

body.single-product .qwatt-spec-strip small,
body.single-product .qwatt-specification-strip small {
	display: block;
	margin-top: 0.2rem;
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The dealer action reads as the page's primary move, not a stray blue link. */
body.single-product .qwatt-enquiry-cta a,
body.single-product a.qwatt-enquiry-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 2px;
	background: var(--qwp-teal-dark);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 850;
	text-decoration: none;
}

body.single-product .qwatt-enquiry-cta a:hover,
body.single-product a.qwatt-enquiry-button:hover {
	background: var(--qwp-teal);
}

body.single-product .product_meta {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--qwp-line);
	color: var(--qwp-muted);
	font-size: 0.85rem;
}

body.single-product .product_meta a {
	color: var(--qwp-teal-dark);
}

body.single-product h2 {
	margin: 2.6rem 0 1rem;
	color: var(--qwp-ink);
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* --- Category and shop grids --------------------------------------------- */

body.tax-product_cat ul.products,
body.post-type-archive-product ul.products,
.woocommerce ul.products {
	display: grid !important;
	margin: 0 !important;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.woocommerce ul.products li.product {
	display: flex !important;
	width: auto !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 1.4rem 1.4rem 1.5rem;
	border: 1px solid var(--qwp-line);
	background: #fff;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--qwp-teal-dark);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	height: 11rem;
	margin: 0 0 1.2rem;
	object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 !important;
	color: var(--qwp-ink);
	font-size: 1.02rem !important;
	font-weight: 900;
	letter-spacing: -0.01em;
}

/* Catalogue mode: there is no price, so nothing should leave room for one. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
	display: none !important;
}

.woocommerce-products-header__title,
body.tax-product_cat .page-title {
	margin: 0 0 0.6rem !important;
	color: var(--qwp-ink);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.term-description {
	max-width: 38rem;
	margin: 0 0 2rem;
	color: var(--qwp-muted);
	font-size: 0.98rem;
	line-height: 1.6;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--qwp-muted);
	font-size: 0.85rem;
}

@media (max-width: 860px) {
	body.single-product:not(.qwc-has-layout-body) div.product.type-product {
		grid-template-columns: 1fr;
	}
}


/*
 * ===========================================================================
 * Two root causes behind most of what looked wrong on the internal pages.
 * ===========================================================================
 */

/*
 * 1. THE EMPTY FIRST TILE.
 *
 * Not an empty product. WooCommerce puts a clearfix on `ul.products` via
 * `::before` and `::after` — harmless while that list was a float layout, and
 * a bug the moment it became `display: grid`, because generated content becomes
 * a grid item. The "missing" first product was a zero-height pseudo-element
 * occupying cell one, pushing everything along by one.
 *
 * This is the cost of turning someone else's float layout into a grid without
 * checking what else they hung on it.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}

/*
 * 2. THE EMPTY RIGHT-HAND THIRD.
 *
 * Every page carries `body.qwc-right-sidebar`, so Divi reserves a sidebar column
 * whether or not a sidebar renders — and none of these pages has one. The
 * result was content squeezed into two thirds with a ruled empty band beside it
 * on the products, compare, support, dealer and downloads pages alike.
 *
 * The catalogue has no sidebar anywhere. Reclaim the width.
 */
body.qwc-right-sidebar #main-content .container,
body.qwc-left-sidebar #main-content .container,
body.qwc-right-sidebar #left-area,
body.qwc-left-sidebar #left-area {
	width: 100%;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

body.qwc-right-sidebar #main-content .container::before,
body.qwc-left-sidebar #main-content .container::before {
	display: none;
}

body #sidebar,
body.qwc-right-sidebar #sidebar,
body.qwc-left-sidebar #sidebar {
	display: none;
}

/*
 * Page furniture on the simple content pages — support, privacy, terms, about,
 * contact — which were rendering as bare unstyled documents on white.
 */
body.page:not(.home) #left-area,
body.woocommerce-page #left-area {
	width: min(100% - 2.4rem, var(--qwp-content));
	margin-inline: auto;
	padding-block: clamp(2rem, 4vw, 3.2rem) clamp(3rem, 5vw, 4.5rem);
}

body.page:not(.home) .entry-title,
body.page:not(.home) h1 {
	margin: 0 0 1.2rem;
	color: var(--qwp-ink);
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

body.page:not(.home) #left-area h2 {
	margin: 2.4rem 0 0.8rem;
	color: var(--qwp-ink);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-weight: 900;
	letter-spacing: -0.02em;
}

body.page:not(.home) #left-area p {
	max-width: 42rem;
	color: var(--qwp-muted);
	font-size: 1rem;
	line-height: 1.65;
}

body.page:not(.home) #left-area a {
	color: var(--qwp-teal-dark);
}

/*
 * THE PAGE GROUND IS PAPER. INCLUDING THE PRODUCT ARCHIVE.
 *
 * "there is a white line below the products." Measured on /products/: the body
 * is white, the bands on top of it are paper, and there is a 41px vertical gap
 * between `.qwatt-family-grid` (ends y=1444) and `.qwatt-all-products-cta`
 * (starts y=1485). White body showing through the join. Not a border, not a
 * divider — a hole.
 *
 * Why only that page. Every other page is `body.page` and picks up
 * `body.page:not(.home)` below, which is specificity (0,2,1). The product
 * archive is `body.archive`, and its only paper rule was `body.woocommerce-page`
 * at (0,1,1) — which loses to
 *
 *   body:not(:has(.qwatt-pilot)):not(:not(.qwatt-review-hub))   background: white
 *
 * at (0,2,1), because each `:not(:has(…))` contributes a class's worth of
 * specificity. So `/products/` alone was rendering on white while every band
 * drawn on it was paper, and any gap between two bands showed the difference.
 *
 * `.woocommerce-page` is raised to the same (0,2,1) with `:not(.home)` — which
 * is also true of it, and is the least surprising way to make the two agree.
 * Closing the 41px gap instead would have hidden this one join and left the
 * cause in place for the next two.
 */
body.page:not(.home),
body.woocommerce-page:not(.home),
body.post-type-archive-product:not(.home) {
	background: var(--qwp-paper);
}

/* --- Manual list --------------------------------------------------------- */

.qwatt-download-list {
	display: grid;
	margin: 1.6rem 0 0;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.qwatt-download-list > * {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--qwp-line);
	background: #fff;
	gap: 1rem;
}

.qwatt-download-list a.button,
.qwatt-download-list a.qwatt-button {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	padding: 0 1.1rem;
	border-radius: 2px;
	background: var(--qwp-teal-dark);
	color: #fff;
	font-size: 0.86rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.qwatt-download-list a.button:hover {
	background: var(--qwp-teal);
}


/*
 * ===========================================================================
 * Internal page furniture — products, support, dealer, downloads.
 * ===========================================================================
 */

.qwatt-page-head {
	margin: 0 0 2.4rem;
}

.qwatt-page-kicker {
	display: flex;
	align-items: center;
	margin: 0 0 1rem !important;
	color: var(--qwp-ink) !important;
	font-size: 0.72rem !important;
	font-weight: 800;
	gap: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.qwatt-page-kicker::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

.qwatt-page-head h1 {
	margin: 0 !important;
}

.qwatt-page-intro {
	max-width: 36rem;
	margin: 0.9rem 0 0 !important;
	color: var(--qwp-muted) !important;
	font-size: 1rem !important;
	line-height: 1.6;
}

/* --- Product families ---------------------------------------------------- */

.qwatt-family-grid {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.qwatt-family-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--qwp-line);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.qwatt-family-card:hover {
	border-color: var(--qwp-teal-dark);
	transform: translateY(-2px);
}

.qwatt-family-media {
	display: block;
	padding: 1.6rem 1.6rem 0;
}

.qwatt-family-media img {
	display: block;
	width: 100%;
	height: 10rem;
	object-fit: contain;
}

.qwatt-family-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.4rem 1.5rem 1.5rem;
}

.qwatt-family-name {
	color: var(--qwp-ink);
	font-size: 1.08rem;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.qwatt-family-count {
	margin: 0.3rem 0 0.9rem;
	color: var(--qwp-teal-dark);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.qwatt-family-summary {
	margin-bottom: 1.2rem;
	color: var(--qwp-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

.qwatt-family-go {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	color: var(--qwp-teal-dark);
	font-size: 0.9rem;
	font-weight: 800;
	gap: 0.45rem;
}

/* --- Support aftercare block --------------------------------------------- */

.qwatt-support-aftercare {
	margin-top: 3rem;
	padding-top: 2.2rem;
	border-top: 1px solid var(--qwp-line);
}

.qwatt-support-actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.4rem !important;
	gap: 1.6rem;
}

.qwatt-support-action {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark) !important;
	font-size: 0.92rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

.qwatt-support-action:hover {
	text-decoration: underline;
}

/* --- Forms sit in the page, not adrift in a third of it ------------------ */

.qwatt-catalogue-form,
.qwatt-dealer-form-block {
	max-width: 38rem;
}

.qwatt-dealer-form-block .qwatt-catalogue-fields {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

.qwatt-dealer-form-block .qwatt-catalogue-consent,
.qwatt-dealer-form-block .qwatt-catalogue-submit,
.qwatt-dealer-form-block .qwatt-catalogue-small,
.qwatt-dealer-form-block .qwatt-catalogue-hp {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.qwatt-dealer-form-block .qwatt-catalogue-fields {
		grid-template-columns: 1fr;
	}
}


/*
 * ===========================================================================
 * Owner review, 2026-08-05 — layout, arrows, comparison, navigation home.
 * ===========================================================================
 */

/* --- Why QWATT: icon beside the copy ------------------------------------- */

body.home .qwd2-why-row.qwc-row > .qwc-column {
	display: grid;
	align-items: start;
	column-gap: 1.1rem;
	grid-template-columns: auto 1fr;
	padding-right: 2.4rem;
}

body.home .qwd2-why-icon {
	min-height: 0;
	margin: 0 !important;
	grid-column: 1;
	grid-row: 1;
}

body.home .qwd2-why-icon .qwc-icon {
	line-height: 1;
}

body.home .qwd2-why-point {
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	grid-column: 2;
	grid-row: 1;
}

body.home .qwd2-why-point h3 {
	min-height: 0;
	margin: 0 0 0.5rem;
}

/* The rule sits between columns, not around the copy. */
body.home .qwd2-why-row.qwc-row > .qwc-column:not(:last-child) {
	border-right: 1px solid rgb(16 40 45 / 14%);
}

body.home .qwd2-why-row.qwc-row > .qwc-column:not(:first-child) {
	padding-left: 2.4rem;
}

/* --- Buttons: room for the icon, wherever the label ends ----------------- */

/*
 * THE BUTTON ARROW GOES IN THE FLOW. STOP POSITIONING IT ABSOLUTELY.
 *
 * "the icons are not aligned properly." On "View model" the arrow was printed
 * ON TOP of the final "l" — not near it, through it. On "Explore cordless
 * tools" it touched the "s".
 *
 * This is the third attempt at this button and the first two failed the same
 * way, so the arithmetic is worth writing down. Divi's glyph is absolutely
 * positioned at `right: 1.35rem` — 21.6px — at `font-size: 32px`, so its box
 * runs from 21.6px to about 53.6px in from the right edge. The button reserved
 * `padding-right: 44px`. 53.6 > 44, so the glyph sat 9.6px inside the text area
 * on every button on the site, and collided with any label whose text reached
 * that far. Two fixed numbers that have to clear each other, tuned by eye,
 * against a label of arbitrary length and a font-size in a different unit.
 *
 * A third guess at those two numbers would have held until the next label.
 * Making the glyph a flex item removes both numbers: the button is already
 * `inline-flex`, so the arrow takes its own space, `gap` guarantees the
 * distance, and `align-items: center` centres it without a transform. The
 * button then sizes itself around whatever label it is given.
 *
 * `em` not `px` for the glyph, so it tracks the label instead of being 32px
 * against 16px text.
 *
 * Still deliberately touching only POSITION and SIZE — never `content` and
 * never `font-family`. The glyph stays Divi's, so the icon picker keeps working.
 *
 * ALSO NOTE, for whoever reads this next: the rule immediately above this one in
 * the previous version of this file, `body.home .qwd2-focus-copy .qwc-button`,
 * had never matched anything. The real column class is `qwd2-focus-copy-column`.
 * It was written, committed, described as a fix, and did nothing. Checked with
 * `element.matches()` rather than by reading the stylesheet — which is how the
 * previous two attempts came to be tuning numbers on a rule that was live while
 * believing they were tuning the one that was not.
 */
/*
 * The selector list is long because four earlier attempts are still live on this
 * button and they were found by listing every matching rule, not by reading:
 *
 *   .qwc-button                                         padding: 0.3em 1em
 *   body a.qwd2-button.qwc-button                        padding-right: 3rem !important
 *   body.home a.qwd2-button.qwc-button                   padding-right: 2.75rem !important
 *   body.home .qwd2-focus-copy-column a.qwd2-button…       gap: 1.15rem, then gap: 1.6rem
 *
 * `body.home …` carries one more class than `body …`, so the 2.75rem rule was
 * quietly beating the 3rem rule written to replace it, and both were beating a
 * plain `body` rule added later. Hence the explicit `body.home` and
 * `.qwd2-focus-copy-column` forms here. They are not belt-and-braces; each one
 * is the only way to outrank a specific rule above.
 *
 * These should be consolidated into one button rule. Not in this lock — the
 * owner asked for a visible fault fixed, and unpicking four overlapping rules
 * across every button on the site is a separate job with its own regression
 * surface. Logged in the handoff instead.
 */
body a.qwd2-button.qwc-button,
body.home a.qwd2-button.qwc-button,
body.home a.qwd2-button--ink.qwc-button,
body.home a.qwd2-button--copper.qwc-button,
body.home .qwd2-focus-copy-column a.qwd2-button.qwc-button,
body .qwatt-catalogue-form a.qwc-button {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	/* Masked: never rendered. Every button draws 14px/40px. QWATT-DEC-2026-08-07-001. */
}

body a.qwd2-button.qwc-button::after,
body.home a.qwd2-button--ink.qwc-button::after,
body.home a.qwd2-button--copper.qwc-button::after,
body .qwatt-catalogue-form a.qwc-button::after {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	flex: 0 0 auto;
	/* Was `margin: 0`. The left component never rendered — the arrow sits 6px from
	 * the label, and always has. QWATT-DEC-2026-08-07-001. */
	margin: 0 0 0 6px;
	opacity: 1;
	font-size: 1.35em;
	line-height: 1;
	transform: none;
}

/* --- Support strip: three lines, not one run-on ------------------------- */

body.home .qwd2-support-body .qwc-text-inner {
	display: flex;
	flex-direction: column;
}

body.home .qwd2-support-title {
	display: block;
	color: var(--qwp-ink);
	font-size: 0.98rem;
	font-weight: 850;
}

body.home .qwd2-support-note {
	display: block;
	max-width: 13rem;
	margin: 0.35rem 0 0.7rem;
	color: var(--qwp-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

body.home a.qwd2-support-open {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	color: var(--qwp-teal-dark);
	font-size: 0.85rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

/* --- The mark goes home -------------------------------------------------- */

.qwc-layout-header .qwc-menu-logo-wrap a,
.qwc-layout-header .qwc-menu-logo a,
.qwd2-footer-logo a {
	display: inline-block;
	cursor: pointer;
}

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

/*
 * Product image above each model, the model name a clear step heavier than the
 * values beneath it, and a coloured rule per column that alternates so four
 * models stay separable. Values are one colour: highlighting "differences"
 * painted three quarters of a four-model table and implied the first column
 * was a baseline the rest deviated from.
 */
.qwatt-comparison-table th.qwatt-compare-model {
	padding: 0 1rem 1rem !important;
	border-top: 3px solid var(--qwp-teal-dark);
	vertical-align: bottom;
}

.qwatt-comparison-table th.qwatt-compare-corner {
	border-top: 0;
}

.qwatt-comparison-table .qwatt-compare-model-link {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	text-decoration: none;
}

.qwatt-comparison-table .qwatt-compare-model-media {
	display: block;
	padding-top: 1rem;
}

.qwatt-comparison-table .qwatt-compare-model-media img {
	display: block;
	width: 100%;
	height: 7.5rem;
	object-fit: contain;
	object-position: center bottom;
}

.qwatt-comparison-table .qwatt-compare-model-name {
	color: var(--qwp-ink);
	font-size: 1.06rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.qwatt-comparison-table .qwatt-compare-model-link:hover .qwatt-compare-model-name {
	color: var(--qwp-teal-dark);
	text-decoration: underline;
}

/* One colour for every value. The reader does the comparing. */
.qwatt-comparison-table td,
.qwatt-comparison-table td.qwatt-compare-differs,
body.home .qwatt-comparison-table td.qwatt-compare-differs,
body.home .qwd2-section .qwd2-comparison-table-wrap .qwatt-comparison-table td.qwatt-compare-differs,
.qwatt-cmp-table .qwatt-comparison-table td.qwatt-compare-differs {
	color: var(--qwp-ink);
	font-size: 0.95rem;
	font-weight: 700;
}

.qwatt-comparison-table tbody th[scope="row"] {
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Four models need room; let the table scroll rather than crush the columns. */
.qwatt-cmp-table {
	overflow-x: auto;
}

.qwatt-cmp-table .qwatt-comparison-table {
	min-width: 44rem;
}

.qwatt-cmp-table .qwatt-comparison-table thead th:nth-child(n) {
	border-top-width: 3px;
}


/*
 * ===========================================================================
 * The product-page wreckage, and its single cause.
 * ===========================================================================
 *
 * `body.single-product div.product { display: grid }` was mine, and it was
 * catastrophic for one reason I did not check: on a page with a Divi Theme
 * Builder body template, Divi's OUTER WRAPPER also carries the class `product`
 * — `.qwc-layout-inner.product` — and that wrapper contains the header
 * layout, the body layout and the footer layout.
 *
 * So the rule turned the whole page into a two-column grid. The header became
 * one grid cell, which is why the nav collapsed to 685px and wrapped into a
 * vertical stack; the title column became another, which is why "QW 6-100 PRO"
 * set one word per line. None of it was WooCommerce or Divi misbehaving.
 *
 * Two corrections, and the second matters more than the first:
 *
 *   - Target `div.product.type-product`, WooCommerce's actual product element.
 *     Divi's wrapper does not carry `type-product`.
 *   - Do not apply a layout at all where a Theme Builder body template exists.
 *     Divi owns that page; a second opinion from the stylesheet can only fight
 *     it. `:not(.qwc-has-layout-body)` says so once, in one place.
 *
 * The lesson is the same one the ul.products clearfix taught two rounds ago:
 * a class name is not a contract. Check what else wears it before styling it.
 */

/* Theme-Builder product pages: Divi lays out, the theme supplies tone only. */
body.single-product.qwc-has-layout-body {
	background: var(--qwp-paper);
}

body.single-product.qwc-has-layout-body .qwc-product-title h1,
body.single-product.qwc-has-layout-body .product_title {
	color: var(--qwp-ink);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

/* --- Icons sit on the first line of their text, everywhere --------------- */

/*
 * Owner review, twice: the icon should meet the top of the copy, not float
 * against its middle. Divi's icon module centres its glyph inside a box taller
 * than the cap height, so `align-items: start` alone leaves it looking dropped.
 * The nudge is optical, not structural.
 */
body.home .qwd2-why-icon,
body.home .qwd2-support-icon {
	align-self: start;
	margin-top: -0.2rem !important;
}

body.home .qwd2-why-icon .qwc-icon,
body.home .qwd2-support-icon .qwc-icon {
	display: block;
	line-height: 1;
}

body.home .qwd2-support-item {
	display: grid;
	align-items: start;
	column-gap: 1rem;
	grid-template-columns: auto 1fr;
	padding: 1.5rem 1.6rem;
}

body.home .qwd2-support-icon {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
}

body.home .qwd2-support-body {
	grid-column: 2;
	grid-row: 1;
}

/* --- Downloads: form and cover, centred -------------------------------- */

/*
 * The form sat hard against the left edge with two thirds of the page empty
 * beside it. Paired with the catalogue cover, as the owner's reference does,
 * and centred in the page rather than pinned to one side.
 */
.qwatt-downloads-layout {
	display: grid;
	width: min(100% - 3rem, 68rem);
	margin-inline: auto;
	align-items: start;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.qwatt-downloads-layout .qwatt-catalogue-form {
	max-width: none;
	margin: 0;
}

.qwatt-downloads-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: linear-gradient(150deg, #0b3b42 0%, #063037 60%, #02222a 100%);
}

.qwatt-downloads-cover img {
	display: block;
	width: 100%;
	max-width: 20rem;
	height: auto;
	box-shadow: 0 26px 44px rgb(0 0 0 / 45%);
	transform: rotate(-2deg);
}

/*
 * "Looking for a product manual?" belongs under the catalogue form, aligned with
 * it. It was floating out in the middle of the page instead.
 *
 * MEASURED, because the obvious explanation was wrong. It looked like a grid
 * fault in .qwatt-downloads-layout. The pointer is not in that grid — it is a
 * sibling of it, a direct child of .entry-content. Nothing about the grid
 * touches it.
 *
 * What actually happened, from the computed box and the full list of matching
 * rules:
 *
 *   body.page:not(.home) #left-area p   max-width: 42rem   specificity 1,3,2
 *   .qwatt-downloads-layout + .qwatt-manuals-pointer   max-width: none   0,2,0
 *
 * The prose-measure rule carries an ID, so it beat the rule written specifically
 * for this element. max-width resolved to 42rem = 672px inside a 1185px column,
 * and the `margin-inline: auto` below — which DID apply, nothing outranked it —
 * centred the leftover 513px, 256.5px a side. Centred, not "centre-right": the
 * form beside it starts at x=60, so a centred paragraph reads as adrift.
 *
 * So the rule was never wrong about intent, only about weight. It needs the same
 * `#left-area` the prose rule has, and it needs to stop centring.
 */
body.page:not(.home) #left-area .qwatt-downloads-layout + .qwatt-manuals-pointer {
	/*
	 * 34rem of text measure, so it reads as belonging to the form column rather
	 * than spanning under the cover image as well.
	 *
	 * The gutter is added back because this element is border-box and already
	 * carries `padding-inline: var(--qwp-band-gutter)` from the band rule. A
	 * bare `max-width: 34rem` would be 34rem INCLUDING 2×60px of padding,
	 * leaving 26rem of actual text — narrower than intended, and narrower than
	 * it looks in the stylesheet.
	 */
	width: auto;
	max-width: calc(34rem + 2 * var(--qwp-band-gutter));
	margin-inline: 0;
	padding-top: 2rem;
}

@media (max-width: 900px) {
	.qwatt-downloads-layout {
		grid-template-columns: 1fr;
	}

	.qwatt-downloads-cover {
		order: -1;
		padding: 1.6rem;
	}

	.qwatt-downloads-cover img {
		max-width: 14rem;
	}
}


/*
 * ===========================================================================
 * /products/ and /all-tools/ — on the homepage's terms.
 * ===========================================================================
 */

.qwatt-all-products-cta {
	margin: 2.6rem 0 0 !important;
}

.qwatt-all-products-button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	padding: 0 1.6rem;
	border-radius: 2px;
	background: var(--qwp-teal-dark);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 850;
	gap: 0.9rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.qwatt-all-products-button:hover {
	background: var(--qwp-teal);
}

/* --- All products, grouped by family ------------------------------------ */

.qwatt-all-family {
	margin-bottom: clamp(2.6rem, 5vw, 4rem);
}

.qwatt-all-family-head {
	display: flex;
	align-items: baseline;
	margin-bottom: 1.4rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--qwp-line);
	gap: 1rem;
}

.qwatt-all-family-head h2 {
	margin: 0 !important;
	color: var(--qwp-ink);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.qwatt-all-family-count {
	margin: 0 !important;
	color: var(--qwp-teal-dark) !important;
	font-size: 0.72rem !important;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.qwatt-all-grid {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.qwatt-all-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--qwp-line);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.qwatt-all-card:hover {
	border-color: var(--qwp-teal-dark);
	transform: translateY(-2px);
}

.qwatt-all-card-media {
	display: block;
	padding: 1.4rem 1.4rem 0;
}

.qwatt-all-card-media img {
	display: block;
	width: 100%;
	height: 10rem;
	margin: 0;
	object-fit: contain;
}

.qwatt-all-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.2rem 1.4rem 1.4rem;
}

.qwatt-all-card-name {
	color: var(--qwp-ink);
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.qwatt-all-card-model {
	margin-top: 0.25rem;
	color: var(--qwp-teal-dark);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.qwatt-all-card-go {
	display: inline-flex;
	align-items: center;
	margin-top: 1.1rem;
	color: var(--qwp-teal-dark);
	font-size: 0.86rem;
	font-weight: 800;
	gap: 0.4rem;
}

/* WooCommerce's own loop furniture has no place on the shop page any more. */
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering,
body.post-type-archive-product nav.woocommerce-pagination,
body.post-type-archive-product ul.products {
	display: none !important;
}


/*
 * ===========================================================================
 * Single product — one template, the catalogue's layout, the site's idiom.
 * ===========================================================================
 */

body.single-product #left-area,
body.single-product .woocommerce {
	width: min(100% - 2.4rem, var(--qwp-content));
	margin-inline: auto;
	padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(3rem, 5vw, 4.5rem);
}

.qwatt-product-crumbs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1.8rem;
	color: var(--qwp-muted);
	font-size: 0.8rem;
	gap: 0.5rem;
}

.qwatt-product-crumbs a {
	color: var(--qwp-teal-dark);
	text-decoration: none;
}

.qwatt-product-crumbs a:hover {
	text-decoration: underline;
}

/* --- Hero: image left, identity right ------------------------------------ */

.qwatt-product-hero {
	display: grid;
	align-items: start;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.qwatt-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.2rem;
	border: 1px solid var(--qwp-line);
	background: #fff;
}

.qwatt-product-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: contain;
}

.qwatt-product-kicker {
	margin: 0 0 0.7rem;
	color: var(--qwp-teal-dark);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.qwatt-product-name {
	margin: 0;
	color: var(--qwp-ink);
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	/* A model name never hyphenates or splits. */
	hyphens: none;
	word-break: keep-all;
	overflow-wrap: normal;
}

.qwatt-product-type {
	margin: 0.55rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.95rem;
}

.qwatt-product-summary {
	max-width: 30rem;
	margin: 1rem 0 0;
	color: var(--qwp-ink);
	font-size: 1.02rem;
	line-height: 1.6;
}

/*
 * Specification tiles: value large, label quiet beneath, teal rule above —
 * the frozen catalogue's page-9 treatment, which is where a QWATT reader has
 * already met this pattern.
 */
.qwatt-product-tiles {
	display: grid;
	margin: 1.8rem 0 0;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.qwatt-product-tile {
	min-width: 0;
	padding: 0.9rem 1rem 0.85rem;
	border: 1px solid var(--qwp-line);
	border-top: 3px solid var(--qwp-teal-dark);
	background: #fff;
}

.qwatt-product-tile dd {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 1.15rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/*
 * 0.68rem is 10.88px. These are the specification labels on the product page —
 * "Rated input power", "No-load speed" — the words that tell a buyer what the
 * number beside them means. Last sub-11px text on the site; 0.72rem to match the
 * dealer-card and product-card labels raised for the same reason.
 */
.qwatt-product-tile dt {
	margin-top: 0.3rem;
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qwatt-product-actions {
	display: flex;
	flex-wrap: wrap;
	margin: 1.9rem 0 0;
	align-items: center;
	gap: 1.4rem;
}

.qwatt-product-cta {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	padding: 0 1.5rem;
	border-radius: 2px;
	background: var(--qwp-teal-dark);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 850;
	gap: 0.9rem;
	text-decoration: none;
}

.qwatt-product-cta:hover {
	background: var(--qwp-teal);
}

.qwatt-product-secondary {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark);
	font-size: 0.92rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

.qwatt-product-secondary:hover {
	text-decoration: underline;
}

.qwatt-product-note {
	margin: 1.1rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.82rem;
}

/* --- Panels, specification table, box ------------------------------------ */

.qwatt-product-panels {
	display: grid;
	margin-top: clamp(2.6rem, 5vw, 4rem);
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.qwatt-product-panel {
	padding: 1.7rem 1.8rem;
	background: var(--qwp-paper);
	border-left: 3px solid var(--qwp-copper);
}

.qwatt-product-panels h2,
.qwatt-product-detail h2,
.qwatt-product-claims h2,
.qwatt-product-siblings h2 {
	margin: 0 0 1rem !important;
	color: var(--qwp-ink);
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	font-weight: 900;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.qwatt-product-panel ul,
.qwatt-product-box ul,
.qwatt-product-claims ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--qwp-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.qwatt-product-detail {
	display: grid;
	margin-top: clamp(2.2rem, 4vw, 3rem);
	gap: clamp(1.6rem, 3vw, 2.6rem);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

.qwatt-product-specs table {
	width: 100%;
	border-collapse: collapse;
}

.qwatt-product-specs th,
.qwatt-product-specs td {
	padding: 0.8rem 0.2rem;
	border-bottom: 1px solid var(--qwp-line);
	text-align: left;
	vertical-align: baseline;
}

.qwatt-product-specs th {
	width: 45%;
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qwatt-product-specs td {
	color: var(--qwp-ink);
	font-size: 0.95rem;
	font-weight: 700;
}

.qwatt-product-box {
	padding: 1.7rem 1.8rem;
	border: 1px solid var(--qwp-line);
	background: #fff;
}

.qwatt-product-claims {
	margin-top: clamp(2.2rem, 4vw, 3rem);
	padding: 1.7rem 1.8rem;
	background: var(--qwp-paper);
}

/* --- Others in the family ------------------------------------------------ */

.qwatt-product-siblings {
	margin-top: clamp(2.8rem, 5vw, 4rem);
	padding-top: clamp(2rem, 3.5vw, 2.8rem);
	border-top: 1px solid var(--qwp-line);
}

.qwatt-product-siblings-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.qwatt-product-siblings-compare {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark);
	font-size: 0.9rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

.qwatt-product-siblings-grid {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* WooCommerce furniture the template replaces. */
body.single-product .woocommerce-product-gallery__trigger,
body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .up-sells,
body.single-product .price,
body.single-product form.cart {
	display: none !important;
}

@media (max-width: 900px) {
	.qwatt-product-hero,
	.qwatt-product-detail {
		grid-template-columns: 1fr;
	}
}


/*
 * ===========================================================================
 * The thing that was actually missing: the site's colour rhythm.
 * ===========================================================================
 *
 * Every internal page was correct and quiet — accurate content, right fonts,
 * right teal, and one flat paper wash from the header to the footer. The
 * homepage is not quiet. It goes paper, near-black, paper, deep teal, paper,
 * sand, teal, black; the contrast between bands is most of its character, and
 * none of the internal pages had any of it.
 *
 * So this is not more polish on the cards. Every internal page now opens on a
 * dark band, exactly as the homepage's Tool in Focus band does, and the content
 * sits on paper beneath it. That single change is what makes these pages read as
 * the same site rather than as a tidy admin area attached to it.
 */

/* --- The dark opening band, shared by every internal page ---------------- */

body.single-product .qwatt-product-hero,
.qwatt-page-head,
.qwatt-cmp-head,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_cat .term-description {
	position: relative;
}

/*
 * The band is painted by a full-bleed pseudo-element rather than a wrapper, so
 * no page template has to be restructured to gain it — and a page that grows a
 * section later cannot accidentally end up outside the band.
 */
.qwatt-hero-band,
body.single-product .qwatt-product-hero,
body.page:not(.home) .qwatt-page-head,
.qwatt-cmp .qwatt-cmp-head {
	z-index: 0;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

.qwatt-hero-band::before,
body.single-product .qwatt-product-hero::before,
body.page:not(.home) .qwatt-page-head::before,
.qwatt-cmp .qwatt-cmp-head::before {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	content: "";
	transform: translateX(-50%);
}

/* Type inside the band inverts. */
body.single-product .qwatt-product-hero .qwatt-product-kicker,
body.page:not(.home) .qwatt-page-head .qwatt-page-kicker,
.qwatt-cmp .qwatt-cmp-head .qwatt-cmp-kicker {
	color: rgb(255 255 255 / 88%) !important;
}

body.single-product .qwatt-product-name,
body.page:not(.home) .qwatt-page-head h1,
.qwatt-cmp .qwatt-cmp-head h1 {
	color: #fff !important;
	text-transform: uppercase;
}

body.single-product .qwatt-product-type,
body.single-product .qwatt-product-summary,
body.single-product .qwatt-product-note,
body.page:not(.home) .qwatt-page-head .qwatt-page-intro,
.qwatt-cmp .qwatt-cmp-head .qwatt-cmp-intro {
	color: rgb(255 255 255 / 78%) !important;
}

body.single-product .qwatt-product-crumbs {
	color: rgb(255 255 255 / 62%);
}

body.single-product .qwatt-product-crumbs a {
	color: rgb(255 255 255 / 88%);
}

/*
 * The product floats on the dark ground with no card around it — the Tool in
 * Focus treatment, which is where a QWATT tool has already been seen against
 * this colour.
 */
body.single-product .qwatt-product-media {
	padding: 0;
	border: 0;
	background: none;
}

body.single-product .qwatt-product-media img {
	filter: drop-shadow(0 26px 34px rgb(0 0 0 / 45%));
}

/* Tiles read as inset panels on the dark ground. */
body.single-product .qwatt-product-tile {
	border-color: rgb(255 255 255 / 16%);
	border-top-color: var(--qwp-copper);
	background: rgb(255 255 255 / 6%);
}

body.single-product .qwatt-product-tile dd {
	color: #fff;
}

body.single-product .qwatt-product-tile dt {
	color: rgb(255 255 255 / 70%);
}

body.single-product .qwatt-product-cta {
	background: var(--qwp-copper);
}

body.single-product .qwatt-product-cta:hover {
	background: #b8621f;
}

body.single-product .qwatt-product-secondary {
	color: rgb(255 255 255 / 90%);
}

/* The breadcrumb belongs inside the band, above the kicker. */
body.single-product .woocommerce-breadcrumb {
	display: none !important;
}

/* --- Category archives get the same opening -------------------------------- */

body.tax-product_cat .woocommerce-products-header,
body.tax-product_cat header.woocommerce-products-header {
	position: relative;
	z-index: 0;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

body.tax-product_cat .woocommerce-products-header::before {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	content: "";
	transform: translateX(-50%);
}

body.tax-product_cat .woocommerce-products-header__title,
body.tax-product_cat .page-title {
	color: #fff !important;
}

body.tax-product_cat .woocommerce-products-header .term-description,
body.tax-product_cat .woocommerce-products-header .term-description p {
	color: rgb(255 255 255 / 78%) !important;
}

/*
 * WooCommerce's result count and sorting select sat on the dark band looking
 * like leftovers. There are four models in a family; a sort control is furniture
 * for a shop with hundreds.
 */
body.tax-product_cat .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering {
	display: none !important;
}

/* --- Family cards and grids gain the homepage's weight ------------------- */

.qwatt-family-name,
.qwatt-all-card-name,
.qwatt-cmp-card-name {
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

/*
 * A copper rule above each card's name, echoing the section kickers. Small,
 * and it is the detail that ties a card on /products/ to a band on the homepage.
 */
.qwatt-family-body,
.qwatt-all-card-body,
.qwatt-cmp-card-body {
	position: relative;
}

.qwatt-family-body::before,
.qwatt-all-card-body::before,
.qwatt-cmp-card-body::before {
	display: block;
	width: 1.8rem;
	height: 3px;
	margin-bottom: 0.9rem;
	background: var(--qwp-copper);
	content: "";
}

@media (max-width: 900px) {
	body.single-product .qwatt-product-hero {
		padding-bottom: clamp(2rem, 4vw, 3rem);
	}
}


/* The breadcrumb now sits inside the band, above the two hero columns. */
body.single-product .qwatt-product-hero {
	grid-template-areas:
		"crumbs crumbs"
		"media  intro";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	row-gap: 1.6rem;
}

body.single-product .qwatt-product-crumbs {
	grid-area: crumbs;
	margin-bottom: 0;
}

body.single-product .qwatt-product-media {
	grid-area: media;
}

body.single-product .qwatt-product-intro {
	grid-area: intro;
}

@media (max-width: 900px) {
	body.single-product .qwatt-product-hero {
		grid-template-areas:
			"crumbs"
			"media"
			"intro";
		grid-template-columns: 1fr;
	}
}


/*
 * ===========================================================================
 * The product page had no centred rail. Everything else followed from that.
 * ===========================================================================
 *
 * Symptoms: copy flush against the left edge, "FULL SPECIFICATION" clipped off
 * the screen entirely, and the dark band stopping ~200px short of the right
 * edge. One cause. `#left-area` is not the wrapper on this template — with a
 * Theme Builder header and footer the article sits directly in the builder's
 * content div — so the centring rule I wrote was never applied to anything, and
 * the band, which positioned itself against its parent, inherited the same
 * wrong origin.
 *
 * The rail is now declared on the article itself, which definitely exists,
 * and the band uses `margin-inline: calc(50% - 50vw)` instead of
 * `left: 50% + translateX(-50%)`. The margin technique breaks out of a centred
 * parent by construction and does not care where that parent sits — it cannot
 * drift the way the transform did.
 */

body.single-product .qwatt-product,
body.single-product article.product {
	width: min(100% - 3rem, var(--qwp-content));
	box-sizing: border-box;
	margin-inline: auto;
	padding-block: 0 clamp(3rem, 5vw, 4.5rem);
}

/* Full-bleed bands that do not depend on where their parent starts. */
body.single-product .qwatt-product-hero,
body.page:not(.home) .qwatt-page-head,
.qwatt-cmp .qwatt-cmp-head,
body.tax-product_cat .woocommerce-products-header {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc(50vw - var(--qwp-content) / 2));
}

body.single-product .qwatt-product-hero::before,
body.page:not(.home) .qwatt-page-head::before,
.qwatt-cmp .qwatt-cmp-head::before,
body.tax-product_cat .woocommerce-products-header::before {
	left: 0;
	width: 100%;
	transform: none;
}

/*
 * The page's own rail, so the sections beneath the band line up with the copy
 * inside it. Previously each section found its own left edge, which is why the
 * panels, the table and the box all started in different places.
 */
body.page:not(.home) #left-area > *,
body.woocommerce-page #left-area > * {
	box-sizing: border-box;
}

/* --- Detail sections: rhythm, not a pile ---------------------------------- */

/*
 * Every block below the band was the same weight on the same ground, so the eye
 * had nothing to hold. Alternating grounds and giving each section a heading
 * rule turns a pile of boxes into a sequence.
 */
body.single-product .qwatt-product-panels {
	margin-inline: calc(50% - 50vw);
	padding: clamp(2.6rem, 5vw, 4rem) max(1.5rem, calc(50vw - var(--qwp-content) / 2));
	background: var(--qwp-paper);
	gap: clamp(1.6rem, 3vw, 3rem);
}

body.single-product .qwatt-product-panel {
	padding: 0 0 0 1.4rem;
	border-left: 3px solid var(--qwp-copper);
	background: none;
}

body.single-product .qwatt-product-panel h2 {
	margin-bottom: 1.1rem !important;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

body.single-product .qwatt-product-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--qwp-ink);
	font-size: 0.98rem;
	line-height: 1.5;
}

body.single-product .qwatt-product-panel li {
	padding: 0.7rem 0;
	border-bottom: 1px solid rgb(16 40 45 / 10%);
}

body.single-product .qwatt-product-panel li:last-child {
	border-bottom: 0;
}

/* Full specification and the box, on white, with a shared heading rule. */
body.single-product .qwatt-product-detail {
	margin-top: 0;
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

body.single-product .qwatt-product-specs h2,
body.single-product .qwatt-product-box h2,
body.single-product .qwatt-product-claims h2,
body.single-product .qwatt-product-siblings h2 {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

body.single-product .qwatt-product-specs h2::before,
body.single-product .qwatt-product-box h2::before,
body.single-product .qwatt-product-claims h2::before,
body.single-product .qwatt-product-siblings h2::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

body.single-product .qwatt-product-specs tr:nth-child(odd) th,
body.single-product .qwatt-product-specs tr:nth-child(odd) td {
	background: rgb(16 40 45 / 3%);
}

body.single-product .qwatt-product-specs th,
body.single-product .qwatt-product-specs td {
	padding: 0.85rem 1rem;
}

body.single-product .qwatt-product-box {
	padding: 1.8rem 1.9rem;
	border: 0;
	background: var(--qwp-paper);
}

body.single-product .qwatt-product-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .qwatt-product-box li {
	position: relative;
	padding: 0.55rem 0 0.55rem 1.4rem;
	color: var(--qwp-ink);
	font-size: 0.95rem;
}

body.single-product .qwatt-product-box li::before {
	position: absolute;
	top: 0.55rem;
	left: 0;
	color: var(--qwp-teal-dark);
	content: "—";
	font-weight: 800;
}

/* Claims sit on the sand band, as the comparison does — a different register. */
body.single-product .qwatt-product-claims {
	margin-inline: calc(50% - 50vw);
	margin-top: 0;
	padding: clamp(2.4rem, 4vw, 3.2rem) max(1.5rem, calc(50vw - var(--qwp-content) / 2));
	background: #e4ded4;
}

body.single-product .qwatt-product-claims ul {
	max-width: 46rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .qwatt-product-claims li {
	padding: 0.6rem 0;
	border-bottom: 1px solid rgb(16 40 45 / 12%);
	color: var(--qwp-ink);
	font-size: 0.95rem;
}

body.single-product .qwatt-product-claims li:last-child {
	border-bottom: 0;
}

/* Others in the family close the page on the dark ground, like the homepage. */
body.single-product .qwatt-product-siblings {
	margin-inline: calc(50% - 50vw);
	margin-top: 0;
	padding: clamp(2.6rem, 5vw, 4rem) max(1.5rem, calc(50vw - var(--qwp-content) / 2));
	border-top: 0;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.single-product .qwatt-product-siblings h2 {
	color: #fff !important;
}

body.single-product .qwatt-product-siblings-compare {
	color: rgb(255 255 255 / 88%);
}

body.single-product .qwatt-product-siblings-head {
	margin-bottom: 1.6rem;
}

body.single-product .qwatt-product-siblings-grid .qwatt-all-card {
	border-color: rgb(255 255 255 / 14%);
	background: rgb(255 255 255 / 5%);
}

body.single-product .qwatt-product-siblings-grid .qwatt-all-card:hover {
	border-color: rgb(255 255 255 / 45%);
}

body.single-product .qwatt-product-siblings-grid .qwatt-all-card-name {
	color: #fff;
}

body.single-product .qwatt-product-siblings-grid .qwatt-all-card-go {
	color: rgb(255 255 255 / 88%);
}

body.single-product .qwatt-product-siblings-grid .qwatt-all-card-media {
	background: rgb(255 255 255 / 92%);
	margin: 1rem 1rem 0;
	padding: 1rem;
}


/*
 * ===========================================================================
 * Fix the container before the bands. Everything else was a consequence.
 * ===========================================================================
 *
 * The scroll capture shows the whole page shifted left with a white gutter down
 * the right: bands starting past the left edge and stopping ~200px short of the
 * right, and every heading hard against the screen.
 *
 * The article is centred with `margin-inline: auto` and the bands break out with
 * `calc(50% - 50vw)`. Both of those are correct ONLY if the parent spans the
 * viewport. It does not — Divi's `.qwc-layout-inner` is narrower and
 * left-aligned, still reserving the sidebar column this site has never had. So
 * `auto` centred the article inside a box that was already off-centre, and 50vw
 * measured from an origin that was already wrong.
 *
 * I fixed the bands twice without checking the box they sit in. The container
 * goes first; the bands were only ever reporting its error.
 */

body.single-product #qwatt-body,
body.single-product .qwc-layout-body,
body.single-product .qwc-layout-inner,
body.single-product #main-content,
body.single-product #main-content > .container,
body.woocommerce-page .qwc-layout-inner,
body.page:not(.home) .qwc-layout-inner {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	float: none !important;
}

/*
 * Divi's `.container` also paints a `::before` that reserves the sidebar rail.
 * With the sidebar gone it is just a ruled empty column.
 */
body.single-product #main-content .container::before,
body.woocommerce-page #main-content .container::before,
body.page:not(.home) #main-content .container::before {
	display: none !important;
}

/*
 * With the container spanning the viewport, the bands can be stated simply:
 * full width, with the copy held on the same rail as the rest of the page.
 * No breakout maths at all — nothing to drift.
 */
body.single-product .qwatt-product-hero,
body.single-product .qwatt-product-panels,
body.single-product .qwatt-product-claims,
body.single-product .qwatt-product-siblings,
body.page:not(.home) .qwatt-page-head,
.qwatt-cmp .qwatt-cmp-head,
body.tax-product_cat .woocommerce-products-header {
	width: 100vw;
	max-width: 100%;
	box-sizing: border-box;
	margin-inline: 0;
	padding-inline: max(1.5rem, calc((100% - var(--qwp-content)) / 2));
}

body.single-product .qwatt-product-hero::before,
body.page:not(.home) .qwatt-page-head::before,
.qwatt-cmp .qwatt-cmp-head::before,
body.tax-product_cat .woocommerce-products-header::before {
	content: none;
}

/* The bands now carry their own ground rather than borrowing a pseudo-element. */
body.single-product .qwatt-product-hero,
body.page:not(.home) .qwatt-page-head,
.qwatt-cmp .qwatt-cmp-head,
body.tax-product_cat .woocommerce-products-header {
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

/*
 * The article stops being a rail and becomes a stack of full-width bands. The
 * rail moves inside each one, which is how the homepage is built and why its
 * bands never drift.
 */
body.single-product .qwatt-product,
body.single-product article.product {
	width: 100%;
	max-width: none;
	padding-block: 0 0;
}

body.single-product .qwatt-product-detail {
	width: 100%;
	box-sizing: border-box;
	margin-inline: 0;
	padding-inline: max(1.5rem, calc((100% - var(--qwp-content)) / 2));
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

/* Breathing room the capture was missing between every band. */
body.single-product .qwatt-product-hero {
	margin-bottom: 0;
	padding-block: clamp(3rem, 5.5vw, 4.5rem);
}

body.single-product .qwatt-product-panels {
	padding-block: clamp(2.8rem, 5vw, 4rem);
}

body.single-product .qwatt-product-claims,
body.single-product .qwatt-product-siblings {
	padding-block: clamp(2.8rem, 5vw, 4rem);
}

/* Section headings get room above them instead of butting into the band edge. */
body.single-product .qwatt-product-specs h2,
body.single-product .qwatt-product-box h2,
body.single-product .qwatt-product-claims h2,
body.single-product .qwatt-product-siblings h2,
body.single-product .qwatt-product-panel h2 {
	margin-top: 0 !important;
}


/*
 * ===========================================================================
 * The product page against the homepage, side by side. Two faults, not twenty.
 * ===========================================================================
 *
 * The owner put the two full-page captures next to each other: "the home page
 * looks so seamless. the product page looks as if things are just dumped."
 * That is one observation covering two separate faults, and they are worth
 * separating because I have now spent three rounds treating the second while
 * the first was still doing the damage.
 *
 * FAULT 1 — THE CONTAINER, STILL.
 *
 * The bands stop at 80.8% of the viewport with a white column beside them for
 * the page's whole height. Divi's right-sidebar `#left-area` is 79.125%. That
 * is not a coincidence and it is not a band problem: the sidebar column this
 * site has never had is still reserving its width.
 *
 * I "fixed" this last round by forcing `#qwatt-body`, `.qwc-layout-body`,
 * `.qwc-layout-inner`, `#main-content` and `.container` to full width
 * with `!important` — and left `#left-area`, the one element actually holding
 * the 79.125%, out of that list. It IS named earlier in this file, twice,
 * without `!important`, where it loses to Divi's dynamic CSS printed after our
 * stylesheet. So the rule that could win did not mention it, and the rules that
 * mentioned it could not win.
 *
 * `.woocommerce` has the same problem one level down: capped at
 * `var(--qwp-content)` and centred, so a band inside it can never bleed.
 *
 * FAULT 2 — A DIFFERENT VOCABULARY FROM THE HOMEPAGE.
 *
 * Even at the right width this page would not match, because it is not built
 * from the homepage's parts:
 *
 *   - The homepage is a CONTINUOUS RIBBON: dark, near-black, paper, teal,
 *     paper, sand, teal, black — every band touching the next, no white
 *     between. The product page has 40-60px of white between each band, from
 *     `margin-top` values the band padding was later added on top of. White
 *     gaps are exactly what makes a sequence read as a pile.
 *   - The homepage announces every section with a copper rule ABOVE a
 *     sentence-case headline. The product page uses a small ALL-CAPS heading
 *     with the rule inline beside it — a different mark, doing a smaller job.
 *   - The homepage headline scale is roughly double the product page's, so the
 *     product page has no hierarchy to hold the eye.
 *   - The gutter is 1.5rem here against the homepage's ~8%, so copy sits hard
 *     against the glass.
 *
 * Everything below is the homepage's own construction restated for this
 * template. Nothing here is new design; it is the same design, applied.
 */

body.single-product {
	/*
	 * One gutter expression, used by every band, so they cannot disagree. The
	 * rail is centred when the viewport exceeds it and falls back to a real
	 * margin — never the 1.5rem minimum that put the breadcrumb against the
	 * screen edge — when it does not.
	 */
	--qwp-band-gutter: max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - var(--qwp-content)) / 2));
}

/* --- Fault 1: the sidebar column, named this time ------------------------- */

body.single-product #left-area,
body.single-product .woocommerce,
body.woocommerce-page #left-area,
body.page:not(.home) #left-area {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	float: none !important;
}

/* --- Fault 2a: one continuous ribbon, no white between bands -------------- */

body.single-product .qwatt-product-hero,
body.single-product .qwatt-product-panels,
body.single-product .qwatt-product-detail,
body.single-product .qwatt-product-claims,
body.single-product .qwatt-product-siblings {
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* Each band carries its own ground. Paper, white, sand, dark — as the homepage. */
body.single-product .qwatt-product-panels {
	background: var(--qwp-paper);
}

body.single-product .qwatt-product-detail {
	background: var(--qwp-white);
}

body.single-product .qwatt-product-claims {
	background: #e4ded4;
}

body.single-product .qwatt-product-siblings,
body.single-product .qwatt-product-hero {
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

/* --- Fault 2b: the homepage's section mark, not a smaller one ------------- */

/*
 * Copper rule on its own line, then a sentence-case headline at the homepage's
 * scale. Overrides the earlier inline-dash flex treatment rather than sitting
 * beside it.
 */
body.single-product .qwatt-product h2 {
	display: block !important;
	margin: 0 0 1.5rem !important;
	color: var(--qwp-ink);
	font-family: var(--qwp-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-transform: none;
}

body.single-product .qwatt-product h2::before {
	display: block;
	width: 2.1rem;
	height: 3px;
	margin: 0 0 0.95rem;
	background: var(--qwp-copper);
	content: "";
}

body.single-product .qwatt-product-siblings h2,
body.single-product .qwatt-product-siblings h2::before {
	color: #fff;
}

/* --- The hero: give the tool the room the homepage gives its photograph --- */

body.single-product .qwatt-product-hero {
	display: grid;
	align-items: center;
	gap: clamp(2rem, 4.5vw, 4rem);
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

body.single-product .qwatt-product-crumbs {
	grid-column: 1 / -1;
	margin-bottom: clamp(1rem, 2.5vw, 2rem);
	color: rgb(255 255 255 / 62%);
}

body.single-product .qwatt-product-crumbs a {
	color: rgb(255 255 255 / 82%);
}

body.single-product .qwatt-product-media {
	padding: clamp(1.8rem, 3.5vw, 3rem);
	border: 0;
	background: var(--qwp-white);
}

body.single-product .qwatt-product-media img {
	max-height: 30rem;
}

/* --- The detail band: two columns that start on the same line ------------- */

/*
 * "What's in the box" sat 18px below "Full specification" because the box had
 * the paper ground and its padding pushed its heading down. The ground moves to
 * the list, so both headings start at the top of the band.
 */
body.single-product .qwatt-product-detail {
	display: grid;
	align-items: start;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

body.single-product .qwatt-product-box {
	padding: 0;
	border: 0;
	background: none;
}

body.single-product .qwatt-product-box ul {
	padding: 1.5rem 1.7rem;
	background: var(--qwp-paper);
}

body.single-product .qwatt-product-claims ul {
	max-width: none;
	columns: 2;
	column-gap: clamp(2rem, 4vw, 3.5rem);
}

body.single-product .qwatt-product-siblings-head {
	align-items: flex-end;
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

@media (max-width: 900px) {
	body.single-product .qwatt-product-hero,
	body.single-product .qwatt-product-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product .qwatt-product-claims ul {
		columns: 1;
	}
}


/*
 * ---------------------------------------------------------------------------
 * Four faults the corrected page revealed, which the broken one had hidden.
 * ---------------------------------------------------------------------------
 *
 * With the container fixed and the bands touching, the remaining faults became
 * visible for the first time — they were there all along, buried under a
 * geometry error big enough to mask them.
 *
 * 1. A WHITE STRIP ABOVE AND BELOW THE RIBBON. `#left-area` still carried
 *    35px of top and 72px of bottom padding from the days when the article was
 *    a centred rail rather than a stack of full-bleed bands. The bands touch
 *    each other perfectly and then the whole stack floats between the header
 *    and the footer. Padding on the container is wrong now for the same reason
 *    its width was: the container is no longer the thing being laid out.
 *
 * 2. DOUBLE LIST MARKERS — "• — Cordless drill". The em-dash marker was added
 *    as a `::before` without turning off the native disc, so every item in the
 *    box and the claims carried two. Easy to miss on a page that was already
 *    wrong in larger ways.
 *
 * 3. "Compare the family" fell below its heading, because the heading is now
 *    `display: block` with a bottom margin and the head is a flex row. The
 *    margin belongs to the band, not to the heading inside a row.
 *
 * 4. THE HERO PLATE WAS A BOX INSIDE A BOX. Product photography carries its own
 *    light-grey ground; sitting it on a pure white plate draws a second visible
 *    rectangle around it. The sibling cards already use the photograph's own
 *    grey and read as one plate, which is what the hero should do.
 */

/* 1. The ribbon runs from the header to the footer with nothing between. */
body.single-product #left-area,
body.single-product .woocommerce {
	padding-block: 0 !important;
}

/* 2. One marker per item. */
body.single-product .qwatt-product-box ul,
body.single-product .qwatt-product-claims ul,
body.single-product .qwatt-product-panel ul {
	list-style: none;
	padding-left: 0;
}

/* 3. Heading and its family link on one line. */
body.single-product .qwatt-product-siblings-head {
	align-items: center;
}

body.single-product .qwatt-product-siblings-head h2 {
	margin-bottom: 0 !important;
}

/* 4. One plate, the photograph's own. */
body.single-product .qwatt-product-media {
	background: #f2f2f0;
}

/*
 * Divi's `.container` carries 58px of top padding of its own. Zeroing
 * `padding-inline` last round left the block axis untouched, so the ribbon
 * still started 58px below the header. Same element, same reasoning: the
 * container is not the thing being laid out any more, so it should contribute
 * no space in either axis.
 */
body.single-product #main-content .container,
body.woocommerce-page #main-content .container {
	padding-block: 0 !important;
}

/*
 * The lists kept their discs through two more specific rules and a later
 * position in the file, which should have been impossible — until you read
 * Divi's selector properly:
 *
 *     #left-area ul, .entry-content ul, .qwc-layout-body ul, …   { list-style: disc; padding-left: 1em }
 *
 * `#left-area ul` is (1,0,1). An ID outranks any number of classes, so my
 * (0,2,2) selector lost no matter where it sat in the file. Nothing to do with
 * cascade order, everything to do with reading the whole selector list rather
 * than the first name in it.
 *
 * Matching the ID rather than reaching for `!important`: the owner can still
 * override this from the builder, which `!important` would have taken away.
 */
body.single-product #left-area .qwatt-product-box ul,
body.single-product #left-area .qwatt-product-claims ul,
body.single-product #left-area .qwatt-product-panel ul,
body.single-product #left-area .qwatt-product-siblings ul {
	padding-left: 0;
	list-style: none;
}

/* The panel lists keep a marker; it is a dot drawn by us, not the browser's. */
body.single-product #left-area .qwatt-product-panel li {
	position: relative;
	padding-left: 1.15rem;
}

body.single-product #left-area .qwatt-product-panel li::before {
	position: absolute;
	top: 0.95rem;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--qwp-teal-dark);
	content: "";
}

body.single-product #left-area .qwatt-product-claims li {
	position: relative;
	padding-left: 1.15rem;
}

body.single-product #left-area .qwatt-product-claims li::before {
	position: absolute;
	top: 1.05rem;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--qwp-copper);
	content: "";
}

/*
 * The dots sat high because I positioned them from the top of the list item
 * with a guessed offset. Stated against the first line box instead — the item's
 * own top padding plus half a line — they centre on the first line whatever the
 * item wraps to, which a fixed offset cannot do.
 */
body.single-product #left-area .qwatt-product-panel li::before {
	top: calc(0.7rem + 0.75em);
	transform: translateY(-50%);
}

body.single-product #left-area .qwatt-product-claims li::before {
	top: calc(0.6rem + 0.75em);
	transform: translateY(-50%);
}

/*
 * THE HERO PLATE, PROPERLY THIS TIME.
 *
 * Changing the plate's colour did not fix the box-inside-a-box, because the
 * second box is not the plate — it is the product photograph itself, which
 * carries its own white card and drop shadow. Any plate colour at all leaves a
 * visible ring around that card.
 *
 * So: no ring. The plate is white and the image fills it edge to edge, letting
 * the photograph's own shadow do the work of defining the object. One block.
 */
body.single-product .qwatt-product-media {
	padding: 0;
	background: var(--qwp-white);
}

body.single-product .qwatt-product-media img {
	width: 100%;
	max-height: 32rem;
}

/*
 * FOUR TILES IN 614px GAVE EACH ONE 140px, so "2.0 Ah / 2000 mAh" broke over
 * two lines and "BATTERY CAPACITY" over two more. The catalogue sets these in a
 * 2x2 block for exactly this reason: a specification that wraps mid-value reads
 * as two numbers rather than one.
 */
body.single-product .qwatt-product-tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
}

/*
 * The panels stretched to equal height, so "Where it fits" — which often holds
 * a single line — drew a copper rule down 300px of empty paper. The rule should
 * measure its own content, not its neighbour's.
 */
body.single-product .qwatt-product-panels {
	align-items: start;
}

/*
 * ---------------------------------------------------------------------------
 * Restoring the rail I took away from every inner page that is not a product.
 * ---------------------------------------------------------------------------
 *
 * Widening `#left-area` was right for the product template, where the article
 * is a stack of full-bleed bands that supply their own gutter. It was wrong
 * everywhere else, because on those pages `#left-area` WAS the rail — its
 * `width: min(100% - 2.4rem, var(--qwp-content))` and `margin-inline: auto`
 * were the only thing holding the copy off the glass. I removed it for all of
 * them and checked one.
 *
 * `/products/` made that plain: it is `body.woocommerce-shop`, not `body.page`,
 * so the full-width rule reached it while none of the gutter rules — all keyed
 * to `body.page:not(.home)` — ever did. Copy at x=0, family grid running off
 * the right edge.
 *
 * The fix keeps both properties: `#left-area` stays full width so bands can
 * bleed, and the gutter moves onto its children, where it belongs on a page
 * built from bands. The token moves to `body` so every page can use the one
 * expression rather than each inventing its own.
 */
body {
	--qwp-band-gutter: max(clamp(1.5rem, 5vw, 4.5rem), calc((100% - var(--qwp-content)) / 2));
}

body.woocommerce-page:not(.single-product) #left-area > *,
body.woocommerce-shop #left-area > *,
body.tax-product_cat #left-area > *,
body.page:not(.home) #left-area > * {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

/* A head nested inside an already-padded child must not pay the gutter twice. */
body.woocommerce-page:not(.single-product) #left-area > * .qwatt-page-head,
body.woocommerce-shop #left-area > * .qwatt-page-head,
body.tax-product_cat #left-area > * .qwatt-page-head,
body.page:not(.home) #left-area > * .qwatt-page-head {
	padding-inline: 0;
}

/* The product template supplies its own; it must not inherit this one. */
body.single-product #left-area > * {
	padding-inline: 0;
}


/*
 * ===========================================================================
 * Unifying the product page and bringing the archives onto the same system.
 * ===========================================================================
 *
 * Owner review, five things, and they share one cause: parts of this site were
 * designed against the catalogue and parts against the homepage, so the rules
 * that should repeat everywhere stop at a page boundary.
 */

/* --- 1. The teal/copper alternation, everywhere it appears ---------------- */

/*
 * "we are alternating the teal and orange thin line everywhere then why is it
 * all orange near the product image?"
 *
 * Because the tiles were written before the comparison table settled the rule,
 * and nothing made them agree. The comparison alternates `#086166` and
 * `#d77b35` column by column; the hero tiles now do the same, so column one is
 * teal and column two copper on every product page.
 */
body.single-product .qwatt-product-tile {
	border-top-width: 3px;
	border-top-style: solid;
}

body.single-product .qwatt-product-tile:nth-child(odd) {
	border-top-color: var(--qwp-teal);
}

body.single-product .qwatt-product-tile:nth-child(even) {
	border-top-color: var(--qwp-copper);
}

/* --- 2. Construction facts, beside the specifications --------------------- */

/*
 * What used to be the "Approved product claims" band. Set as quiet chips under
 * the tiles: the same register as a specification, no heading inviting the
 * reader to audit a list of slogans.
 */
body.single-product .qwatt-product-highlights {
	display: flex;
	flex-wrap: wrap;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	gap: 0.6rem;
}

body.single-product #left-area .qwatt-product-highlights {
	padding-left: 0;
	list-style: none;
}

body.single-product .qwatt-product-highlights li {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.9rem 0.5rem 0.8rem;
	border-left: 3px solid var(--qwp-teal);
	background: rgb(255 255 255 / 8%);
	color: #fff;
	font-size: 0.84rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

/* --- 3. One treatment in the detail band, not two ------------------------- */

/*
 * "whats in the box is also unpolished."
 *
 * It was a paper panel with em-dash markers sitting beside a ruled table on
 * white — a third visual treatment on a page that needs two, which made a plain
 * list of parts look like a pull quote. It is now the same ruled row as the
 * specification beside it: same padding, same rule, same rhythm, so the band
 * reads as one thing in two columns.
 */
body.single-product .qwatt-product-box ul {
	padding: 0;
	background: none;
}

body.single-product #left-area .qwatt-product-box li {
	position: relative;
	padding: 0.8rem 0.2rem 0.8rem 1.35rem;
	border-bottom: 1px solid var(--qwp-line);
	color: var(--qwp-ink);
	font-size: 0.95rem;
	font-weight: 700;
}

body.single-product #left-area .qwatt-product-box li:last-child {
	border-bottom: 0;
}

body.single-product #left-area .qwatt-product-box li::before {
	position: absolute;
	top: calc(0.8rem + 0.75em);
	left: 0;
	width: 6px;
	height: 2px;
	background: var(--qwp-copper);
	content: "";
	transform: translateY(-50%);
}

/* The specification table loses its zebra so both columns read the same way. */
body.single-product .qwatt-product-specs tr:nth-child(odd) th,
body.single-product .qwatt-product-specs tr:nth-child(odd) td {
	background: none;
}

body.single-product .qwatt-product-specs th,
body.single-product .qwatt-product-specs td {
	padding: 0.8rem 0.2rem;
	border-bottom: 1px solid var(--qwp-line);
}

/* --- 4. /products/ gets the site's head band ----------------------------- */

/*
 * The shop page printed WooCommerce's own "PRODUCTS" title above our head, so
 * the page opened with the word twice — once shouted in caps, once as
 * "Choose the kind of work". Ours says something; Woo's names the URL.
 */
body.woocommerce-shop .woocommerce-products-header__title {
	display: none;
}

/*
 * The archive header holds bands, so it takes no gutter itself — its children
 * take it, which is what lets the head bleed to both edges while the copy stays
 * on the rail. Same construction as the product page.
 */
body.woocommerce-shop #left-area > header.woocommerce-products-header {
	padding-inline: 0;
}

body.woocommerce-shop .woocommerce-products-header .page-description > * {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

body.woocommerce-shop .qwatt-page-head {
	width: 100%;
	margin: 0;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.woocommerce-shop .qwatt-page-head .qwatt-page-kicker {
	color: rgb(255 255 255 / 88%) !important;
}

body.woocommerce-shop .qwatt-page-head h1 {
	margin: 0.6rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-transform: none;
}

body.woocommerce-shop .qwatt-page-head .qwatt-page-intro {
	max-width: 34rem;
	margin: 1.1rem 0 0;
	color: rgb(255 255 255 / 82%) !important;
}

/* The family grid sits on paper beneath it, continuing the ribbon. */
body.woocommerce-shop .qwatt-family-grid {
	width: 100%;
	margin: 0;
	padding-block: clamp(3rem, 5.5vw, 4.5rem);
	background: var(--qwp-paper);
}

body.woocommerce-shop .qwatt-all-products-cta {
	width: 100%;
	margin: 0;
	padding-block: 0 clamp(3rem, 5.5vw, 4.5rem);
	background: var(--qwp-paper);
}

/* The breadcrumb belongs to the dark band above it, not to the white above that. */
body.woocommerce-shop #left-area > .woocommerce-breadcrumb {
	padding-block: 1.4rem 0;
	background: #0b3b42;
	color: rgb(255 255 255 / 62%);
}

body.woocommerce-shop #left-area > .woocommerce-breadcrumb a {
	color: rgb(255 255 255 / 82%);
}

/*
 * Three corrections on /products/, all from one screenshot.
 *
 * 1. The head band's copy sat at x=0. An earlier rule —
 *    `#left-area > * .qwatt-page-head { padding-inline: 0 }` — was written to
 *    stop a nested head paying the gutter twice, and it carries an ID, so it
 *    beat the shop rule that gives the head its gutter. Correct intent, wrong
 *    blast radius: the head IS the padded element here, not a passenger inside
 *    one. Restated with the same ID so it can win, scoped to the shop only.
 *
 * 2. White strips above and below the breadcrumb. `#left-area` keeps 35px top
 *    and 72px bottom padding on every page that is not a product — the same
 *    padding I zeroed there last round for the same reason.
 *
 * 3. The breadcrumb sat on its own ground between two bands. On the product
 *    page it lives inside the hero; here it is a sibling, so it takes the head
 *    band's ground and no margin, and the two read as one band.
 */
body.woocommerce-shop #left-area {
	padding-block: 0 !important;
}

body.woocommerce-shop #left-area > .woocommerce-breadcrumb {
	margin: 0;
	padding-block: clamp(1.6rem, 3vw, 2.4rem) 0;
}

body.woocommerce-shop #left-area .page-description > .qwatt-page-head {
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(2rem, 4vw, 3.2rem) clamp(3rem, 6vw, 5rem);
}

/* The head continues the breadcrumb's ground rather than starting a new one. */
body.woocommerce-shop #left-area > .woocommerce-breadcrumb,
body.woocommerce-shop #left-area .page-description > .qwatt-page-head {
	background: #0b3b42;
}

body.woocommerce-shop #left-area .page-description > .qwatt-page-head {
	background: linear-gradient(140deg, #0b3b42 0%, #08333a 58%, #062b33 100%);
}

/*
 * Two left over on /products/:
 *
 * - A white strip between the breadcrumb and the head. Zeroing the breadcrumb's
 *   own margin was not enough; the archive header carries one of its own.
 * - "THE QWATT RANGE" was rendering in the kicker's light-ground teal on a dark
 *   band. The kicker states its colour per ground on the homepage for exactly
 *   this reason — a kicker that inherits on a site with four grounds is a coin
 *   toss — and the shop page needs the same treatment, at a specificity that
 *   beats the ID-scoped default.
 */
body.woocommerce-shop #left-area > header.woocommerce-products-header,
body.woocommerce-shop #left-area .page-description {
	margin: 0;
}

body.woocommerce-shop #left-area .qwatt-page-head .qwatt-page-kicker {
	color: rgb(255 255 255 / 88%);
}

body.woocommerce-shop #left-area .qwatt-page-head .qwatt-page-intro {
	color: rgb(255 255 255 / 82%);
}

/*
 * A pattern worth naming, because this is the third time it has cost a round.
 *
 * The kicker stayed ink on a dark band and the breadcrumb kept its 28.8px gap,
 * and in both cases the rule beating my newer, more specific one was MY OWN
 * earlier `!important`:
 *
 *     .qwatt-page-kicker      { color: var(--qwp-ink) !important }
 *     .woocommerce-breadcrumb { margin: 0 0 1.8rem !important }
 *
 * Each was written to beat a Divi or WooCommerce default, which it does. But
 * `!important` at (0,1,0) also beats every ordinary rule I write afterwards, so
 * each one quietly became a floor for the whole site rather than a fix for one
 * element. Ground-specific overrides then look like they are being ignored.
 *
 * Matched here rather than restructured, because those base rules are still
 * doing their original job. The lesson is the general one: an `!important`
 * written to win an argument with a framework stays in the argument with
 * everything I write later.
 */
body.woocommerce-shop #left-area .qwatt-page-head .qwatt-page-kicker {
	color: rgb(255 255 255 / 88%) !important;
}

body.woocommerce-shop #left-area .qwatt-page-head .qwatt-page-intro {
	color: rgb(255 255 255 / 82%) !important;
}

body.woocommerce-shop #left-area > .woocommerce-breadcrumb {
	margin: 0 !important;
}

/*
 * ---------------------------------------------------------------------------
 * The category archive, onto the same ribbon.
 * ---------------------------------------------------------------------------
 *
 * "the colour and design theme is not carried on the product page and its next
 * page." The next page is the family archive, and it was the last surface still
 * wearing the Phase 1B pilot's palette: a #f4f7f7 head over a white grid, on a
 * site whose every other page opens on the dark teal band.
 *
 * This one renders through a Divi Theme Builder body, so its two sections are
 * builder sections, not markup I emit. I am NOT rewriting the template to
 * change them: the last attempt to write a Theme Builder template through
 * `et_theme_builder_store_template()` died with an empty error and cost most of
 * an afternoon, and the win here is a background colour.
 *
 * Stated as CSS by SPECIFICITY rather than force, which is the rule this
 * codebase already follows for Divi: the site's palette is the default, and
 * anything the owner sets in the builder still overrides it, because Divi's
 * per-module generated CSS outranks a theme stylesheet selector. A default,
 * not a lock.
 */

/* The head band: same ground and same rail as every other page opener. */
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type {
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type .qwc-row {
	width: min(100% - 3rem, var(--qwp-content));
	max-width: none;
	margin-inline: auto;
	padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
}

body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type h1,
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type h2 {
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type p {
	color: rgb(255 255 255 / 82%);
}

/* The eyebrow gets the copper rule the rest of the site puts above a heading. */
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type .qwatt-eyebrow {
	display: flex;
	align-items: center;
	color: rgb(255 255 255 / 88%);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type .qwatt-eyebrow::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

/*
 * The grid sits on paper beneath it, as the family grid does on /products/.
 *
 * Stated as a flat gradient rather than a colour, and that is deliberate. Divi
 * writes each Theme Builder section's `background-color` in its own generated
 * CSS and holds it against a theme selector; the head band above only took our
 * teal because a gradient is a background-IMAGE and never entered that
 * argument. The same trick, for the same reason.
 *
 * This is a workaround and worth naming as one. The durable fix is to set both
 * section backgrounds in the Theme Builder itself, where they belong and where
 * the owner would look for them — a two-minute job in the UI. I am not writing
 * it through code: the last attempt to store a Theme Builder template died with
 * an empty error and cost most of an afternoon, and the prize here is a
 * background colour.
 */
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:nth-of-type(2) {
	background-image: linear-gradient(var(--qwp-paper), var(--qwp-paper));
}

body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:nth-of-type(2) .qwc-row {
	width: min(100% - 3rem, var(--qwp-content));
	max-width: none;
	margin-inline: auto;
	padding-block: clamp(3rem, 5.5vw, 4.5rem);
}


/*
 * ===========================================================================
 * Owner review: alternation everywhere, fixed cards, and the catalogue band.
 * ===========================================================================
 */

/* --- The alternation is a rule, so it applies to every rule on the page --- */

/*
 * "whats in the box has a copper line on top, it should be teal. designed
 * around work and where it fits also needs to have alternating colour lines."
 *
 * The tiles were fixed last round and the section headings were not, which is
 * the same mistake one level up: I treated "alternate teal and copper" as a
 * thing the tiles do rather than as a rule the page follows. Every paired
 * heading now alternates — first copper, second teal — and the panel's vertical
 * rule matches its own heading instead of both being copper.
 */
body.single-product .qwatt-product-panels .qwatt-product-panel:nth-child(even) h2::before,
body.single-product .qwatt-product-detail > section:nth-child(even) h2::before {
	background: var(--qwp-teal);
}

body.single-product .qwatt-product-panel:nth-child(odd) {
	border-left-color: var(--qwp-copper);
}

body.single-product .qwatt-product-panel:nth-child(even) {
	border-left-color: var(--qwp-teal);
}

/* The box list's own dashes follow its heading rather than the table's. */
body.single-product #left-area .qwatt-product-box li::before {
	background: var(--qwp-teal);
}

/* --- Sibling cards keep their size when there is only one of them -------- */

/*
 * "this section should be fixed size of product."
 *
 * With one sibling, `repeat(auto-fit, minmax(13rem, 1fr))` stretched the single
 * card to the full 1,200px rail and blew the tool up to billboard scale. The
 * card is a card. `auto-fill` holds the track count so one card occupies one
 * card's width and the rest of the row stays empty, which is the honest picture
 * of a family with two models in it.
 */
body.single-product .qwatt-product-siblings-grid {
	grid-template-columns: repeat(auto-fill, minmax(15rem, 17rem));
	justify-content: start;
}

/* --- Product imagery answers the pointer --------------------------------- */

/*
 * "when a mouse hovers over the product image make it zoomed."
 *
 * Scaled inside a clipped frame so the plate does not move and the grid does
 * not reflow — the image grows, its box does not. Skipped for anyone who has
 * asked their system to reduce motion.
 */
body.single-product .qwatt-product-media,
.qwatt-all-card-media,
.qwatt-family-media,
.woocommerce ul.products li.product a img {
	overflow: hidden;
}

body.single-product .qwatt-product-media img,
.qwatt-all-card-media img,
.qwatt-family-media img,
.woocommerce ul.products li.product img {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

body.single-product .qwatt-product-media:hover img,
.qwatt-all-card:hover .qwatt-all-card-media img,
.qwatt-family-card:hover .qwatt-family-media img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .qwatt-product-media img,
	.qwatt-all-card-media img,
	.qwatt-family-media img,
	.woocommerce ul.products li.product img {
		transition: none;
	}

	body.single-product .qwatt-product-media:hover img,
	.qwatt-all-card:hover .qwatt-all-card-media img,
	.qwatt-family-card:hover .qwatt-family-media img,
	.woocommerce ul.products li.product:hover img {
		transform: none;
	}
}

/*
 * "the plus sign which appears when we try selecting the product is not right."
 *
 * Divi's shop module paints its own hover overlay with a "+" glyph, which on an
 * e-commerce grid means "add to cart". This is a catalogue: nothing is added to
 * anything, so the icon promises an action that does not exist. Removed rather
 * than restyled — a different icon would still be Divi's overlay answering a
 * question this site does not ask.
 */
.woocommerce ul.products li.product .qwc-overlay,
.qwc-shop .qwc-overlay,
body.tax-product_cat .qwc-overlay {
	display: none !important;
}

/* --- Specifications under each model in a family listing ----------------- */

.qwatt-loop-specs {
	display: grid;
	margin: 0.9rem 0 0;
	padding: 0;
	gap: 0.35rem;
}

.qwatt-loop-spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--qwp-line);
	gap: 1rem;
}

.qwatt-loop-spec:last-child {
	border-bottom: 0;
}

/*
 * Also 0.64rem = 10.24px, and there are 27 of them on /products/ alone — the
 * spec labels under every product card. Same reasoning as the dealer-card `dt`
 * labels further down this file: uppercase, letterspaced, 10px, on a phone.
 * 0.72rem keeps the register and stops it being a squint.
 */
.qwatt-loop-spec dt {
	margin: 0;
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qwatt-loop-spec dd {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 0.86rem;
	font-weight: 800;
	text-align: right;
}

/* --- The catalogue band, now on every page ------------------------------- */

.qwatt-catalogue-band {
	width: 100%;
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(3rem, 6vw, 5rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

.qwatt-catalogue-band-inner {
	display: grid;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.qwatt-catalogue-band-cover img {
	display: block;
	width: 100%;
	max-width: 17rem;
	height: auto;
	margin-inline: auto;
	box-shadow: 0 26px 50px rgb(0 0 0 / 38%);
}

.qwatt-catalogue-band-copy .qwd2-kicker-rule {
	display: flex;
	align-items: center;
	margin: 0 0 1.1rem;
	color: rgb(255 255 255 / 88%);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

.qwatt-catalogue-band-copy .qwd2-kicker-rule::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

.qwatt-catalogue-band-copy h2 {
	margin: 0;
	color: #fff;
	font-family: var(--qwp-font-display);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.qwatt-catalogue-band-copy p:not(.qwd2-kicker-rule):not(.qwatt-catalogue-band-actions) {
	max-width: 32rem;
	margin: 1rem 0 0;
	color: rgb(255 255 255 / 82%);
}

.qwatt-catalogue-band-actions {
	margin: 1.8rem 0 0;
}

.qwatt-catalogue-band-button {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	padding: 0 1.7rem;
	border-radius: 2px;
	background: #ab5a1c;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 850;
	gap: 0.9rem;
	text-decoration: none;
}

.qwatt-catalogue-band-button:hover {
	background: #964d13;
	color: #fff;
}

@media (max-width: 900px) {
	.qwatt-catalogue-band-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.qwatt-catalogue-band-cover {
		display: flex;
		justify-content: center;
	}

	.qwatt-catalogue-band-cover img {
		width: min(46vw, 11rem);
	}
}


/*
 * ===========================================================================
 * The system reaches the pages I had been fixing one at a time.
 * ===========================================================================
 */

/* --- 1. The header is one height, on every page -------------------------- */

/*
 * "the top black bar has become too huge on a few pages."
 *
 * 82px everywhere except the category archives, where it measured 190. The
 * header section keeps Divi's default 54px block padding there, because the
 * rule that zeroes it was written against the page templates and archives were
 * never in its scope. The header is one component and should not be able to
 * disagree with itself by template.
 */
.qwc-layout-header .qwc-section,
.qwc-layout-header .qwc-row {
	padding-block: 0 !important;
}

/* --- 2. Teal text on a teal button -------------------------------------- */

/*
 * The "broken teal rectangles" on Manuals and Support were buttons whose label
 * measured 1:1 against its own background — `color` and `background` both
 * #086166. The text was always there. Nothing was broken; it was invisible,
 * which is the failure mode that looks most like a missing feature.
 */
.qwatt-download-list .qwatt-button,
.qwatt-downloads .qwatt-button,
a.qwatt-button {
	background: var(--qwp-teal-dark);
	color: #fff !important;
}

a.qwatt-button:hover {
	background: var(--qwp-teal);
	color: #fff !important;
}

/* --- 3. One page opener, wherever the band is rendered ------------------- */

/*
 * The band is emitted by the plugin now, so the article stops being a rail and
 * becomes a stack of bands — the same construction as the product template and
 * /products/. The bare `entry-title` above it goes: it said the same word as
 * the band's own headline, one line higher and in capitals.
 */
body.page:not(.home) #left-area > article > .entry-title,
body.search #left-area > article > .entry-title,
body.page:not(.home) .main_title {
	display: none;
}

body.page:not(.home) #left-area > article,
body.search #left-area > article {
	padding-inline: 0;
}

body.page:not(.home) #left-area > article > .entry-content > *,
body.search #left-area > article > .entry-content > * {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

body.page:not(.home) .entry-content > .qwatt-page-head,
body.search .entry-content > .qwatt-page-head {
	width: 100%;
	margin: 0;
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.page:not(.home) .qwatt-page-head .qwatt-page-kicker,
body.search .qwatt-page-head .qwatt-page-kicker {
	color: rgb(255 255 255 / 88%) !important;
}

body.page:not(.home) .qwatt-page-head h1,
body.search .qwatt-page-head h1 {
	margin: 0.6rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-transform: none;
}

body.page:not(.home) .qwatt-page-head .qwatt-page-intro,
body.search .qwatt-page-head .qwatt-page-intro {
	max-width: 34rem;
	margin: 1.1rem 0 0;
	color: rgb(255 255 255 / 82%) !important;
}

/* Content below the opener sits on paper, continuing the ribbon. */
body.page:not(.home) .entry-content > .qwatt-page-head ~ * {
	padding-block: clamp(1.2rem, 2.5vw, 2rem);
	background: var(--qwp-paper);
}

body.page:not(.home) .entry-content > .qwatt-page-head + * {
	padding-top: clamp(3rem, 5.5vw, 4.5rem);
}

body.page:not(.home) .entry-content > *:last-child {
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/* --- 4. The compare page joins the ribbon -------------------------------- */

/*
 * "this compare page still has a different look... the top green is not like
 * the home page."
 *
 * It was inset with its own margins and its own teal, because it was built
 * before the band system existed and I never brought it across. Same ground,
 * same gutter, same full bleed as every other opener.
 */
.qwatt-cmp .qwatt-cmp-head {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
	border-radius: 0;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	box-shadow: none;
}

.qwatt-cmp .qwatt-cmp-head h1 {
	text-transform: none;
	font-size: clamp(2rem, 3.6vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.qwatt-cmp {
	padding-inline: 0;
	background: var(--qwp-paper);
}

.qwatt-cmp > *:not(.qwatt-cmp-head) {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

/*
 * "demolition hammer compare page has very small images... can the name of the
 * product be made to stand out a little?"
 *
 * The image cell was sized for five washers and then used for two hammers, so a
 * two-model family got washer-sized thumbnails in half the space. Sized by the
 * cell rather than by a fixed number, and the model name goes up in weight and
 * size so the column has a clear head.
 */
.qwatt-cmp .qwatt-comparison-table img,
.qwatt-comparison-table img {
	width: 100%;
	max-width: 11rem;
	height: auto;
	max-height: 8.5rem;
	margin-inline: auto;
	object-fit: contain;
}

.qwatt-comparison-table thead th {
	vertical-align: bottom;
	padding-bottom: 1.1rem;
}

.qwatt-comparison-table thead th a,
.qwatt-comparison-table thead th .qwatt-cmp-model {
	display: block;
	margin-top: 0.9rem;
	color: var(--qwp-ink);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.qwatt-comparison-table thead th a:hover {
	color: var(--qwp-teal-dark);
}

/* --- 5. The products page CTA belongs to its band ------------------------ */

/*
 * A white strip had opened between the family grid and the "Show all products"
 * button, because the grid and the CTA carry the paper ground separately and
 * the gap between them carried nothing.
 */
body.woocommerce-shop .qwatt-family-grid,
body.woocommerce-shop .qwatt-all-products-cta {
	padding-block: 0;
	background: var(--qwp-paper);
}

body.woocommerce-shop .qwatt-family-grid {
	padding-top: clamp(3rem, 5.5vw, 4.5rem);
}

body.woocommerce-shop .qwatt-all-products-cta {
	padding-top: clamp(2rem, 3.5vw, 2.8rem);
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/*
 * Corrections from the first render of the shared page opener.
 *
 * 1. A white strip between the header and the band — `#left-area` keeps its
 *    block padding on pages, the same fault I fixed on products and the shop
 *    and did not generalise. Fixed for pages this time rather than for one page.
 *
 * 2. The paper ground was painted on each child of `.entry-content`, so it
 *    stopped at each child's own width — a paragraph's measure, a grid's track
 *    total — and the band read as a set of stripes. The ground belongs to the
 *    container; the gutter belongs to the children. That is the same division
 *    the rest of the site uses and I had it inverted here.
 *
 * 3. The manual cards put the model name and the button in one row with no
 *    room to share, so "QW-801 PRO" wrapped mid-name and collided with the
 *    button. Stacked instead: name, then action.
 */
body.page:not(.home) #left-area,
body.search #left-area {
	padding-block: 0 !important;
}

body.page:not(.home) .entry-content,
body.search .entry-content {
	background: var(--qwp-paper);
}

body.page:not(.home) .entry-content > .qwatt-page-head ~ *,
body.search .entry-content > .qwatt-page-head ~ * {
	width: 100%;
	max-width: none;
	background: none;
}

/* Manual and download cards: a name, then the thing you came to press. */
.qwatt-download-list {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.qwatt-download-list > article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-white);
	gap: 1.1rem;
}

.qwatt-download-list > article > div {
	width: 100%;
}

.qwatt-download-list > article h2 {
	margin: 0;
	color: var(--qwp-ink);
	font-size: 1.15rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-transform: none;
	hyphens: none;
	word-break: keep-all;
}

.qwatt-download-list > article .qwatt-kicker {
	margin: 0 0 0.35rem;
	color: var(--qwp-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.qwatt-download-list > article .qwatt-button {
	margin-top: auto;
}

/* A model with no manual yet says so, quietly, in place of the button. */
.qwatt-download-list > article .qwatt-download-pending {
	color: var(--qwp-muted);
	font-size: 0.85rem;
	font-style: normal;
}

/*
 * The last white strip: Divi's `.container` block padding, which I zeroed for
 * products and the shop and — again — not for pages. Third time this exact
 * padding has been fixed one template at a time. Stated for every inner page
 * now so the next template does not have to rediscover it.
 */
body.page:not(.home) #main-content .container,
body.search #main-content .container,
body.tax-product_cat #main-content .container {
	padding-block: 0 !important;
}

body.page:not(.home) #left-area > article,
body.search #left-area > article,
body.page:not(.home) .entry-content,
body.search .entry-content {
	margin-block: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Search results, and the compare page's single opener.
 * ---------------------------------------------------------------------------
 */

/* The compare opener is the page's opener: full bleed, no inset card. */
body.page:not(.home) .qwatt-cmp {
	padding: 0;
	background: var(--qwp-paper);
}

body.page:not(.home) .entry-content > .qwatt-cmp {
	padding-inline: 0;
}

body.page:not(.home) .qwatt-cmp > .qwatt-cmp-head {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
	border: 0;
	border-radius: 0;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	box-shadow: none;
}

body.page:not(.home) .qwatt-cmp > *:not(.qwatt-cmp-head) {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

body.page:not(.home) .qwatt-cmp > *:last-child {
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/* --- Search results ------------------------------------------------------ */

body.search #left-area {
	padding-block: 0 !important;
	background: var(--qwp-paper);
}

body.search .qwatt-search-head {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(2.6rem, 5vw, 4rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.search .qwatt-search-head .qwatt-page-kicker {
	display: flex;
	align-items: center;
	margin: 0;
	color: rgb(255 255 255 / 88%) !important;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

body.search .qwatt-search-head .qwatt-page-kicker::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

body.search .qwatt-search-head h1 {
	margin: 0.7rem 0 0;
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-transform: none;
}

body.search .qwatt-search-head .qwatt-page-intro {
	margin: 0.9rem 0 0;
	color: rgb(255 255 255 / 82%) !important;
}

.qwatt-search-form {
	display: flex;
	max-width: 34rem;
	margin: 1.8rem 0 0;
	gap: 0;
}

.qwatt-search-form input[type="search"] {
	flex: 1 1 auto;
	min-height: 52px;
	padding: 0 1rem;
	border: 1px solid rgb(255 255 255 / 22%);
	border-right: 0;
	border-radius: 0;
	background: rgb(255 255 255 / 8%);
	color: #fff;
	font-size: 0.95rem;
}

.qwatt-search-form input[type="search"]::placeholder {
	color: rgb(255 255 255 / 55%);
}

.qwatt-search-form button {
	min-height: 52px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 0;
	background: var(--qwp-teal-dark);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 850;
	cursor: pointer;
}

.qwatt-search-form button:hover {
	background: var(--qwp-teal);
}

/*
 * Results as cards rather than a wall of run-together text. Divi prints each
 * result's whole content stripped of tags, so "All productsThe complete
 * range..." ran into one paragraph with no space between headings — a search
 * page that is harder to read than the raw database.
 */
body.search #left-area > article {
	box-sizing: border-box;
	width: min(100% - 2 * var(--qwp-band-gutter), var(--qwp-content));
	margin: 0 auto 1.1rem;
	padding: 1.5rem 1.7rem;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-white);
}

body.search #left-area > article:first-of-type {
	margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
}

body.search #left-area > article:last-of-type {
	margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

body.search #left-area > article .entry-title {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: none;
}

body.search #left-area > article .entry-title a {
	color: var(--qwp-ink);
	text-decoration: none;
}

body.search #left-area > article .entry-title a:hover {
	color: var(--qwp-teal-dark);
}

body.search #left-area > article .post-content,
body.search #left-area > article .post-content p {
	overflow: hidden;
	color: var(--qwp-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body.search .pagination,
body.search .wp-pagenavi {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/*
 * The compare opener is inside a Divi text module, not inside `.qwatt-cmp`.
 *
 * Measured chain: section > row (max 1240) > column (72px) > text (72px) >
 * head. My `.qwatt-cmp > .qwatt-cmp-head` selector matched nothing, and the
 * insets I was trying to remove were Divi's row and column padding stacking
 * with the band gutter — three separate indents, none of them mine to remove
 * by naming a parent that does not exist.
 *
 * `margin-inline: calc(50% - 50vw)` breaks out from wherever it happens to sit,
 * which is what it is for. It failed earlier in this build only because an
 * ancestor was 79.125% wide rather than full width; that is fixed, every
 * ancestor now spans the viewport, and the technique does what it says.
 */
body.page:not(.home) .qwatt-cmp-head {
	/*
	 * Width stated, not inferred. With `width: auto` the left margin pulled the
	 * box to x=0 and the right edge stopped at 863 — an ancestor was constraining
	 * the auto width, so only half the breakout landed. `100vw` is the width I
	 * actually mean and nothing upstream can shrink it.
	 */
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--qwp-band-gutter);
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
	border: 0;
	border-radius: 0;
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	box-shadow: none;
}

body.page:not(.home) .qwatt-cmp-head h1,
body.page:not(.home) .qwatt-cmp-head h2 {
	text-transform: none;
	font-size: clamp(2rem, 3.6vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

/* The section behind it carries the paper ground so the ribbon stays closed. */
body.page:not(.home) .entry-content .qwc-section {
	background-image: linear-gradient(var(--qwp-paper), var(--qwp-paper));
}

/*
 * `100vw` counts the scrollbar; the viewport's content width does not. The
 * breakout therefore overshoots by the scrollbar's width and opens a horizontal
 * scrollbar of its own — the standard cost of the technique.
 *
 * `overflow-x: clip` rather than `hidden`: clip does not create a scroll
 * container, so it cannot break `position: sticky` or scroll-into-view further
 * down the page. Hidden would have traded a visible bug for a subtle one.
 */
body.page:not(.home) .entry-content,
body.search #left-area {
	overflow-x: clip;
}

/*
 * ---------------------------------------------------------------------------
 * One opener, one height.
 * ---------------------------------------------------------------------------
 *
 * "the top green on each page has a different height. it is not consistent
 * every where."
 *
 * Measured across ten pages: 236, 243, 295, 308, 321, 327, 364. Two causes,
 * and I introduced both by building the band in three places over three
 * sessions:
 *
 *   1. Three different paddings — 51/80, 67/80, 56/56 — because each variant
 *      got its own numbers when I brought it onto the system.
 *   2. The content varies. Some pages have an intro paragraph, some do not,
 *      the archive head has neither, and search adds a form. A band sized by
 *      its contents will differ whenever its contents differ.
 *
 * Padding alone cannot fix the second cause, so the band gets a MINIMUM HEIGHT
 * and centres its content within it. A page with a one-line title and a page
 * with a title plus two lines of intro then open identically, which is the
 * whole point of a masthead: it is the site's constant, not the page's.
 *
 * Stated once, for every variant, so a fourth variant cannot quietly disagree.
 */
body.page:not(.home) .entry-content > .qwatt-page-head,
body.woocommerce-shop #left-area .page-description > .qwatt-page-head,
body.search .qwatt-search-head,
body.page:not(.home) .qwatt-cmp-head,
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type {
	display: flex;
	/*
	 * The floor sits above the TALLEST opener on the site, not at a comfortable
	 * average. At 19vw everything landed at 271-282 except search, which carries
	 * a form and stayed at 325 — so the one page that most needed to look like
	 * the rest was the one exception. A minimum only equalises the pages that sit
	 * under it.
	 */
	min-height: clamp(15rem, 23vw, 21rem);
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(2.2rem, 4vw, 3.2rem);
}

/*
 * The archive head is a Divi section, so its row is the thing that must stretch
 * rather than sit at its content height inside a taller parent.
 */
body.tax-product_cat .qwc-layout-body .qwc-layout-inner > .qwc-section:first-of-type .qwc-row {
	width: min(100% - 3rem, var(--qwp-content));
	padding-block: 0;
}

/*
 * Search adds a form, which is the one piece of band content that can push past
 * the minimum. Tightened so it sits inside the same height as everything else
 * rather than making the search page the tallest on the site.
 */
.qwatt-search-form {
	margin-top: 1.2rem;
}

body.search .qwatt-search-head .qwatt-page-intro {
	margin-top: 0.6rem;
}

/* Intro spacing stated once too, for the same reason as the padding. */
body.page:not(.home) .qwatt-page-head .qwatt-page-intro,
body.woocommerce-shop .qwatt-page-head .qwatt-page-intro {
	margin-top: 0.9rem;
}

/*
 * The comparison table sat off the rail: measured 258..1168 in a 1425 viewport
 * where the rail is 112..1312. The head band broke out to full width and the
 * table did not, so the two halves of the same page disagreed about where the
 * left edge is.
 *
 * Cause is the one I found when fixing the head: this page is built from Divi
 * modules, and the row, column and text module each contribute their own
 * padding, which then stacks with the band gutter. Zeroing Divi's three so the
 * gutter is the only inset means the table and the band measure from the same
 * edge — which is all "aligned" means here.
 */
/*
 * THE BAND IS EXCLUDED, BECAUSE THE BAND IS ITSELF A TEXT MODULE.
 *
 * The compare opener's class is applied TO the Divi text module, not to a div
 * inside it, so its class list is:
 *
 *     et_pb_text_0 qwc-text qwc-module … qwatt-cmp-head
 *
 * This rule therefore matched the opener as well, and at (0,5,1) it outranked
 * `body.page:not(.home) .qwatt-cmp-head` at (0,3,1) — so the band's gutter was
 * zeroed no matter where either rule sat in the file. Measured result: the
 * heading rendered at x = -7.5px with the first letter clipped off the screen.
 *
 * The var resolved correctly to 60px throughout. Nothing was wrong with the
 * token, the breakout, or the cascade order — only with a selector that
 * described "Divi's modules" while also describing one of mine.
 */
body.page:not(.home) .entry-content .qwc-section .qwc-row,
body.page:not(.home) .entry-content .qwc-section .qwc-column,
body.page:not(.home) .entry-content .qwc-section .qwc-text:not(.qwatt-cmp-head):not(.qwatt-page-head):not(.qwatt-search-head) {
	padding-inline: 0;
}

body.page:not(.home) .entry-content .qwc-section .qwc-row {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

body.page:not(.home) .qwatt-cmp > *:not(.qwatt-cmp-head) {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

/*
 * ===========================================================================
 * COMPARE FAMILY PAGES: ONE GEOMETRY FOR ALL FOUR
 * ===========================================================================
 *
 * "compare section between 2 products categories are not in alignments."
 *
 * All four pages are written by one migration and their markup is byte-identical
 * — section `qwatt-cmp`, row `qwatt-cmp-row`, three text modules. Measured in
 * four iframes at the same 1200px width, they were not:
 *
 *   angle-grinders          row L=47  W=1090   max-width 1240px
 *   demolition-hammers      row L=0   W=1185   max-width none
 *   cordless-tools          row L=0   W=1185   max-width none
 *   high-pressure-washers   row L=0   W=1185   max-width none
 *
 * Same class, different computed width, because Divi writes a per-page cache
 * file and `.qwc-row-0` means a different rule on each page. Angle grinders is
 * the oldest of the four — it existed as the Phase 1B pilot before the other
 * three were generated — and it kept a row width setting the others never had.
 * `body.page:not(.home) .entry-content .qwc-section .qwc-row` above tries to
 * normalise this and loses, because the cached rule carries `!important`.
 *
 * So: state it here, with `!important`, at a specificity no per-page cache can
 * reach. Editing four pages' row settings in the builder would work until
 * somebody regenerates one of them.
 *
 * A caution for whoever changes this: `.qwc-row-0` is NOT a stable identifier.
 * It is positional, per page, and it is why two pages can disagree while sharing
 * a class name. Never target it directly.
 */
body.page:not(.home) .qwatt-cmp.qwc-section > .qwc-row.qwatt-cmp-row {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/*
 * One left edge for the heading, the table and the back link. The heading band
 * is full-bleed teal and carries its own gutter; these two need the same gutter
 * so all three read as one column.
 */
body.page:not(.home) .qwatt-cmp .qwatt-cmp-table,
body.page:not(.home) .qwatt-cmp .qwatt-cmp-back-module {
	box-sizing: border-box;
	/*
	 * `!important` rather than a longer selector, and the reason is arithmetic
	 * rather than laziness. The rule this has to beat is
	 *
	 *   body.page:not(.home) .entry-content .qwc-section
	 *     .qwc-text:not(.qwatt-cmp-head):not(.qwatt-page-head):not(.qwatt-search-head)
	 *
	 * which is (0,8,1) — eight classes, three of them only there to exclude
	 * things. Out-specifying it means writing something longer and more brittle
	 * than the rule it is fighting, and the next person then has to out-specify
	 * that. Two competing declarations, one of which says which it means, is the
	 * more honest end state.
	 */
	padding-inline: var(--qwp-band-gutter) !important;
}

/*
 * The label column was a fixed 30% — 355px of an 1185px table — for a column
 * holding "RATED INPUT POWER". On the five-model washer page that left 166px per
 * product and a 134px photograph. Capped in rem so it stops growing once the
 * labels fit, and the models take the rest.
 */
body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table thead th.qwatt-compare-corner {
	/*
	 * A definite length, not `clamp(7.5rem, 17%, 12.5rem)`, which was the first
	 * attempt and did nothing. Under `table-layout: fixed` the column widths are
	 * resolved before the table's own width is definite, so a percentage inside
	 * the clamp cannot be resolved and the whole declaration is dropped — every
	 * column then falls back to an equal share. It fails silently: the rule is
	 * in the stylesheet, it matches the element, and `getComputedStyle().width`
	 * reports the USED width, so it reads as though it applied. Proved by
	 * setting an inline width on the same cell and watching the column move.
	 *
	 * 13rem holds "RATED INPUT POWER" on one line at this size.
	 */
	width: 13rem;
}

/*
 * Every model column gets a top rule, not just the first two.
 *
 * The colour is written inline per column by comparison_table(), cycling teal
 * and copper. The CSS only ever declared `border-top: 3px solid` on
 * nth-child(2) and nth-child(3), so on the four- and five-model families every
 * column from the third onward had a colour and no border to paint it with.
 * Two pages showed a striped header and two showed a partly striped one.
 */
body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table thead th.qwatt-compare-model {
	border-top: 3px solid currentColor;
}

/*
 * A two-model family stops stretching to fill the band.
 *
 * "product compare is still too wide when only 2 products are shown." It was:
 * angle grinders and demolition hammers both spread two columns across the full
 * 1065px, 428px each, so the two things being compared sat half a screen apart
 * with nothing between them. The five-model washer page needed the whole band;
 * the two-model pages inherited it.
 *
 * `--qwatt-model-count` is written onto the table by comparison_table(), because
 * CSS cannot count columns. The label column is 13rem and each model gets 15rem,
 * so the table asks for exactly what it needs and `min()` stops it exceeding the
 * band when a family is large:
 *
 *   2 models  13 + 30 = 43rem = 688px    (was 1065)
 *   4 models  13 + 60 = 73rem            capped to the band
 *   5 models  13 + 75 = 88rem            capped to the band
 *
 * No per-count rules, so a sixth washer sizes itself.
 */
body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table {
	width: min(100%, calc(13rem + (var(--qwatt-model-count, 5) * 15rem)));
}

/* Bigger photographs, and the same height on every page whatever the count. */
body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table .qwatt-compare-model-media img {
	height: clamp(5.5rem, 10vw, 9rem);
}

/*
 * Banding. Four to six columns of numbers with nothing but a hairline between
 * rows is where the eye loses its place, and this table exists to be read
 * across.
 */
body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table tbody tr:nth-child(odd) {
	background: rgb(16 40 45 / 3%);
}

body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table tbody th[scope="row"] {
	white-space: normal;
}

/*
 * Below 900px a five-model table cannot be made to fit; let it scroll rather
 * than crushing every column to nothing. The label column stays put so the row
 * you are reading keeps its name.
 */
@media (max-width: 900px) {
	body.page:not(.home) .qwatt-cmp .qwatt-cmp-table {
		overflow-x: auto;
	}

	body.page:not(.home) .qwatt-cmp-table .qwatt-comparison-table {
		min-width: 44rem;
	}
}


/*
 * ===========================================================================
 * THE HEAD OFFICE BAND IS DARK. ITS TEXT WAS NOT.
 * ===========================================================================
 *
 * "the font colour and other visuals are not proper." Measured against the
 * band's own mid-gradient colour, rgb(5,41,47):
 *
 *   h2 "Speak to QWATT directly"   rgb(16,40,45)   1.00 : 1   invisible
 *   kicker "Head office"           rgb(89,112,116) 2.93 : 1   fail
 *   intro paragraph                rgb(89,112,116) 2.93 : 1   fail
 *   +91 99120 00053 / care@        rgb(8,97,102)   2.13 : 1   fail
 *   dt labels                      white 62%      15.39 : 1   pass
 *
 * Four of five fail WCAG AA, and the heading is not merely low-contrast — at
 * 1.00:1 it is exactly the same luminance as the panel behind it. It was ink on
 * paper once, the band was later given a dark teal gradient, and the type never
 * followed. The `dt` labels pass only because they were written for the dark
 * treatment; everything around them was not.
 *
 * Stated as explicit light-on-dark values rather than left to inherit, because
 * inheritance is what produced a heading nobody could read.
 *
 * WHY EVERY SELECTOR BELOW CARRIES `#left-area`.
 *
 * The first attempt was written as `.qwatt-head-office h2 { color: #fff }` and
 * changed nothing. Enumerating the rules that actually match the element:
 *
 *   body.page:not(.home) #left-area h2   var(--qwp-ink)   (1,3,2)
 *   .qwatt-head-office h2                #fff             (0,1,1)
 *
 * The generic inner-page prose rules carry an ID, so no band-level class can
 * reach them. This is the fifth time on this project that a rule written for a
 * specific band has lost to a generic `#left-area` rule — it is the same shape
 * as the `/downloads/` manuals pointer, which lost `max-width` to
 * `body.page:not(.home) #left-area p`.
 *
 * Treat `#left-area` as a standing hazard: anything setting colour, measure or
 * spacing on a band inside `.entry-content` has to out-specify it, and the only
 * honest way to know is to enumerate and compare, not to read.
 *
 * Both forms are given — the plain one for any future context outside
 * `body.page`, and the `#left-area` one that actually wins today.
 */
.qwatt-head-office h2,
body.page:not(.home) #left-area .qwatt-head-office h2 {
	color: #fff;
}

.qwatt-head-office .qwd2-kicker-rule,
body.page:not(.home) #left-area .qwatt-head-office .qwd2-kicker-rule {
	color: rgb(255 255 255 / 72%);
}

.qwatt-head-office > p,
body.page:not(.home) #left-area .qwatt-head-office > p {
	color: rgb(255 255 255 / 82%);
	max-width: 34rem;
}

.qwatt-head-office .qwatt-head-office-contact dd,
.qwatt-head-office .qwatt-head-office-contact dd a,
body.page:not(.home) #left-area .qwatt-head-office .qwatt-head-office-contact dd,
body.page:not(.home) #left-area .qwatt-head-office .qwatt-head-office-contact dd a {
	color: #fff;
}

.qwatt-head-office .qwatt-head-office-contact dd a:hover,
.qwatt-head-office .qwatt-head-office-contact dd a:focus-visible,
body.page:not(.home) #left-area .qwatt-head-office .qwatt-head-office-contact dd a:hover,
body.page:not(.home) #left-area .qwatt-head-office .qwatt-head-office-contact dd a:focus-visible {
	color: var(--qwp-copper);
	text-decoration: underline;
}

/*
 * The line that stands in for the telephone before an enquiry has been sent.
 * Quieter than the address values it sits beneath, still comfortably above AA.
 */
.qwatt-head-office-locked,
body.page:not(.home) #left-area .qwatt-head-office-locked {
	max-width: 34rem;
	margin: 1.4rem 0 0;
	color: rgb(255 255 255 / 76%);
	font-size: 0.9rem;
	line-height: 1.55;
}

/*
 * ===========================================================================
 * Dealers, head office and the contact form.
 * ===========================================================================
 */

.qwatt-dealers {
	display: grid;
	margin: 0;
	gap: clamp(1.4rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

/*
 * What stands where the dealer cards go before the form has been sent.
 *
 * Deliberately quiet: a copper rule and paper, not a warning box. It is telling
 * someone what happens next, not refusing them something. A locked-padlock
 * treatment here would read as "we do not trust you" on the page where QWATT is
 * asking to be trusted.
 *
 * WHY TWO ELEMENTS
 *
 * `.qwatt-dealers-locked` is a direct child of `.entry-content`, so it is caught
 * by the band-gutter rule at line ~9585 — `body.page:not(.home) #left-area >
 * article > .entry-content > *` — which sets padding-inline and outranks any
 * single class. Styling the panel on the outer element loses that padding
 * silently and the panel runs the full 1185px, edge to edge. Measured, not
 * assumed: computed padding on the outer div came back as 30px 60px, none of it
 * ours. The outer element absorbs the gutter and stays unstyled; the inner
 * `-panel` carries the border, background and its own padding.
 */
.qwatt-dealers-locked-panel {
	border: 1px solid var(--qwp-line);
	border-left: 4px solid var(--qwp-copper);
	/* White, like the dealer cards it stands in for. --qwp-paper is the page
	   background here, so a paper fill is invisible and the panel reads as a
	   bare outline. Checked on screen, not assumed. */
	background: var(--qwp-white);
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
}

.qwatt-dealers-locked-lead {
	margin: 0;
	max-width: 46ch;
	color: var(--qwp-ink);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	font-weight: 700;
	line-height: 1.5;
}

.qwatt-dealers-locked-where {
	margin: 0.6rem 0 0;
	color: var(--qwp-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.qwatt-dealer {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--qwp-line);
	background: var(--qwp-white);
}

/*
 * The map is given a fixed aspect ratio rather than a height, so three dealers
 * whose addresses wrap to different numbers of lines still line up.
 */
.qwatt-dealer-map {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--qwp-paper);
}

.qwatt-dealer-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(0.9) contrast(1.02);
}

.qwatt-dealer-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem 1.6rem 1.6rem;
}

.qwatt-dealer-region {
	margin: 0 0 0.55rem;
	color: var(--qwp-teal-dark);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.qwatt-dealer-name {
	margin: 0 0 0.7rem;
	color: var(--qwp-ink);
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.qwatt-dealer-address {
	margin: 0 0 1.1rem;
	color: var(--qwp-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.qwatt-dealer-contact,
.qwatt-head-office-contact {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--qwp-line);
}

.qwatt-dealer-contact > div,
.qwatt-head-office-contact > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--qwp-line);
	gap: 1rem;
}

/*
 * 0.64rem is 10.24px. Uppercase, letterspaced, on a phone. That is too small for
 * a label whose job is to tell someone which number is the telephone and which
 * is the email, and it was the smallest text measured anywhere on the site.
 * 0.72rem = 11.5px keeps the same quiet register and stops it being a squint.
 */
.qwatt-dealer-contact dt,
.qwatt-head-office-contact dt {
	margin: 0;
	color: var(--qwp-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Tap targets on the dealer cards.
 *
 * The telephone and email links measured 19px tall at 390px. On the page whose
 * entire purpose is putting a customer in touch with a dealer, on the device
 * they will be holding when they do it, the two links that matter most were the
 * hardest things to hit. WCAG 2.2 AA asks for 24x24 (2.5.8).
 *
 * `min-height` plus centred content rather than padding, so the visual position
 * of the text does not move — this is about the hit area, not the look.
 */
.qwatt-dealer-contact dd a,
.qwatt-head-office-contact dd a,
.qwatt-dealer-directions a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.qwatt-dealer-contact dd,
.qwatt-head-office-contact dd {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
	text-align: right;
	/* An email address breaks anywhere rather than overflowing its card. */
	word-break: break-word;
}

.qwatt-dealer-contact a,
.qwatt-head-office-contact a {
	color: var(--qwp-teal-dark);
	text-decoration: none;
}

.qwatt-dealer-contact a:hover,
.qwatt-head-office-contact a:hover {
	text-decoration: underline;
}

.qwatt-dealer-directions {
	margin: 1.1rem 0 0;
}

.qwatt-dealer-directions a {
	display: inline-flex;
	align-items: center;
	color: var(--qwp-teal-dark);
	font-size: 0.88rem;
	font-weight: 800;
	gap: 0.45rem;
	text-decoration: none;
}

.qwatt-dealer-directions a:hover {
	text-decoration: underline;
}

/* --- Head office: contact details, no address, as asked -------------------- */

.qwatt-head-office {
	margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
	padding: clamp(1.8rem, 3.5vw, 2.6rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	color: #fff;
}

.qwatt-head-office .qwd2-kicker-rule {
	display: flex;
	align-items: center;
	margin: 0 0 1rem;
	color: rgb(255 255 255 / 88%);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

.qwatt-head-office .qwd2-kicker-rule::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

.qwatt-head-office h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.qwatt-head-office h2::before {
	content: none;
}

.qwatt-head-office > p {
	max-width: 34rem;
	margin: 0.9rem 0 0;
	color: rgb(255 255 255 / 82%);
}

.qwatt-head-office-contact {
	max-width: 26rem;
	margin-top: 1.4rem;
	border-top-color: rgb(255 255 255 / 18%);
}

.qwatt-head-office-contact > div {
	border-bottom-color: rgb(255 255 255 / 18%);
}

.qwatt-head-office-contact dt {
	color: rgb(255 255 255 / 62%);
}

.qwatt-head-office-contact dd,
.qwatt-head-office-contact a {
	color: #fff;
}

/* --- The contact form ----------------------------------------------------- */

.qwatt-contact-form select {
	width: 100%;
	min-height: 48px;
	padding: 0 0.9rem;
	border: 1px solid var(--qwp-line);
	border-radius: 2px;
	background: var(--qwp-white);
	color: var(--qwp-ink);
	font-size: 0.95rem;
}

.qwatt-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--qwp-line);
	border-radius: 2px;
	background: var(--qwp-white);
	color: var(--qwp-ink);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.55;
	resize: vertical;
}

.qwatt-field--full {
	grid-column: 1 / -1;
}

.qwatt-contact-intro {
	max-width: 34rem;
	margin: 0 0 1.4rem;
	color: var(--qwp-muted);
}

.qwatt-contact-dealers {
	margin-top: clamp(2.6rem, 5vw, 4rem);
}

.qwatt-contact-dealers h2 {
	margin: 0 0 0.7rem;
	color: var(--qwp-ink);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.03em;
}

.qwatt-contact-dealers p {
	max-width: 34rem;
	margin: 0 0 1.8rem;
	color: var(--qwp-muted);
}

.qwatt-dealer-form-wrap {
	margin-top: clamp(2.6rem, 5vw, 4rem);
}

/*
 * The "Find a QWATT dealer" form was pinned to the left of a full-width band.
 *
 * Measured: the wrapper is the full 1185px band, 1065px of it inside the
 * gutter. The form is capped at 38rem = 608px by the shared
 * `.qwatt-catalogue-form, .qwatt-dealer-form-block` rule, and
 * `.qwatt-catalogue-form { margin: 0 0 3rem }` pins it left — so 457px of empty
 * band sat to its right, directly under three dealer cards that DO span the
 * full 1065px. That is the imbalance the owner saw.
 *
 * Centred rather than widened. Widening to 1065px would stretch the two-column
 * field grid to roughly 500px per field, which is a silly width for a phone
 * number and makes the block read as a slab. Centring keeps the fields at a
 * sane measure and makes the band symmetrical, which is what was actually
 * wrong with it.
 *
 * Scoped to this wrapper on purpose. The same `.qwatt-dealer-form-block` class
 * is used on /contact/ and the same `.qwatt-catalogue-form` on /downloads/,
 * where the form is correctly left-aligned inside a two-column grid. A global
 * change here would break that page.
 */
.qwatt-dealer-form-wrap > .qwatt-dealer-form-block {
	margin-inline: auto;
}

/*
 * /contact/ had the identical gap, flagged in lock 001 and left because it was
 * not in that brief. Same 608px form pinned to the left of a 1065px band, same
 * empty right half. Centring it here for the same reason and by the same means.
 */
.qwatt-contact-form.qwatt-dealer-form-block {
	margin-inline: auto;
}

/*
 * ===========================================================================
 * I broke the homepage. `body.page` includes it.
 * ===========================================================================
 *
 * The homepage is a page. Every rule I wrote as `body.page …` to fix the inner
 * pages therefore landed on it too, and the ones that did the damage were the
 * blunt ones:
 *
 *   body.page .entry-content .qwc-section { background-image: paper }
 *   body.page .entry-content .qwc-section .qwc-row { width:100%; padding:0 }
 *
 * The first painted paper over every band on the homepage — the near-black
 * Workshop Story, the teal Tool in Focus, the teal catalogue band — so their
 * white headings became white-on-cream and simply vanished. The second stripped
 * the row widths the hero wedge is built on, which is why the wedge slid out of
 * position and the panel overran its column.
 *
 * Rescoped to `body.page:not(.home)` throughout. The lesson is the one I keep
 * relearning on this build: a selector written to describe "the pages I am
 * currently looking at" describes every page that matches it, including the one
 * page whose layout took the longest to get right.
 *
 * The homepage is governed by `body.home` rules and by the Divi Theme Builder,
 * and nothing in the inner-page work has any business reaching it.
 */

/*
 * The head office band lost its dark ground.
 *
 * `…> .qwatt-page-head ~ * { background: none }` was written to stop the paper
 * ground being painted per child and reading as stripes. It does that, but
 * "none" is broader than the problem: it also strips the background from any
 * child that legitimately has one of its own. The head office block went from a
 * teal band to dark text on paper.
 *
 * Blocks that carry their own ground are named back in, rather than the reset
 * being loosened — a component with a background should keep it, and a
 * container should not be guessing which of its children those are.
 */
body.page:not(.home) .entry-content .qwatt-head-office {
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.page:not(.home) .entry-content .qwatt-dealer {
	background: var(--qwp-white);
}

/*
 * ---------------------------------------------------------------------------
 * Manual cards get the tool; focus buttons get room for their arrow.
 * ---------------------------------------------------------------------------
 */

/*
 * THE PLATE UNDER A PRODUCT PHOTO IS WHITE, NOT PAPER.
 *
 * "pressure washer images not proper." Measured, and it is not the washers.
 * QWATT ships two kinds of product asset:
 *
 *   qw-801-pro.webp etc.   cut-out on TRANSPARENCY, square canvas
 *   qw-pw-01.png etc.      photograph with a SOLID WHITE background, edge to edge
 *
 * On a paper-coloured plate the cut-outs float correctly and the five washers
 * appear as pure-white rectangles pasted onto rgb(242,240,233) — a visible
 * lighter block with hard edges, in a grid where nothing else has one. Nothing
 * is wrong with the washer photographs; they are simply the only ones whose
 * background is part of the image.
 *
 * Making the plate white costs nothing on the cut-outs — white is a perfectly
 * ordinary ground for product photography, and every card here is already white —
 * and it makes the washers' own background disappear into it. The alternative
 * was to key the white out of five approved PNGs, which is altering an approved
 * product asset, needs the owner, and goes wrong around brass fittings and hose.
 */
/*
 * THE PLATE IS 4:3, NOT 16:10, AND THAT IS A MEASURED COMPROMISE.
 *
 * "the bottom 2 images on the manual page are not proper." Measured at the
 * owner's own window width, where the grid is four columns and the plate is
 * 216x124 — an aspect of 1.74. With `object-fit: contain`, how much of that
 * plate a tool fills is decided entirely by how close its own aspect is to the
 * plate's:
 *
 *   QW-810 PRO     1.74   100% of the plate     (identical to the box)
 *   QW-PW-01       1.35    77%
 *   QWLI-01        0.95    55%
 *   QWLI-02        0.85    49%
 *   QWLI-04 METAL  0.81    46%   <- the two he pointed at
 *   QW 6-100 PRO   2.93    59%
 *
 * So the two cordless kits rendered at half the presence of a hammer, and it had
 * nothing to do with the images: a portrait tool in a landscape box is squeezed
 * by the box.
 *
 * A 4:3 plate is taller, so the portrait kits recover most of the gap. It costs
 * the widest grinder some size, and that trade is deliberate — nine of the
 * thirteen tools sit between 0.8 and 1.8, so the plate should suit the middle of
 * the range rather than its extreme.
 *
 * There is no aspect that makes all thirteen equal. Perfect equality needs the
 * drawn AREA normalised per image, which cannot be expressed in CSS without a
 * square root; it would need a per-image scale computed in PHP. That is the
 * right answer if this ever needs to be exact, and it is not worth the machinery
 * today. Recorded so the next person knows the ceiling was chosen, not missed.
 */
.qwatt-download-media {
	display: block;
	overflow: hidden;
	margin: -0.4rem -0.4rem 1.1rem;
	padding: 0.9rem;
	background: #fff;
	aspect-ratio: 4 / 3;
}

/*
 * Same reason, everywhere else a washer can appear. `.qwatt-cmp-card-media` and
 * `.qwatt-product-media` were already white and are left alone; these three were
 * not, and they are the containers the five PNGs actually render in — checked by
 * fetching each page and reading the parent class of every `pw-0*` image rather
 * than guessing which templates were involved.
 *
 * If a future product photo arrives as a cut-out on transparency it still looks
 * right on white. The reverse is not true, which is why white is the safe ground
 * for a mixed library.
 */
.qwatt-family-media,
.qwatt-all-card-media {
	background: #fff;
}

/*
 * EVERY TOOL GETS THE SAME AMOUNT OF INK.
 *
 * `--qwatt-sw` is sqrt(aspect), written onto the plate by
 * QWATT_Render::image_aspect_style() because CSS has no usable sqrt(). See the
 * long note there for the derivation; the short version:
 *
 *     drawn width  = K * sqrt(a)      drawn height = K / sqrt(a)
 *
 * holds `width x height` constant for every image whatever its shape. K is
 * expressed as a proportion of the plate's own width, so it stays correct at
 * every breakpoint without a single media query.
 *
 * 0.57 is the largest constant that keeps the widest tool on the site —
 * QW 6-100 PRO at 2.93 — inside the plate: 0.57 * sqrt(2.93) = 97.5% of the
 * width. Raising it clips the grinder; lowering it wastes space on everything.
 *
 * The 1.3333 is the plate's own 4:3 aspect, converting a width proportion into a
 * height proportion. If the plate aspect above ever changes, this number must
 * change with it — they are the same number expressed twice, which is a wart,
 * but the alternative is a second custom property for something that changes
 * once a year.
 *
 * Fallback of 1 means "square", which is what an image with no stored dimensions
 * gets. It degrades to the old centred `contain` behaviour rather than breaking.
 */
.qwatt-download-media img {
	display: block;
	width: calc(100% * 0.57 * var(--qwatt-sw, 1));
	height: calc(100% * 0.57 * 1.3333 / var(--qwatt-sw, 1));
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
 * The plate stays `display: block`, deliberately.
 *
 * The first attempt centred the image with `display: grid; place-items: center`
 * and the percentage heights above silently collapsed — every tool came out at
 * either 16% or 32% of the plate instead of a uniform 43%. A centred grid item
 * makes the track size to its content, so the image's `height: calc(100% * …)`
 * had no definite height to resolve against and fell back to intrinsic size.
 *
 * A block box with `aspect-ratio` has a definite height, so the percentages
 * resolve. The image is centred with `margin: auto` instead, which needs nothing
 * from the parent.
 */
.qwatt-download-media {
	display: block;
}

.qwatt-download-list > article:hover .qwatt-download-media img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.qwatt-download-media img,
	.qwatt-download-list > article:hover .qwatt-download-media img {
		transition: none;
		transform: none;
	}
}

/*
 * "the button in tools in focus have arrows which are not right."
 *
 * The label and the arrow were touching — "Explore cordless tools→" with no
 * space at all, so the glyph read as part of the last word rather than as a
 * direction. Divi's button icon is positioned by its own `padding-right` on the
 * button, and the value inherited here was too small for a label this long.
 *
 * Space added on the button and against the glyph, with the icon's vertical
 * centring stated rather than left to the line box — an arrow that sits a pixel
 * high is the sort of thing you feel before you see.
 */
body.home .qwd2-focus-copy .qwc-button,
body.home .qwd2-focus-actions .qwc-button {
	display: inline-flex;
	align-items: center;
	padding-right: 3.2rem !important;
}

body.home .qwd2-focus-copy .qwc-button::after,
body.home .qwd2-focus-actions .qwc-button::after {
	display: inline-flex;
	align-items: center;
	margin-left: 0.85em;
	line-height: 1;
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
 * Dealer contact values must not break mid-word.
 *
 * "luluatradingcorporation@qwatt.in" wrapped after the "i", dropping a lone
 * "n" onto the next line. An email address broken across a line is not just
 * untidy — it reads as a typo, and this is the page whose entire job is to put
 * a customer in touch with a dealer.
 *
 * `anywhere` rather than `break-word`: it allows the break to be taken into
 * account when computing the minimum content size, so the flex/grid cell can
 * shrink to fit instead of overflowing first and breaking second.
 * ------------------------------------------------------------------------ */
.qwatt-dealer-card a[href^="mailto:"],
.qwatt-dealer-card a[href^="tel:"],
.qwatt-dealer-value {
	overflow-wrap: anywhere;
	hyphens: none;
}

/* The longest address sets the column; let it use the full width available. */
.qwatt-dealer-card a[href^="mailto:"] {
	font-size: clamp(0.82rem, 1.05vw, 0.95rem);
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * The full-width contact fields were not full width.
 *
 * Measured: the "What is this about?" select and the Message box both stopped
 * at 672px (42rem), while Name/Email and Phone/City spanned the full 1065px
 * row above them. The form read as a neat two-column grid that then lost its
 * right half twice.
 *
 * `.qwatt-field--full { grid-column: 1 / -1 }` was already written, and did
 * nothing: the form element computes to `display: block`, so there is no grid
 * for a grid-column to span. The rule described an intention rather than the
 * layout that exists — and looked correct in the stylesheet, which is why it
 * survived.
 *
 * Stated as a width instead, which works whatever the parent turns out to be.
 * ------------------------------------------------------------------------ */
/*
 * Corrected after measuring the ancestor chain. My first attempt named
 * `.qwatt-contact-form`, which is the wrapping DIV; the grid is the FORM
 * inside it, `.qwatt-catalogue-fields`. The field itself carries
 * `max-width: 42rem`, which is right for a field sharing a row and wrong for
 * one spanning both columns.
 *
 * Measured chain:
 *   ARTICLE 1185 > .entry-content 1185 > DIV.qwatt-contact-form 1185
 *     > FORM.qwatt-catalogue-fields 1065 (grid)
 *       > P.qwatt-field--full 672 (max-width 672px)
 */
.qwatt-catalogue-fields > .qwatt-field--full {
	grid-column: 1 / -1;
	max-width: none;
	width: auto;
}

.qwatt-catalogue-fields > .qwatt-field--full > select,
.qwatt-catalogue-fields > .qwatt-field--full > textarea,
.qwatt-catalogue-fields > .qwatt-field--full > input {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}


/*
 * ===========================================================================
 * THE LAYOUT SCAFFOLDING DIVI USED TO PROVIDE.
 * ===========================================================================
 *
 * Divi injects ~127 KB of CSS inline on every page. Almost all of it is
 * irrelevant to this site, because the design lives in the rules above. A small
 * part of it is load-bearing, and without that part the homepage's multi-column
 * bands stack vertically — the story band grew from its normal height to 4,173px
 * when Divi's CSS was switched off in a test. This block is that part.
 *
 * HOW THIS LIST WAS ARRIVED AT
 *
 * Not by reading Divi's stylesheet. Every row, column, module and button on the
 * homepage was measured with Divi's CSS on, then measured again with its three
 * inline blocks emptied, and the two sets of computed styles diffed. What is
 * below is exactly what changed, and nothing else.
 *
 * The `et_*` names are kept for the same reason as `#left-area`: they are what
 * the existing markup carries, and renaming markup and stylesheet together on a
 * site about to launch is two risks where one will do.
 *
 * ---------------------------------------------------------------------------
 * STATUS 2026-08-07, FOURTH MEASURED PASS. STILL DO NOT ACTIVATE THE THEME.
 * ---------------------------------------------------------------------------
 *
 * FIRST, A CORRECTION THAT MOVES THE GOALPOSTS.
 *
 * The first three passes measured the page with THREE Divi stylesheets removed.
 * Divi ships six. The largest, `et-divi-open-sans-inline-css`, is 174,766
 * characters on its own — bigger than the other three combined — and it carries
 * the button padding. So every figure before this one described a page with
 * about a third of Divi taken away, while saying it had measured Divi removed.
 * The harness now disables all six and says which, and it warns if one is absent.
 *
 * Homepage at 1512px, all six disabled, images and fonts settled:
 *
 *   Elements drifting more than 2px:  117 of 118  ->  92  ->  78  ->  42 of 125
 *   Document height 5,480px against a 5,509px baseline.
 *
 * `bin/divi-scaffolding.sh` is the authoritative figure, because it runs in the
 * pinned container. The numbers above were taken in a browser driven directly
 * against the same site; the container renders fonts slightly differently.
 *
 * WHAT THE REMAINING 42 ACTUALLY ARE
 *
 * They are no longer a mystery, and they are almost all one thing.
 *
 *   12  Divi's ETmodules icon font (see item 1 below)
 *    8  buttons
 *    3  the header menu links
 *   19  everything else, of which the starter-card image margin is 5
 *
 * Except for the icon font, every one of these is a declaration in THIS
 * STYLESHEET that Divi's `!important` has been overriding since the day it was
 * written. The menu link asks for `padding: 0` and renders at `31px 20px`. The
 * starter-card image asks for a 22.4px bottom margin and renders with none.
 * Removing Divi does not restore those declarations — it lets them win, and the
 * page changes.
 *
 * **That is a decision, and it is the owner's.** Either the masked declarations
 * are deleted, and the site keeps rendering exactly as it does today, or they
 * are honoured, and the site changes in the places listed above. Deleting them
 * is what was done for the one `line-height` already removed, and it is the
 * honest option, because a declaration that has never rendered is not a
 * preference anyone expressed — but it is not a call to make silently across
 * dozens of rules.
 *
 * A THIRD READING CORRECTED, AND THE FIRST ONE WAS CLOSER
 *
 * The previous note said the missing piece was the `et_flex_column_N_24` width
 * rules. Measurement says that was only a small part of it. Those rules are
 * real and they are below — Divi's widths carry its 5.5% gutter, so `6_24` is
 * 20.875% and not 25% — but only one column on the homepage was actually taking
 * its width from them. The load-bearing omissions were `box-sizing`, the
 * `.qwd2-section` flex context, and Divi's real row gutter.
 *
 * The reason the earlier pass reached the wrong conclusion twice is worth
 * naming: it diffed a page whose images had not finished loading. Four story
 * images measured 0px tall in the "baseline" and 214px tall in the comparison,
 * which is a lazy-loading artefact and not a CSS difference at all. Any harness
 * for this must settle images and fonts first. The committed one does.
 *
 * WHAT IS STILL DIFFERENT, MEASURED, NOT GUESSED
 *
 * 1. The six `.qwc-icon-module` glyphs. They draw 30px wide with Divi and 15–22px
 *    without, at an identical computed font-size. This is not a CSS gap: it is
 *    Divi's ETmodules ICON FONT. It cannot be replaced by a rule here. Either
 *    the font ships with this theme — a licence question for the owner — or
 *    those six icons become SVG. THIS IS A DECISION, NOT A BUG.
 *
 * 2. Everything else in the list above — the buttons, the menu links, the
 *    starter-card image margin. All the same fault, described in the status
 *    note: declarations here that Divi has always outranked. This is the
 *    button-rule consolidation recorded in HANDOVER.md as "a separate job",
 *    except it is not confined to buttons and it is now a prerequisite.
 *
 * The harness that produced every number above is committed at
 * `wordpress-platform/visual/divi-scaffolding.mjs`. Run it, do not re-derive it.
 */

/*
 * Divi's universal border-box, and it is universal — not the five selectors this
 * rule listed until the third pass.
 *
 * Scoping it to the flex nodes looked sufficient because those are what the
 * comparison measures. It is not: `a.qwd2-task-row` is a grid with a fixed 52px
 * row and 7.2px of padding, and under `content-box` it grew 10.6px, four times
 * over, in the hero alone. Anything with a declared height and any padding is
 * affected, and most of those elements are not in the measured set.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Divi's heading reset. `line-height: 1em` and the 10px bottom padding are both
 * load-bearing: the starter-card `h3` grew 7px without the first and the hero
 * `h1` lost 10px without the second, in opposite directions on the same page.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding-bottom: 10px;
	line-height: 1em;
}

/*
 * Two headings on the page — the story and WHY QWATT band openers — take their
 * 26px from a Divi module setting rather than from any rule in this file. They
 * fall to the 21px browser default without it. Checked against all eighteen
 * headings on the page; these two are the only ones that move.
 */
.qwd2-story-copy h2,
.qwd2-why-copy h2 {
	font-size: 26px;
}

/*
 * Sections are flex containers too. Nothing in the first pass covered them, and
 * every band on the page is one.
 */
.qwd2-section {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	column-gap: 60px;
	row-gap: 60px;
}

/*
 * Divi's real row gutter, measured: 5.5% across, 40px down. The first pass used
 * `gap: 24px` and `align-items: center`, which are the values of ONE named row
 * on this page rather than the default, and it applied them to all sixteen.
 */
.qwc-flex-row {
	display: flex;
	position: relative;
	column-gap: 5.5%;
	row-gap: 40px;
}

.qwc-flex-column {
	display: flex;
	position: relative;
	flex-direction: column;
	column-gap: 30px;
	row-gap: 30px;
}

/*
 * Divi's column widths carry its own 5.5% gutter, so they are not N/24 of the
 * row: a quarter column is (100% - 3 x 5.5%) / 4 = 20.875%, and a half is
 * (100% - 5.5%) / 2 = 47.25%. Both were read off the rendered page.
 *
 * `:where()` deliberately, so these carry ZERO specificity. Every `qwd2-*`
 * column rule in this file must keep beating them, and this block sits at the
 * foot of the file where it would otherwise win every tie. Written as plain
 * class selectors, `.qwc-span-quarter` silently replaced the header spacer's
 * own 20.875%... with 25%, and that is exactly the class of fault this file
 * already carries four scars from.
 */
:where(.qwc-span-quarter) {
	width: 20.875%;
}

:where(.qwc-span-half) {
	width: 47.25%;
}

:where(.qwc-span-full) {
	width: 100%;
}

.qwc-flex-module {
	display: flex;
	position: relative;
	flex-direction: column;
	column-gap: 30px;
	row-gap: 30px;
}

/* Divi's image module reset, and the `max-width` a theme normally supplies. */
.qwc-image {
	line-height: 0;
}

.qwc-image .qwc-image-wrap {
	display: flex;
	max-width: 100%;
	position: relative;
}

img {
	max-width: 100%;
	height: auto;
}

/* Divi's table reset. The comparison table sits 15px off the band floor. */
table {
	margin-bottom: 15px;
}

/*
 * The header's two columns. Divi has always overridden this stylesheet's
 * `width: auto !important` on both — the pair struck out above — so the split
 * has to be stated. The percentages are measured, and they are percentages
 * rather than pixels so the header still divides correctly at other widths;
 * the comparison only proves 1512px, so run it with QWATT_WIDTH set before
 * trusting them anywhere else.
 */
.qwd2-header-nav-column {
	width: 81.855%;
}

.qwd2-header-search-column {
	width: 16.376%;
}

/* And the search module fills its column rather than shrinking to its content. */
.qwd2-header-search-module {
	width: 100%;
}

/*
 * The button is `inline-flex` here, not Divi's `flex`. Divi made every button a
 * block-level flex container, which is why several of them stretched to their
 * column's full width and had to be reined in by hand elsewhere in this file.
 * `inline-flex` is what a button should have been, and it makes those earlier
 * corrections redundant rather than contradicted.
 *
 * `font-size` and `line-height` are here because the button's padding and gap
 * are declared in `em` further up this file. Without them the padding silently
 * shrinks to 70% — 14px became 9.8px — which reads as a spacing bug rather than
 * as the font-size cascade it actually is.
 */
a.qwc-button {
	display: inline-flex;
	align-items: center;
	column-gap: 11px;
	row-gap: 11px;
	font-size: 20px;
	line-height: 1.7em;
}

/*
 * EVERY button draws 14px on the left and 40px on the right. All seven of them.
 *
 * This stylesheet had NINE declarations trying to set that padding — six
 * `padding-inline` values between 1.1rem and 1.5rem, and three `padding-right`
 * declarations of 3rem, 2.75rem and 1.5rem, each marked `!important` and each
 * written to beat the one before it. Not one of them has ever rendered. Divi
 * won all nine, and it has been quietly supplying the padding of every button on
 * the homepage since the day the first of them was written.
 *
 * All nine are struck out where they stand, and the value is stated once, here.
 * That is `HANDOVER.md`'s "four overlapping padding rules on one button — a
 * separate job", closed: there were nine, not four, and they were on all seven.
 */
a.qwd2-button.qwc-button {
	padding-left: 14px;
	padding-right: 40px;
}

/*
 * THE ARROW ON EVERY BUTTON WAS ALSO A DIVI GLYPH — ETmodules U+0024.
 *
 * This stylesheet has a `::after` rule for the button arrow whose body is a
 * single comment: "Neutralised: Divi renders the button icon now." It does. So
 * removing Divi removes the arrow from all seven buttons, and each one loses the
 * 20px glyph plus its 6px margin plus the 11px flex gap — the 37px every button
 * was still short by after the padding was fixed.
 *
 * Redrawn from the same measurement as the other six: 20px box, 6px to its left,
 * `currentColor` so it keeps taking the button's own colour on teal, on ink and
 * on paper without three more rules.
 */
a.qwd2-button.qwc-button::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-left: 6px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 50h76M60 24l26 26-26 26'/%3E%3C/svg%3E");
	mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 50h76M60 24l26 26-26 26'/%3E%3C/svg%3E");
}

/*
 * The header menu. Divi supplies the whole flex chain from the module down to
 * the `<ul>`; without it the navigation stacks vertically and the header grows
 * from 82px to 604px. The breakpoint is Divi's own 980px.
 */
/*
 * The header and footer sections and the menu module are flex containers that
 * carry none of the `qwd2-*` or `et_flex_*` class names, so nothing above
 * reaches them. Without this the menu's inner container stretches to the full
 * column instead of sizing to its content.
 */
.qwc-section,
.qwc-menu-module {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
}

/*
 * Sections carry the same 60px gap as `.qwd2-section`, and the footer is the one
 * that needs it — it is an `.qwc-section` with a `qwd2-footer` class, so no
 * rule written for `.qwd2-section` has ever reached it. Without this the footer
 * loses 60px between its two rows.
 *
 * **The harness could not see that.** Its selector set is the homepage's own
 * bands, and the footer is not one of them, so 60px of the page went missing
 * while the comparison reported a single drifting element. That is why the
 * document height is now part of the acceptance test and not just a number
 * printed above it.
 */
.qwc-section {
	column-gap: 60px;
	row-gap: 60px;
}

.qwc-menu-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 0;
}

.qwc-menu-logo-wrap,
.qwc-menu-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/*
 * Divi's gap between the logo and the navigation. It sits on the LOGO as a
 * margin, not on the wrap as padding. A first version put 30px of padding on the
 * wrap, which produced the right width by the wrong mechanism — the wrap would
 * have kept the gap even with the logo hidden.
 */
.qwc-menu-logo {
	margin-right: 30px;
}

.qwc-menu-desktop,
.qwc-menu-desktop > nav,
.qwc-menu-desktop > nav > ul {
	display: flex;
}

/*
 * THE DROPDOWN. This is a component, not scaffolding, and it is the single
 * largest thing Divi was doing for the header.
 *
 * Without it the "Products" submenu is not hidden — it drops into the flex row
 * in normal flow, and the header grows from 82px to 153px while the navigation
 * gets 139px wider. That was the worst element in the whole comparison and it
 * did not look like a menu bug from the numbers alone; it looked like a width
 * problem in the nav column.
 *
 * Every value below was read off the rendered page with Divi on. `top: 75px` is
 * measured rather than derived — the closed state is `visibility: hidden`, so it
 * does not affect layout, but it does decide where the panel appears on hover.
 *
 * The hover reveal is here deliberately. The comparison only measures the closed
 * state, so a dropdown that never opens would pass the test and ship a header
 * with four unreachable pages in it.
 */
.qwc-menu,
.qwc-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Divi pulls the menu list 11px out on each side, so the first and last labels
 * sit flush with the header's edges rather than inset by their own spacing.
 *
 * Those 22px were the last structural difference on the page, and they did not
 * look like a margin: the navigation container measured 22px narrower than the
 * list inside it, which reads as the container being constrained. It is not —
 * `flex-shrink: 0` on both changed nothing. The list simply hangs out of it.
 */
.qwc-menu {
	margin-left: -11px;
	margin-right: -11px;
}

.qwc-menu li {
	position: relative;
	display: flex;
}

.qwc-menu > li > a {
	display: flex;
	padding: 31px 0;
	line-height: 14px;
}

/*
 * The 20px on the right is Divi leaving room for the dropdown caret, so it
 * belongs to the ONE item that has a submenu, not to all six. Applied to all
 * six it made the navigation 100px too wide — five items x 20px — which read as
 * a container sizing fault rather than a padding one.
 */
.qwc-menu > li.menu-item-has-children > a {
	padding-right: 20px;
}

.qwc-menu li ul {
	position: absolute;
	top: 75px;
	left: 0;
	width: 240px;
	padding-top: 20px;
	display: block;
	visibility: hidden;
	opacity: 0;
	z-index: 9999;
}

.qwc-menu li:hover > ul {
	visibility: visible;
	opacity: 1;
}

.qwc-menu li li {
	display: inline-block;
	position: relative;
	width: 240px;
	padding-left: 20px;
}

.qwc-menu li li a {
	display: block;
	width: 200px;
	padding: 6px 20px;
	line-height: 28px;
}

@media (max-width: 980px) {
	.qwc-menu-desktop {
		display: none;
	}
}

@media (min-width: 981px) {
	.qwc-mobile-nav {
		display: none;
	}
}

/*
 * Divi's paragraph reset. The browser's own `margin: 1em 0` on `<p>` was being
 * replaced by Divi with a bottom padding that collapses on the last paragraph of
 * a block. Losing it moved the footer link list 44.7px and the support cards
 * 28px, in opposite directions, which is why neither read as the same fault.
 */
p {
	margin: 0;
	padding-bottom: 1em;
}

p:last-of-type {
	padding-bottom: 0;
}

/*
 * ===========================================================================
 * THE SIX ICONS. QWATT-DEC-2026-08-07-002.
 * ===========================================================================
 *
 * Three in WHY QWATT, three in the support band. They were glyphs from Divi's
 * ETmodules font, which is the one thing in this whole removal that no CSS rule
 * could replace — a font is a file, and that file's licence ends with the
 * refund. The owner's decision was to redraw them as SVG.
 *
 * WHY MASKS AND NOT `<img>` OR INLINE SVG
 *
 * The markup is Divi module output held in the page content, so changing it
 * means a content migration. These are `background-color: currentColor` behind
 * a `mask-image`, which means the shape is CSS and the COLOUR still comes from
 * whatever rule above already colours the icon. Every existing colour rule keeps
 * working, including the hover and dark-band variants, and nothing in the
 * database has to move. When the homepage is rebuilt in the block editor these
 * become inline SVG and this section goes.
 *
 * THE MAPPING IS BY POSITION, AND THAT IS THE WEAK POINT
 *
 * The spans carry no attribute naming the icon — the glyph WAS the content — so
 * the only stable handle is which column each sits in. `.qwc-icon-0` and
 * friends were rejected: they are Divi's positional per-page names, and this
 * file already carries scars from trusting those.
 *
 * **If a column is added, removed or reordered in either band, the icons will
 * silently swap.** They will still be icons, and nothing will look broken, which
 * is exactly why it would be missed. Re-check this block when either band
 * changes. The glyphs replaced, in order, were:
 *
 *   WHY QWATT     U+0068 document   U+E028 lifebuoy   U+E01D map pin
 *   Support band  U+E022 book       U+E028 lifebuoy   U+0076 speech bubble
 *
 * Drawn to the measured box — 96 x 96, 6px stroke, round caps and joins — from
 * screenshots of the originals at 110px. They are not tracings. They are the
 * same objects drawn cleanly, which is what the decision asked for.
 */
.qwd2-why-icon .qwc-icon,
.qwd2-support-icon .qwc-icon {
	/*
	 * The glyph itself is stood down rather than deleted. `font-size: 0` leaves
	 * the character in the DOM — it costs nothing, and it means that if this
	 * block is ever removed the icons come back rather than vanishing.
	 */
	/*
	 * THE SIZE AND THE COLOUR ARE BOTH DIVI'S, AND BOTH HAVE TO BE STATED HERE.
	 *
	 * 30px and #086166 were settings in the Divi icon module, not rules in this
	 * stylesheet. With Divi gone the icons fall back to 14px and #10282d — half
	 * the size and the wrong colour — so neither can be left to inherit.
	 *
	 * A first draft hard-coded 96px, and a second sized in `em` on the assumption
	 * that a `font-size` rule existed further up this file to follow. Both were
	 * measured off a baseline with two of Divi's stylesheets still switched off.
	 * These values come from the full baseline, with every Divi sheet loaded and
	 * `document.fonts.check('30px ETmodules')` returning true.
	 *
	 * The glyph is pushed out of the box rather than hidden with `font-size: 0`,
	 * because the font-size is now load-bearing for the box itself.
	 */
	font-size: 30px;
	color: #086166;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* WHY QWATT, column 1 — document with lines (was U+0068). */
.qwd2-why-column:nth-child(1) .qwd2-why-icon .qwc-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='7' width='70' height='82' rx='4'/%3E%3Cpath d='M46 29h22M28 45h40M28 59h40M28 73h40'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='7' width='70' height='82' rx='4'/%3E%3Cpath d='M46 29h22M28 45h40M28 59h40M28 73h40'/%3E%3C/svg%3E");
}

/* WHY QWATT, column 2 — lifebuoy (was U+E028). Solid, with the ring cut. */
.qwd2-why-column:nth-child(2) .qwd2-why-icon .qwc-icon,
.qwd2-support-item:nth-child(2) .qwd2-support-icon .qwc-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cmask id='b'%3E%3Crect width='96' height='96' fill='%23fff'/%3E%3Ccircle cx='48' cy='48' r='20' fill='%23000'/%3E%3Crect x='43.5' y='-4' width='9' height='104' fill='%23000' transform='rotate(45 48 48)'/%3E%3Crect x='43.5' y='-4' width='9' height='104' fill='%23000' transform='rotate(-45 48 48)'/%3E%3C/mask%3E%3Ccircle cx='48' cy='48' r='45' fill='%23000' mask='url(%23b)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cmask id='b'%3E%3Crect width='96' height='96' fill='%23fff'/%3E%3Ccircle cx='48' cy='48' r='20' fill='%23000'/%3E%3Crect x='43.5' y='-4' width='9' height='104' fill='%23000' transform='rotate(45 48 48)'/%3E%3Crect x='43.5' y='-4' width='9' height='104' fill='%23000' transform='rotate(-45 48 48)'/%3E%3C/mask%3E%3Ccircle cx='48' cy='48' r='45' fill='%23000' mask='url(%23b)'/%3E%3C/svg%3E");
}

/* WHY QWATT, column 3 — map pin (was U+E01D). */
.qwd2-why-column:nth-child(3) .qwd2-why-icon .qwc-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 89C33 70 18 56 18 39a30 30 0 1 1 60 0c0 17-15 31-30 50z'/%3E%3Ccircle cx='48' cy='38' r='12.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 89C33 70 18 56 18 39a30 30 0 1 1 60 0c0 17-15 31-30 50z'/%3E%3Ccircle cx='48' cy='38' r='12.5'/%3E%3C/svg%3E");
}

/* Support band, column 1 — book (was U+E022). */
.qwd2-support-item:nth-child(1) .qwd2-support-icon .qwc-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 32V20a4 4 0 0 1 4-4h54v62l-12 8'/%3E%3Crect x='14' y='32' width='52' height='54' rx='5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 32V20a4 4 0 0 1 4-4h54v62l-12 8'/%3E%3Crect x='14' y='32' width='52' height='54' rx='5'/%3E%3C/svg%3E");
}

/* Support band, column 3 — speech bubble (was U+0076). */
.qwd2-support-item:nth-child(3) .qwd2-support-icon .qwc-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 14c-19.9 0-36 11.4-36 25.5 0 8.1 5.3 15.3 13.5 20-1 5.3-3.8 10.2-8 13.9 6.6-.6 12.9-3.1 18-7.2 3.9 1.1 8.2 1.7 12.5 1.7 19.9 0 36-11.4 36-25.5S67.9 14 48 14z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 14c-19.9 0-36 11.4-36 25.5 0 8.1 5.3 15.3 13.5 20-1 5.3-3.8 10.2-8 13.9 6.6-.6 12.9-3.1 18-7.2 3.9 1.1 8.2 1.7 12.5 1.7 19.9 0 36-11.4 36-25.5S67.9 14 48 14z'/%3E%3C/svg%3E");
}

/*
 * ==========================================================================
 * OWNER VISUAL REVIEW — 2026-08-08
 * Shared corrections from the complete local-site audit. These rules are kept
 * together because they repair system components used across many pages.
 * ==========================================================================
 */

/* Products submenu: a deliberate dark navigation panel, not loose page links. */
.qwc-menu li ul {
	top: calc(100% - 2px);
	width: 17rem;
	padding: 0.65rem;
	border: 1px solid rgb(255 255 255 / 12%);
	background: #061b1f;
	box-shadow: 0 18px 40px rgb(0 0 0 / 32%);
	transform: translateY(0.5rem);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.qwc-menu li:hover > ul,
.qwc-menu li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.qwc-menu li li {
	display: block;
	width: 100%;
	padding: 0;
}

.qwc-menu li li a {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	padding: 0.7rem 0.85rem;
	border-radius: 2px;
	color: rgb(255 255 255 / 88%);
	font-size: 0.9rem;
	line-height: 1.3;
	text-decoration: none;
}

.qwc-menu li li a:hover,
.qwc-menu li li a:focus-visible {
	background: rgb(8 97 102 / 55%);
	color: #fff;
}

/* Why QWATT: stable icon/copy alignment without relying on CSS subgrid. */
body.home .qwd2-why-row.qwc-row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

body.home .qwd2-why-row.qwc-row > .qwd2-why-column {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: start;
	gap: 1.1rem;
	padding: 0;
	border: 0;
}

body.home .qwd2-why-row .qwd2-why-point {
	display: block !important;
	grid-row: auto;
	padding: 0;
}

body.home .qwd2-why-row .qwd2-why-point::before {
	display: none;
}

/* Tool in Focus: copy and genuine product image share one balanced row. */
body.home .qwd2-tool-focus.qwc-row {
	display: grid !important;
	grid-template-columns: minmax(0, 0.88fr) minmax(24rem, 1.12fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
}

body.home .qwd2-focus-copy-column,
body.home .qwd2-focus-stage {
	width: auto !important;
	max-width: none !important;
}

body.home .qwd2-focus-stage {
	min-height: 34rem;
	align-items: center;
	justify-content: center;
}

body.home .qwd2-focus-product img {
	max-width: min(100%, 36rem);
	max-height: 36rem;
}

/* Catalogue conversion band: explicit contrast against generic page rules. */
body #page-container .qwatt-catalogue-band .qwatt-catalogue-band-copy h2 {
	color: #fff !important;
}

body #page-container .qwatt-catalogue-band .qwatt-catalogue-band-copy p:not(.qwd2-kicker-rule):not(.qwatt-catalogue-band-actions) {
	color: rgb(255 255 255 / 84%) !important;
}

.qwatt-catalogue-band-inner {
	width: min(100%, var(--qwp-content));
	margin-inline: auto;
}

/* Dedicated download confirmation. */
.qwatt-catalogue-thanks {
	width: min(100% - 2 * var(--qwp-band-gutter), 54rem);
	min-height: 34rem;
	margin-inline: auto;
	padding-block: clamp(4rem, 9vw, 7rem);
}

.qwatt-catalogue-thanks h2 {
	max-width: 44rem;
	margin: 0;
	font-size: clamp(2.2rem, 5vw, 4.5rem);
	line-height: 0.98;
}

.qwatt-catalogue-thanks > p:not(.qwd2-kicker-rule) {
	max-width: 40rem;
	margin-top: 1.3rem;
}

.qwatt-catalogue-thanks-action {
	margin-top: 2rem !important;
}

body #page-container .qwatt-catalogue-thanks a.qwatt-catalogue-band-button,
body #page-container .qwatt-catalogue-thanks a.qwatt-catalogue-band-button:hover,
body #page-container .qwatt-catalogue-thanks a.qwatt-catalogue-band-button:focus-visible {
	color: #fff !important;
}

.qwatt-cmp-swipe {
	display: none;
}

.qwatt-catalogue-thanks-note {
	color: var(--qwp-muted);
	font-size: 0.9rem;
}

.qwatt-catalogue-download-frame {
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
}

/* Consistent inner-page rail and breathable vertical rhythm. */
body.page:not(.home) .entry-content > :not(.qwatt-page-head):not(.qwatt-catalogue-band):not(.qwatt-head-office):not(.qwatt-product-directory):not(.qwatt-cmp),
body.woocommerce-shop #left-area > :not(.qwatt-catalogue-band) {
	box-sizing: border-box;
}

@media (max-width: 980px) {
	body.home .qwd2-tool-focus.qwc-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	body.home .qwd2-focus-stage {
		min-height: 24rem;
	}

	body.home .qwd2-focus-product img {
		max-height: 26rem;
	}
}

@media (max-width: 900px) {
	.qwatt-cmp-swipe {
		display: block;
		margin: 0 0 0.85rem;
		color: var(--qwp-muted);
		font-size: 0.82rem;
		font-weight: 750;
	}

	body.home .qwd2-why-row.qwc-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	body.home .qwd2-why-row.qwc-row > .qwd2-why-column {
		padding-bottom: 1.75rem;
		border-bottom: 1px solid rgb(16 40 45 / 13%);
	}

	body.home .qwd2-why-row.qwc-row > .qwd2-why-column:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.qwatt-catalogue-thanks {
		width: auto;
		margin-inline: var(--qwp-band-gutter);
	}
}

/*
 * ==========================================================================
 * PRODUCT-FAMILY ARCHIVES — NATIVE STANDALONE THEME
 * ==========================================================================
 *
 * The old archive rules targeted `.qwc-layout-body`, a Divi Theme Builder body
 * that no longer runs. WooCommerce now emits `.woocommerce-products-header`
 * and `ul.products` directly, so the old rail and colour rules missed the real
 * page. This is one category-neutral system for every current and future
 * product family.
 */

body.tax-product_cat #main-content,
body.tax-product_cat #main-content > .container,
body.tax-product_cat #content-area,
body.tax-product_cat #left-area {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 !important;
}

body.tax-product_cat .woocommerce-breadcrumb {
	box-sizing: border-box;
	width: min(100% - 2 * var(--qwp-band-gutter), var(--qwp-content));
	margin: 0 auto !important;
	padding-block: 0.9rem;
	color: var(--qwp-muted);
	font-size: 0.78rem;
}

.qwatt-category-hero {
	width: 100%;
	background:
		radial-gradient(circle at 88% 18%, rgb(14 111 115 / 22%), transparent 30%),
		linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
	color: #fff;
}

.qwatt-category-hero-inner {
	display: flex;
	box-sizing: border-box;
	width: min(100% - 2 * var(--qwp-band-gutter), var(--qwp-content));
	min-height: clamp(18rem, 25vw, 22rem);
	margin-inline: auto;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.qwatt-category-kicker,
.qwatt-category-section-kicker {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: 0.8rem;
}

.qwatt-category-kicker {
	color: rgb(255 255 255 / 86%);
}

.qwatt-category-kicker::before,
.qwatt-category-section-kicker::before {
	width: 2.1rem;
	height: 3px;
	background: var(--qwp-copper);
	content: "";
	flex: 0 0 auto;
}

.qwatt-category-hero h1 {
	max-width: 54rem;
	margin: 0.8rem 0 0;
	color: #fff;
	font-size: clamp(2.35rem, 5.2vw, 4.8rem);
	font-weight: 950;
	letter-spacing: -0.045em;
	line-height: 0.96;
	text-transform: none;
}

.qwatt-category-description,
.qwatt-category-description p {
	max-width: 48rem;
	margin: 1rem 0 0;
	color: rgb(255 255 255 / 80%);
	font-size: clamp(0.98rem, 1.5vw, 1.13rem);
	line-height: 1.65;
}

.qwatt-category-summary {
	display: flex;
	margin-top: clamp(1.5rem, 3vw, 2.2rem);
	align-items: center;
	gap: 1.4rem;
}

.qwatt-category-summary p {
	margin: 0;
	color: rgb(255 255 255 / 64%);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.qwatt-category-summary a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	border-bottom: 1px solid rgb(255 255 255 / 35%);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 850;
	text-decoration: none;
	gap: 0.6rem;
}

.qwatt-category-summary a:hover,
.qwatt-category-summary a:focus-visible {
	border-bottom-color: var(--qwp-copper);
	color: #fff;
}

.qwatt-category-products {
	width: 100%;
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--qwp-paper);
}

.qwatt-category-products-inner {
	width: min(100% - 2 * var(--qwp-band-gutter), var(--qwp-content));
	margin-inline: auto;
}

.qwatt-category-products-head {
	display: flex;
	margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
}

.qwatt-category-section-kicker {
	color: var(--qwp-teal-dark);
}

.qwatt-category-products-head h2 {
	max-width: 45rem;
	margin: 0.65rem 0 0;
	color: var(--qwp-ink);
	font-size: clamp(1.7rem, 3vw, 2.7rem);
	font-weight: 950;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-transform: none;
}

body.tax-product_cat .qwatt-category-products-head .woocommerce-result-count {
	margin: 0 0 0.55rem;
	color: var(--qwp-muted);
	font-size: 0.8rem;
}

body.tax-product_cat .qwatt-category-products-head .woocommerce-ordering {
	margin: 0;
}

body.tax-product_cat .qwatt-category-products-head .orderby {
	min-height: 44px;
	padding: 0 2.4rem 0 0.85rem;
	border: 1px solid var(--qwp-line);
	border-radius: 0;
	background: #fff;
	color: var(--qwp-ink);
	font: inherit;
	font-size: 0.86rem;
}

body.tax-product_cat .qwatt-category-products ul.products {
	display: grid !important;
	width: 100%;
	margin: 0 !important;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

body.tax-product_cat .qwatt-category-products ul.products li.product {
	display: flex !important;
	min-width: 0;
	min-height: 100%;
	box-sizing: border-box;
	padding: clamp(1.25rem, 2.4vw, 1.8rem);
	border: 1px solid var(--qwp-line);
	background: #fff;
	box-shadow: 0 10px 28px rgb(9 42 47 / 5%);
}

body.tax-product_cat .qwatt-category-products ul.products li.product:hover {
	border-color: var(--qwp-teal-dark);
	box-shadow: 0 16px 34px rgb(9 42 47 / 9%);
	transform: translateY(-3px);
}

body.tax-product_cat .qwatt-category-products ul.products li.product > a {
	display: flex;
	min-height: 100%;
	color: inherit;
	flex-direction: column;
	text-decoration: none;
}

body.tax-product_cat .qwatt-category-products ul.products li.product a img {
	width: 100%;
	height: clamp(13rem, 22vw, 17rem);
	margin: 0 0 1.35rem;
	object-fit: contain;
}

body.tax-product_cat .qwatt-category-products .woocommerce-loop-product__title {
	margin-bottom: 0.8rem;
	font-size: 1.18rem !important;
}

body.tax-product_cat .qwatt-category-products .qwatt-loop-specs {
	margin-top: auto;
}

.qwatt-loop-view {
	display: flex;
	min-height: 44px;
	margin-top: 1rem;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--qwp-line);
	color: var(--qwp-teal-dark);
	font-size: 0.88rem;
	font-weight: 900;
}

@media (max-width: 1024px) {
	.qwc-layout-header .qwc-image a,
	.qwc-layout-footer .qwc-image a,
	.qwc-layout-footer .qwc-text a,
	body.tax-product_cat .woocommerce-breadcrumb a {
		display: inline-flex;
		min-height: 44px;
		align-items: center;
	}
}

@media (max-width: 760px) {

	.qwatt-category-hero-inner,
	.qwatt-category-products-inner,
	body.tax-product_cat .woocommerce-breadcrumb {
		width: min(100% - 2.25rem, var(--qwp-content));
	}

	.qwatt-category-hero-inner {
		min-height: 18rem;
	}

	.qwatt-category-summary,
	.qwatt-category-products-head {
		align-items: flex-start;
		flex-direction: column;
	}

	body.tax-product_cat .qwatt-category-products-head .woocommerce-ordering {
		width: 100%;
	}

	body.tax-product_cat .qwatt-category-products-head .orderby {
		width: 100%;
	}

	body.tax-product_cat .qwatt-category-products ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	body.tax-product_cat .qwatt-category-products ul.products li.product a img {
		height: 15rem;
	}
}

/*
 * ==========================================================================
 * Product manuals — themed introduction and compact, aligned model cards.
 * ==========================================================================
 *
 * The earlier card put a 4:3 media plate above a naturally short, wide tool.
 * The image sat at the top of that plate while the name started after the
 * plate's full height, its bottom margin and the card gap. A grinder therefore
 * looked separated from its own model name by more than 170px even though the
 * card boxes themselves were aligned.
 *
 * Keep the governed equal-area sizing, but anchor every approved product image
 * to the bottom of the shared plate. Removing the redundant media margin makes
 * the perceived image-to-name gap the card gap itself, while the fixed plate
 * still keeps every model name on the same row.
 */

.qwatt-manuals-intro {
	display: grid;
	width: min(100% - 2 * var(--qwp-band-gutter), var(--qwp-content));
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 2.5vw, 2rem);
	align-items: end;
	gap: clamp(1.5rem, 5vw, 5.5rem);
	grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
}

.qwatt-manuals-intro h2 {
	max-width: 42rem;
	margin: 0.7rem 0 0;
	color: var(--qwp-ink);
	font-size: clamp(1.8rem, 3.4vw, 3rem);
	font-weight: 950;
	letter-spacing: -0.04em;
	line-height: 1.03;
	text-transform: none;
}

body.page:not(.home) .entry-content > .qwatt-manuals-intro > p {
	max-width: 38rem;
	margin: 0;
	color: var(--qwp-muted);
	font-size: clamp(0.98rem, 1.4vw, 1.08rem);
	line-height: 1.7;
}

body.page:not(.home) .entry-content > .qwatt-manuals-intro + .qwatt-download-list {
	padding-top: clamp(1.2rem, 2.6vw, 2.2rem);
}

.qwatt-download-list > article {
	border-radius: 0;
	box-shadow: 0 10px 28px rgb(9 42 47 / 5%);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.qwatt-download-list > article:hover {
	border-color: var(--qwp-teal-dark);
	box-shadow: 0 16px 34px rgb(9 42 47 / 9%);
	transform: translateY(-3px);
}

.qwatt-download-media {
	position: relative;
	width: calc(100% + 0.8rem);
	margin: -0.4rem -0.4rem 0;
	flex: 0 0 auto;
}

.qwatt-download-media img {
	position: absolute;
	right: auto;
	bottom: 0.9rem;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
}

.qwatt-download-list > article:hover .qwatt-download-media img {
	transform: translateX(-50%) scale(1.04);
}

.qwatt-download-list > article > div {
	display: flex;
	min-height: 2.75rem;
	align-items: flex-start;
	flex-direction: column;
	justify-content: flex-start;
}

body.page:not(.home) #left-area .entry-content .qwatt-download-list > article h2 {
	margin: 0;
	padding: 0;
	font-size: clamp(1.05rem, 1.45vw, 1.2rem);
	line-height: 1.15;
}

.qwatt-download-list > article .qwatt-button {
	width: 100%;
	min-height: 46px;
	box-sizing: border-box;
	justify-content: center;
	border-radius: 0;
}

@media (max-width: 760px) {
	.qwatt-manuals-intro {
		width: min(100% - 2.25rem, var(--qwp-content));
		padding-block: 3rem 1rem;
		align-items: start;
		gap: 1rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.qwatt-download-list > article {
		padding: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qwatt-download-list > article,
	.qwatt-download-list > article:hover {
		transition: none;
		transform: none;
	}

	.qwatt-download-media img,
	.qwatt-download-list > article:hover .qwatt-download-media img {
		transform: translateX(-50%);
	}
}

/*
 * Website-wide button-decoration contract.
 *
 * Several button components are anchors, so inherited link and hover rules can
 * underline their labels even though the component is visually a button. Keep
 * underlines for ordinary text links, but never draw one on a button in any
 * interaction state. `!important` is intentional: it beats older, more-specific
 * page and WooCommerce link rules without changing their colour or layout.
 */
body :where(
	a.qwc-button,
	a.qwd2-button,
	a.qwatt-button,
	a.button,
	a.qwatt-pilot-button,
	a.qwatt-all-products-button,
	a.qwatt-catalogue-band-button,
	a.qwatt-enquiry-button,
	a.qwatt-product-cta,
	a.wp-block-button__link,
	a.wp-element-button,
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"]
),
body :where(
	a.qwc-button,
	a.qwd2-button,
	a.qwatt-button,
	a.button,
	a.qwatt-pilot-button,
	a.qwatt-all-products-button,
	a.qwatt-catalogue-band-button,
	a.qwatt-enquiry-button,
	a.qwatt-product-cta,
	a.wp-block-button__link,
	a.wp-element-button,
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"]
):is(:hover, :focus, :focus-visible, :active, :visited) {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/*
 * ==========================================================================
 * SHARED-PAGE VISUAL REMEDIATION — 2026-08-09
 * ==========================================================================
 *
 * These rules repair components rather than individual URLs.  The Product
 * directory remains taxonomy-driven, catalogue art is the approved attachment,
 * and contact/dealer content keeps its existing permission gate.
 */

/* /products/: give the live family directory one consistent full-bleed ribbon. */
body.woocommerce-shop .qwatt-product-directory {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--qwp-paper);
}

body.woocommerce-shop .qwatt-product-directory > .qwatt-page-head,
body.woocommerce-shop .qwatt-product-directory > .qwatt-family-grid,
body.woocommerce-shop .qwatt-product-directory > .qwatt-all-products-cta {
	box-sizing: border-box;
	padding-inline: var(--qwp-band-gutter);
}

body.woocommerce-shop .qwatt-product-directory > .qwatt-page-head {
	padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 6vw, 5rem);
	background: linear-gradient(140deg, #0b3b42 0%, #05292f 58%, #02202a 100%);
}

body.woocommerce-shop .qwatt-product-directory > .qwatt-family-grid {
	padding-top: clamp(3rem, 5.5vw, 4.5rem);
}

body.woocommerce-shop .qwatt-product-directory > .qwatt-all-products-cta {
	padding-top: clamp(2rem, 3.5vw, 2.8rem);
	padding-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/* Why QWATT: neutralise old Divi widths/margins before applying the live grid. */
body.home .qwd2-why-row.qwc-row > .qwd2-why-column {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.home .qwd2-why-row .qwd2-why-icon,
body.home .qwd2-why-row .qwd2-why-point {
	margin: 0 !important;
}

body.home .qwd2-why-row .qwd2-why-point {
	padding: 0 !important;
	border: 0 !important;
}

/* Tool in Focus: keep the genuine cut-out fully visible at every breakpoint. */
body.home .qwd2-focus-stage {
	min-height: clamp(23rem, 32vw, 30rem);
}

body.home .qwd2-focus-product,
body.home .qwd2-focus-product .qwc-image-wrap {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

body.home .qwd2-focus-product img {
	width: auto;
	max-width: min(100%, 31rem);
	max-height: 30rem;
	object-fit: contain;
}

/* Contact: one stable, centred form rail instead of a width that drifts by page. */
body.page .qwatt-contact-form.qwatt-dealer-form-block {
	box-sizing: border-box;
	width: min(100%, 52rem);
	max-width: 52rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 3.2vw, 2.5rem);
	border: 1px solid var(--qwp-line);
	background: rgb(255 255 255 / 72%);
}

body.page .qwatt-contact-form.qwatt-dealer-form-block h2,
body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-contact-intro {
	margin-left: 0;
	margin-right: 0;
}

body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-catalogue-fields {
	gap: 0 1.35rem;
}

body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-catalogue-field {
	min-width: 0;
}

body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-catalogue-consent,
body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-catalogue-small {
	max-width: 44rem;
}

@media (max-width: 900px) {
	body.home .qwd2-why-row.qwc-row > .qwd2-why-column {
		grid-template-columns: 30px minmax(0, 1fr);
	}

	body.home .qwd2-focus-stage {
		min-height: 19rem;
	}

	body.home .qwd2-focus-product img {
		max-width: min(88vw, 24rem);
		max-height: 22rem;
	}
}

@media (max-width: 640px) {
	body.page .qwatt-contact-form.qwatt-dealer-form-block {
		width: 100%;
		padding: 1.25rem;
	}

	body.page .qwatt-contact-form.qwatt-dealer-form-block .qwatt-catalogue-fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/*
 * Products directory responsive correction — 2026-08-09.
 *
 * The family directory is itself a direct child of #left-area, so the shared
 * inner-page rule above gave that outer wrapper a gutter.  The directory's
 * nested head then matched the older ID-scoped "nested heads pay no gutter"
 * rule.  At narrow widths the result was the inverse of the intended band
 * construction: the dark band was inset while its copy sat against the band's
 * edge.  Keep the band full width and put the gutter on its three content
 * bands, at the same specificity as the older rule.
 */
body.woocommerce-shop #left-area > .qwatt-product-directory {
	padding-inline: 0;
}

body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-page-head,
body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-family-grid,
body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-all-products-cta {
	padding-inline: var(--qwp-band-gutter);
}

@media (max-width: 900px) {
	body.woocommerce-shop #left-area > .woocommerce-breadcrumb {
		padding-block: 1rem !important;
	}

	body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-page-head {
		padding-block: 2.35rem 2.8rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-page-head h1 {
		font-size: clamp(2.15rem, 7vw, 3rem);
		line-height: 1;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-page-intro {
		max-width: 31rem;
		margin-top: 0.9rem !important;
		font-size: 0.98rem !important;
		line-height: 1.55;
	}

	body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-family-grid {
		padding-top: 2.25rem;
	}
}

/*
 * Two vertical catalogue cards become cramped before the global mobile
 * breakpoint.  Tablet therefore uses one horizontal card per family: the
 * product stays large enough to recognise and the name, summary and action
 * retain a calm reading measure.  Phones return to the familiar vertical card.
 */
@media (max-width: 840px) {
	body.woocommerce-shop .qwatt-product-directory > .qwatt-family-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-card {
		display: grid;
		grid-template-columns: minmax(10.5rem, 0.82fr) minmax(0, 1.18fr);
		align-items: stretch;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-media {
		display: flex;
		min-height: 12rem;
		align-items: center;
		justify-content: center;
		padding: 1.25rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-media img {
		width: 100%;
		height: clamp(8.5rem, 23vw, 11rem);
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-body {
		justify-content: center;
		padding: 1.25rem 1.35rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-summary {
		max-width: 31rem;
		margin-bottom: 0.9rem;
	}
}

@media (max-width: 560px) {
	body.woocommerce-shop #left-area > .qwatt-product-directory > .qwatt-page-head {
		padding-block: 2rem 2.35rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-page-head h1 {
		font-size: clamp(2rem, 11vw, 2.55rem);
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-card {
		display: flex;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-media {
		min-height: 0;
		padding: 1.15rem 1.15rem 0;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-media img {
		height: 8.5rem;
	}

	body.woocommerce-shop .qwatt-product-directory .qwatt-family-body {
		padding: 1.15rem 1.2rem 1.3rem;
	}
}