:root {
	--bath-white: #ffffff;
	--bath-black: #000000;
	--bath-btn-navy: #1d3662;
	--bath-ink: #111111;
	--bath-muted: #646464;
	--bath-line: #dedede;
	--bath-width: calc(100% - 30px);
	--bath-max-width: 1170px;
	--bath-gutter: 15px;
	--section-space: clamp(58px, 7.2vw, 104px);
	--section-space-lg: clamp(72px, 8.6vw, 130px);
	--content-gap: clamp(24px, 3.4vw, 48px);
	/*
	 * Sitewide typography system — matched to hsk.de's measured type scale.
	 * HSK's font is "Matter" (self-hosted MatterTRIAL @font-face, a paid
	 * trial license from Displaay Type Foundry) — not legally reusable here.
	 * Inter is the substitute: same neo-grotesque genre, same generous
	 * weight range (300-800), visually the closest freely-licensed match,
	 * available on Google Fonts. Sizes were kept at Flymus's existing scale
	 * (resizing everything to HSK's own px values would reflow layout);
	 * weight and line-height RATIOS per tier were matched to HSK, which
	 * favors 400/500 over bold weights and tighter heading line-heights.
	 */
	--font-primary: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-heading: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-button: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--bath-sans: var(--font-primary);
	--bath-heading: var(--font-heading);
	--font-size-body: 16px;
	--font-weight-body: 400;
	--line-height-body: 1.5;
	--font-size-body-mobile: 15px;
	--line-height-body-mobile: 1.5;
	--font-size-hero-h1: 40px;
	--font-weight-hero-h1: 400;
	--line-height-hero-h1: 1.2;
	--font-size-page-h1: 40px;
	--font-weight-page-h1: 400;
	--line-height-page-h1: 1.2;
	--font-size-page-h1-mobile: 36px;
	--line-height-page-h1-mobile: 1.2;
	--font-size-product-title: 40px;
	--font-size-product-title-tablet: 38px;
	--font-size-product-title-mobile: 36px;
	--line-height-product-title: 1.2;
	--line-height-product-title-mobile: 1.2;
	--font-size-h2: 32px;
	--font-weight-h2: 400;
	--line-height-h2: 1.2;
	--font-size-h2-mobile: 28px;
	--line-height-h2-mobile: 1.25;
	--font-size-h3: 28px;
	--font-weight-h3: 400;
	--line-height-h3: 1.2;
	--font-size-product-subcategory: 28px;
	--font-size-product-subcategory-tablet: 26px;
	--font-size-product-subcategory-mobile: 24px;
	--line-height-product-subcategory: 1.2;
	--font-size-card-title: 16px;
	--font-weight-card-title: 500;
	--line-height-card-title: 1.3;
	--font-size-intro: 16px;
	--font-weight-intro: 400;
	--line-height-intro: 1.5;
	--font-size-small: 16px;
	--font-weight-small: 400;
	--line-height-small: 1.5;
	--font-size-card-meta: 13px;
	--font-weight-card-meta: 400;
	--line-height-card-meta: 1.5;
	--font-size-card-copy: 16px;
	--font-weight-card-copy: 400;
	--line-height-card-copy: 1.5;
	--font-size-nav: 16px;
	--font-weight-nav: 500;
	--line-height-nav: 1.5;
	--font-size-search: 16px;
	--font-weight-search: 400;
	--line-height-search: 16px;
	--font-size-button: 16px;
	--font-weight-button: 400;
	--line-height-button: 16px;
	--letter-spacing-button: 0px;
	--font-size-button-mobile: 15px;
	--line-height-button-mobile: 16px;
	--letter-spacing-button-mobile: 0px;
	--font-size-mega-primary: 16px;
	--font-weight-mega-primary: 500;
	--line-height-mega-primary: 1.5;
	--font-size-mega-heading: 13px;
	--font-weight-mega-heading: 400;
	--line-height-mega-heading: 1.5;
	--font-size-mega-link: 13px;
	--font-weight-mega-link: 400;
	--line-height-mega-link: 1.5;
	--font-size-overlay-meta: 16px;
	--font-weight-overlay-meta: 500;
	--line-height-overlay-meta: 1.5;
	--font-size-overlay-title: 32px;
	--font-weight-overlay-title: 400;
	--line-height-overlay-title: 1.2;
	--font-color-heading: var(--bath-black);
	--font-color-body: var(--bath-black);
	--font-color-inverse: rgb(241, 241, 241);
	--image-ratio-landscape: 1.52;
	--image-ratio-portrait: 0.734;
	--image-ratio-product: 0.897;
	--image-ratio-editorial: 0.77;
}

/*
 * Shared category/filter/tab pill button.
 * Single source of visual truth for every "pick a category" pill across the
 * site (Homepage featured-product tabs, product category archive filters,
 * Manufacturing video category filters). Add this class alongside a page's
 * own functional class (which stays responsible only for data-binding, JS
 * hooks, and page-specific layout like width/min-width) — never redeclare
 * background/border/font/transition for a pill button outside this block.
 *
 * State model (verified against a real-world reference, HSK's category
 * filters, and reused as-is): default = white; hover AND active = solid
 * black fill with white text, on background-color/color/border-color only,
 * never transform — so a pill can never visually jump, and one pill's
 * hover/focus can never bleed into a neighbour's class or animation.
 * Hover is gated to fine-pointer devices and defensively reset on touch, so
 * a tap can never leave a stuck hover fill behind.
 */
.flymus-filter-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 24px;
	border: 1px solid rgba(17, 17, 17, 0.72);
	border-radius: 999px;
	background-color: var(--bath-white);
	color: var(--font-color-heading);
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 400ms ease-in, border-color 400ms ease-in, color 400ms ease-in;
}

.flymus-filter-pill.is-active,
.flymus-filter-pill.is-current {
	background-color: var(--bath-btn-navy);
	border-color: var(--bath-btn-navy);
	color: var(--bath-white);
}

.flymus-filter-pill:focus-visible {
	outline: 2px solid var(--bath-btn-navy);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.flymus-filter-pill:hover:not(.is-active):not(.is-current) {
		background-color: var(--bath-btn-navy);
		border-color: var(--bath-btn-navy);
		color: var(--bath-white);
	}
}

@media (hover: none), (pointer: coarse) {
	.flymus-filter-pill:hover:not(.is-active):not(.is-current),
	.flymus-filter-pill:active:not(.is-active):not(.is-current) {
		background-color: var(--bath-white);
		border-color: rgba(17, 17, 17, 0.72);
		color: var(--font-color-heading);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flymus-filter-pill {
		transition: none;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: var(--font-color-body);
	background: var(--bath-white);
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
	letter-spacing: normal;
}

button,
input,
textarea,
select,
label {
	font-family: var(--font-primary);
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
a[href],
.button:not(:disabled),
.btn:not(:disabled),
.flymus-filter-pill:not(:disabled),
[data-quote-modal-open],
[data-quote-modal-close],
[data-nav-toggle],
[data-video-filter],
[data-video-trigger],
[data-video-card],
[data-video-modal-close],
[data-product-spec-toggle],
[data-featured-products-prev],
[data-featured-products-next] {
	cursor: pointer;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
[aria-disabled="true"],
.button:disabled,
.btn:disabled,
.flymus-filter-pill:disabled {
	cursor: not-allowed;
}

:where(.page, .single, .archive, .blog) .site-main h1 {
	font-family: var(--font-heading);
	font-size: var(--font-size-page-h1);
	font-weight: var(--font-weight-page-h1);
	line-height: var(--line-height-page-h1);
	color: var(--font-color-heading);
}

:where(.page, .single, .archive, .blog) .site-main h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
	color: var(--font-color-heading);
}

:where(.page, .single, .archive, .blog) .site-main h3 {
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	line-height: var(--line-height-h3);
	color: var(--font-color-heading);
}

:where(.page, .single, .archive, .blog) .site-main p,
:where(.page, .single, .archive, .blog) .site-main li,
.breadcrumb,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb {
	font-family: var(--font-primary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: var(--font-color-body);
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-width {
	width: var(--bath-width);
	max-width: var(--bath-max-width);
	margin: 0 auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header {
	position: relative;
	top: 0;
	z-index: 100;
	background: var(--bath-white);
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 127px;
	gap: 20px;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	width: 175px;
	flex-shrink: 0;
	color: var(--font-color-heading);
}

.site-brand__name {
	font-size: 32px;
	font-weight: var(--font-weight-h2);
	line-height: 0.88;
	text-transform: uppercase;
}

.site-brand__logo {
	display: block;
	width: auto;
	max-width: 175px;
	max-height: 64px;
	object-fit: contain;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 24px;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: 20px;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 127px;
	font-size: var(--font-size-nav);
	font-weight: var(--font-weight-nav);
	line-height: var(--line-height-nav);
	color: var(--font-color-heading);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-nav__item--mega:hover .site-nav__link,
.site-nav__item--mega:focus-within .site-nav__link,
.site-nav__item--dropdown:hover .site-nav__link,
.site-nav__item--dropdown:focus-within .site-nav__link {
	color: var(--bath-btn-navy);
	opacity: 1;
}

.site-nav__item--mega:hover .mega-menu,
.site-nav__item--mega:focus-within .mega-menu,
.site-nav__item--mega.is-open .mega-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.site-nav__item--dropdown:hover .dropdown-panel,
.site-nav__item--dropdown:focus-within .dropdown-panel,
.site-nav__item--dropdown.is-open .dropdown-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.site-nav__cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.site-search {
	display: flex;
	align-items: center;
	width: 151px;
	height: 40px;
	padding: 8px 10px 8px 17px;
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	background: #f4f4f4;
	color: var(--font-color-body);
}

.site-search input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--font-size-search);
	font-weight: var(--font-weight-search);
	line-height: var(--line-height-search);
}

.site-search input::placeholder {
	color: currentColor;
	opacity: 0.8;
}

.site-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-search svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-search:focus-within {
	border-color: #c7c7c7;
	background: var(--bath-white);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 13px 15px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: var(--font-button);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: none;
	white-space: nowrap;
}

.button--dark {
	background: var(--bath-btn-navy);
	color: var(--bath-white);
	padding-inline: 28px;
	border-radius: 999px;
}

/* Header "Get a Quote" CTA stays black-on-white; excluded from the sitewide navy button color. */
.site-nav__cta .button--dark {
	background: var(--bath-black);
}

.button--light {
	background: var(--bath-white);
	color: var(--bath-black);
}

.button--ghost {
	border-color: var(--bath-white);
	color: var(--bath-white);
}

.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 560px;
	min-height: 0;
	background: var(--bath-white);
	color: var(--bath-black);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.dropdown-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 220px;
	min-height: 0;
	background: var(--bath-white);
	color: var(--bath-black);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.mega-menu__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 0;
}

.dropdown-panel__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 0;
}

.mega-menu__columns {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 0;
	padding: 0;
}

.mega-menu__columns:has(.mega-menu__series) {
	grid-template-columns: 190px 1fr;
}

.dropdown-panel__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: start;
}

.mega-menu__categories {
	min-height: 0;
	padding: 0;
	border-right: 1px solid #eeeeee;
}

.mega-menu__category-link {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 46px;
	padding: 0 20px;
	font-size: var(--font-size-mega-primary);
	font-weight: var(--font-weight-mega-primary);
	line-height: var(--line-height-mega-primary);
	color: var(--bath-black);
}

.mega-menu__category.is-active .mega-menu__category-link,
.mega-menu__category-link:hover,
.mega-menu__category-link:focus-visible {
	color: var(--bath-btn-navy);
}

.mega-menu__subcategories {
	min-height: 0;
	padding: 0;
}

.mega-menu__series {
	display: none;
}

.mega-menu__panel {
	display: none;
}

.mega-menu__panel.is-active {
	display: block;
}

.dropdown-panel__group {
	min-height: 0;
	padding: 0;
	border-right: 0;
}

.mega-menu__column-title {
	display: none;
}

.dropdown-panel__group-title {
	display: none;
}

.mega-menu__links {
	display: grid;
	gap: 0;
}

.dropdown-panel__links {
	display: grid;
	gap: 0;
}

.mega-menu__link {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0 20px;
	font-size: var(--font-size-mega-link);
	font-weight: var(--font-weight-mega-link);
	line-height: var(--line-height-mega-link);
	color: var(--bath-black);
}

.dropdown-panel__link {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	font-size: var(--font-size-mega-primary);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-mega-primary);
	color: var(--bath-black);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible,
.dropdown-panel__link:hover,
.dropdown-panel__link:focus-visible {
	color: var(--bath-btn-navy);
}

.dropdown-panel__note {
	display: none;
}

.dropdown-panel__eyebrow {
	margin-bottom: 18px;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-h2);
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--bath-white);
}

.dropdown-panel__copy {
	max-width: 300px;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.hero {
	position: relative;
	height: 400px;
	color: var(--bath-white);
	background: var(--bath-black);
	overflow: hidden;
}

.hero__viewport,
.hero__track,
.hero__slide {
	height: 100%;
}

.hero__track {
	display: flex;
	transform: translateX(0);
	transition: transform 0.45s ease;
	will-change: transform;
}

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	overflow: hidden;
}

.hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 44%, rgba(0, 0, 0, 0.06) 100%);
}

.hero__media {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0;
}

.hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-top: 30px;
	padding-bottom: 58px;
}

.hero .eyebrow {
	color: var(--font-color-inverse);
}

.hero .hero__lead {
	color: var(--font-color-inverse);
}

.hero h1 {
	max-width: 760px;
	margin: 0 0 18px;
	font-family: var(--font-primary);
	font-size: var(--font-size-hero-h1);
	font-weight: var(--font-weight-hero-h1);
	line-height: var(--line-height-hero-h1);
	color: var(--font-color-inverse);
}

.hero__lead {
	max-width: 560px;
	margin: 0 0 22px;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: var(--font-color-inverse);
}

.hero .button {
	align-self: flex-start;
	margin-top: 0;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 12px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #333;
	font-size: 28px;
	line-height: 1;
	opacity: 0.75;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
	opacity: 1;
	outline: 0;
}

.hero__arrow--prev {
	left: 18px;
}

.hero__arrow--next {
	right: 18px;
}

.hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.hero__dot {
	width: 10px;
	height: 10px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.hero__dot.is-active {
	background: #fff;
}

.eyebrow {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-small);
	line-height: var(--line-height-small);
	color: currentColor;
}

.eyebrow--inverse {
	color: var(--bath-white);
}

.section {
	padding: var(--section-space) 0;
	background: var(--bath-white);
}

.section--white {
	background: var(--bath-white);
}

.section--dark {
	background: var(--bath-black);
	color: var(--bath-white);
}

.section-heading h2,
.image-copy h2,
.dark-feature h2,
.cta-panel h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
}

.image-copy p,
.dark-feature p,
.resource-row p,
.image-tile p {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: var(--bath-muted);
}

.section-heading {
	max-width: 950px;
	margin-bottom: clamp(38px, 4.3vw, 62px);
}

.section-heading--wide {
	max-width: 1220px;
	margin-left: var(--bath-gutter);
}

.section-heading--wide h2 {
	margin-bottom: 18px;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
	color: var(--font-color-heading);
}

.section-heading--wide p,
.faq-layout .section-heading p {
	max-width: 1220px;
	font-size: var(--font-size-intro);
	font-weight: var(--font-weight-intro);
	line-height: var(--line-height-intro);
	color: var(--font-color-body);
}

.section-heading .eyebrow {
	margin-bottom: 16px;
}

.section-heading--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(32px, 5vw, 72px);
	max-width: none;
}

.section-heading--split > div {
	max-width: 780px;
}

.collections-section {
	padding: clamp(72px, 8vw, 114px) 0 var(--section-space-lg);
}

.collections-section .site-width {
	width: calc(100% - 30px);
	max-width: 1250px;
}

.collections-heading {
	max-width: 1012px;
	margin-left: 15px;
	margin-bottom: clamp(34px, 3.5vw, 50px);
}

.collections-heading h2 {
	margin-bottom: 18px;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
	color: var(--font-color-heading);
}

.collections-heading p {
	max-width: 1012px;
	font-size: var(--font-size-intro);
	font-weight: var(--font-weight-intro);
	line-height: var(--line-height-intro);
	color: var(--font-color-body);
}

.collection-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 610px));
	column-gap: 30px;
	row-gap: 20px;
	align-items: stretch;
	width: 100%;
	justify-content: center;
}

.collection-tile {
	min-width: 0;
}

.collection-tile a {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
	color: var(--bath-white);
	overflow: hidden;
}

.image-copy__image,
.dark-feature__image {
	background-image: url("../images/product-grid.png");
	background-size: 210%;
	background-repeat: no-repeat;
}

.collection-tile__media {
	display: block;
	height: 100%;
	width: 100%;
	aspect-ratio: 610 / 400;
}

.collection-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection-tile--vanities {
	grid-row: span 2;
	align-self: stretch;
}

.collection-tile--vanities a {
	height: 100%;
}

.collection-tile--vanities .collection-tile__media {
	height: 100%;
	aspect-ratio: auto;
}

.collection-tile--shower-doors .collection-tile__media {
	aspect-ratio: 610 / 409;
}

.collection-tile a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.34) 70%, rgba(0, 0, 0, 0.66) 100%);
}

.collection-tile__label {
	position: absolute;
	left: 61px;
	right: 61px;
	bottom: 28px;
	z-index: 1;
}

.collection-tile--vanities .collection-tile__label {
	bottom: 49px;
}

.collection-tile__label p {
	margin-bottom: 9px;
	font-family: var(--font-heading);
	font-size: var(--font-size-overlay-meta);
	font-weight: var(--font-weight-overlay-meta);
	line-height: var(--line-height-overlay-meta);
	color: var(--font-color-inverse);
}

.collection-tile__label h3 {
	max-width: 488px;
	font-family: var(--font-heading);
	font-size: var(--font-size-overlay-title);
	font-weight: var(--font-weight-overlay-title);
	line-height: var(--line-height-overlay-title);
	color: var(--font-color-inverse);
}

.featured-products-section {
	padding-top: clamp(20px, 2.6vw, 34px);
	padding-bottom: clamp(80px, 8.3vw, 120px);
}

.featured-products-section .section-heading h2 {
	font-weight: 700;
}

.featured-products__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
	margin: 0 0 clamp(34px, 3.4vw, 48px);
	padding: 0;
}

.featured-products__toolbar li {
	flex: 0 0 auto;
}

/* Visuals live in the shared .flymus-filter-pill class; .featured-products__tab
   only sets this page's own layout width. */
.featured-products__tab {
	min-width: 186px;
}

.featured-products__carousel {
	position: relative;
	--featured-gap: 16px;
	--featured-visible: 4;
	--featured-media-center: 150px;
}

.featured-products__carousel[hidden],
.featured-products__carousel:not(.is-active) {
	display: none;
}

.featured-products__viewport {
	overflow: hidden;
	width: 100%;
}

.featured-products {
	display: flex;
	gap: var(--featured-gap);
	width: 100%;
	padding: 0;
	transform: translateX(0);
	transition: transform 0.34s ease;
	will-change: transform;
}

.featured-products__carousel.is-empty .featured-products__viewport {
	border: 1px solid #e5e7eb;
	background: #fafafa;
}

.featured-products__empty-message {
	width: 100%;
	padding: 54px 28px;
	text-align: center;
	color: rgb(102, 102, 102);
}

.featured-products::-webkit-scrollbar,
.insights-track::-webkit-scrollbar {
	display: none;
}

.featured-product {
	flex: 0 0 calc((100% - (var(--featured-gap) * 3)) / 4);
	min-width: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.featured-product a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: rgb(51, 51, 51);
}

.featured-product__media {
	aspect-ratio: 296 / 300;
	overflow: hidden;
	background: #f5f5f1;
}

.featured-product__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-product__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 4px 0;
}

.featured-product__body h3,
.insight-card h3,
.customization-list h3 {
	margin-bottom: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-card-title);
	font-weight: var(--font-weight-card-title);
	line-height: var(--line-height-card-title);
	color: var(--font-color-heading);
}

.featured-product__body h3 {
	flex: 1 1 auto;
	min-height: calc(var(--line-height-card-title) * 2);
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 400;
	line-height: 28.8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.featured-products__nav {
	position: absolute;
	top: var(--featured-media-center);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 0;
	color: var(--bath-black);
	cursor: pointer;
	opacity: 0.78;
	transform: translateY(-50%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.featured-products__nav::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.featured-products__nav--prev::before {
	transform: rotate(-135deg);
}

.featured-products__nav--next::before {
	transform: rotate(45deg);
}

.featured-products__nav--prev {
	right: calc(100% + 26px);
}

.featured-products__nav--next {
	left: calc(100% + 26px);
}

.featured-products__nav:hover,
.featured-products__nav:focus-visible {
	opacity: 1;
	transform: translateY(-50%) scale(1.04);
}

.featured-products__nav:focus-visible {
	outline: 0;
}

.featured-products__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

.featured-products__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 26px;
	line-height: 1;
}

.featured-products__dot {
	display: block;
	width: 10px;
	height: 10px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bath-black);
	cursor: pointer;
	opacity: 0.2;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.featured-products__dot:hover,
.featured-products__dot:focus-visible {
	opacity: 0.7;
}

.featured-products__dot:focus-visible {
	outline: 0;
}

.featured-products__dot.is-active {
	opacity: 1;
}

.insight-card p,
.customization-list p,
.faq-list p {
	display: block;
	font-size: var(--font-size-card-copy);
	font-weight: var(--font-weight-card-copy);
	line-height: var(--line-height-card-copy);
	color: var(--font-color-body);
}

.customization-section {
	padding-top: clamp(76px, 7.5vw, 108px);
	padding-bottom: clamp(80px, 8.75vw, 126px);
}

.customization-editorial {
	display: grid;
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
	gap: clamp(32px, 7.6vw, 110px);
	align-items: start;
}

.customization-editorial__image {
	aspect-ratio: 500 / 650;
	height: auto;
	background-image: url("../images/product-grid.png");
	background-size: 220%;
	background-position: left center;
}

.customization-editorial__content .section-heading--wide {
	margin-left: 0;
	margin-bottom: 46px;
}

.customization-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 2.3vw, 34px) clamp(28px, 3.3vw, 48px);
	margin-bottom: 38px;
}

.insights-section {
	padding-top: var(--section-space);
	padding-bottom: clamp(80px, 8.5vw, 122px);
	overflow: hidden;
}

.insights-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(20px, 2.1vw, 30px);
	width: 100%;
	padding: 4px 0 14px;
}

.insight-card {
	min-width: 0;
}

.insight-card a {
	display: block;
	color: rgb(51, 51, 51);
}

.insight-card__image {
	aspect-ratio: 580 / 326;
	height: auto;
	margin-bottom: 22px;
	background-image: url("../images/product-grid.png");
	background-size: 190%;
	background-position: center;
}

.insight-card span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 39px;
	margin-top: 24px;
	padding: 0 18.624px;
	border-radius: 50px;
	background: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
}

.faq-section {
	padding-top: var(--section-space);
	padding-bottom: clamp(80px, 8.3vw, 120px);
}

.faq-layout {
	display: grid;
	grid-template-columns: minmax(16rem, 0.53fr) minmax(0, 1fr);
	gap: clamp(32px, 7.6vw, 110px);
	align-items: start;
}

.faq-layout .section-heading {
	margin-bottom: 0;
}

.faq-layout .section-heading h2 {
	margin-bottom: 18px;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2);
}

.faq-list {
	border-top: 1px solid var(--bath-line);
}

.faq-list details {
	border-bottom: 1px solid var(--bath-line);
}

.faq-list summary {
	position: relative;
	display: block;
	padding: 25px 52px 25px 0;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: var(--font-size-card-title);
	font-weight: var(--font-weight-card-title);
	line-height: var(--line-height-card-title);
	color: var(--font-color-heading);
	list-style: none;
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

.faq-list summary::after {
	content: "+";
	position: absolute;
	top: 23px;
	right: 0;
	font-family: var(--font-primary);
	font-size: var(--font-size-overlay-title);
	font-weight: var(--font-weight-body);
	line-height: 1;
	color: var(--font-color-body);
}

.faq-list details[open] summary::after {
	content: "-";
}

.faq-list p {
	max-width: 720px;
	padding: 0 0 28px;
}

.image-tile {
	display: grid;
	gap: 20px;
}

.image-tile__image {
	aspect-ratio: 16 / 10;
	height: auto;
	background-position: left center;
}

.image-tile:nth-child(2) .image-tile__image {
	aspect-ratio: 16 / 9;
	height: auto;
	background-position: right center;
}

.image-tile__copy {
	display: grid;
	gap: 8px;
}

.image-tile h3 {
	max-width: 620px;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	line-height: var(--line-height-h3);
}

.image-tile p:first-child,
.project-card__meta {
	font-size: var(--font-size-card-meta);
	font-weight: var(--font-weight-card-title);
	line-height: var(--line-height-card-meta);
	color: var(--bath-ink);
}

.text-link {
	display: inline-flex;
	width: fit-content;
	margin-top: 7px;
	font-size: var(--font-size-card-meta);
	font-weight: var(--font-weight-card-title);
	line-height: 1.2;
	text-transform: uppercase;
	border-bottom: 2px solid currentColor;
}

.editorial-grid {
	display: grid;
	gap: 34px;
}

.editorial-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-tile--editorial .image-tile__image {
	aspect-ratio: 16 / 11;
	height: auto;
	background-position: center;
}

.image-tile--editorial:nth-child(2) .image-tile__image {
	background-position: right center;
}

.visual-entry {
	position: relative;
	display: block;
	color: var(--bath-white);
	overflow: hidden;
}

.visual-entry::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 34%, rgba(0, 0, 0, 0.66) 100%);
}

.visual-entry__label {
	position: absolute;
	left: clamp(22px, 3.1vw, 52px);
	right: clamp(22px, 3.1vw, 52px);
	bottom: clamp(22px, 2.9vw, 42px);
	z-index: 1;
}

.visual-entry__label p {
	max-width: 520px;
	margin-bottom: 10px;
	font-family: var(--font-heading);
	font-size: var(--font-size-overlay-meta);
	font-weight: var(--font-weight-overlay-meta);
	line-height: var(--line-height-overlay-meta);
	color: var(--bath-white);
}

.image-tile .visual-entry__label p {
	color: var(--bath-white);
}

.visual-entry__label h3 {
	max-width: 560px;
	font-family: var(--font-heading);
	font-size: var(--font-size-overlay-title);
	font-weight: var(--font-weight-overlay-title);
	line-height: var(--line-height-overlay-title);
	color: var(--bath-white);
}

.image-copy {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.image-copy__image {
	aspect-ratio: 62 / 62;
	height: auto;
	background-position: right center;
}

.image-copy__text,
.dark-feature__copy {
	display: grid;
	gap: 18px;
}

.dark-feature {
	display: grid;
	grid-template-columns: 0.88fr 1.12fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.dark-feature p {
	color: rgba(255, 255, 255, 0.74);
}

.dark-feature__image {
	aspect-ratio: 5 / 4;
	height: auto;
	background-position: left center;
}

.project-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.image-tile--project .image-tile__image {
	height: 300px;
	background-position: center;
}

.image-tile--project:nth-child(2) .image-tile__image {
	background-position: right center;
}

.image-tile--project:nth-child(3) .image-tile__image {
	background-image: url("../images/hero-bathroom.png");
	background-size: cover;
	background-position: center;
}

.resource-list {
	border-top: 1px solid var(--bath-line);
}

.resource-row {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(28px, 5.5vw, 80px);
	padding: 28px 0;
	border-bottom: 1px solid var(--bath-line);
}

.resource-row h3 {
	font-size: var(--font-size-overlay-title);
}

.cta-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 54px 0;
	border-top: 1px solid var(--bath-line);
	border-bottom: 1px solid var(--bath-line);
}

.site-main {
	padding-bottom: 0;
}

.home-hero__media img,
.home-split__image,
.home-guide-card__media img,
.home-video-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reference container: Shouya uses a 1140px content column at 1440 viewport. */
.home .site-main .site-width {
	max-width: 1140px;
}

.home-categories {
	min-height: 995px;
	margin-top: -13px;
	padding: 80px 0 32px;
	background-color: #f5f3ef;
}

.home .section:not(.home-categories) {
	padding: 80px 0;
}

/* Reference button metrics for homepage content buttons: 44px tall, 8/25 padding, 14px, fully rounded. */
.home .site-main .button {
	min-height: 44px;
	padding: 8px 25px;
	font-size: 14px;
	border-radius: 50px;
}

.home-section-head {
	max-width: 1140px;
	margin: 0 auto 40px;
	text-align: center;
}

.home-categories .home-section-head h2 {
	margin-bottom: 40px;
	line-height: 1.4;
}

.home-categories .home-section-head p {
	margin: 0;
	min-height: 54px;
	font-size: 16px;
	line-height: 1.7;
}

.home-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.home-section-head h2,
.home-manufacturing__copy h2,
.home-overlap-head h2,
.home-production__inner h2,
.home-rfq h2,
.home-partner-cta h2 {
	margin-bottom: 14px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
}

.home-overlap-head h2 {
	margin-bottom: 0;
}

.home-section-head p,
.home-manufacturing__copy p,
.home-overlap-head p,
.home-production__inner p,
.home-rfq p,
.home-partner-cta p {
	font-size: var(--font-size-intro);
	line-height: var(--line-height-intro);
	color: var(--bath-muted);
}

.home-section-head p {
	max-width: 1140px;
	margin-inline: auto;
	font-size: 14px;
}

/*
 * Product Categories grid — measured against Shouya's reference layout:
 * 360px cards, 30px column gap, 1.43:1 image, 18px/600 title beneath it,
 * two rows of three with a 40px row gap (row two as a carousel track).
 */
.home-categories {
	position: relative;
	overflow: hidden;
	background-color: var(--bath-white);
}

.home-categories > .site-width {
	position: relative;
	z-index: 1;
}

.home-categories__background,
.home-categories__overlay {
	position: absolute;
	inset: 0;
}

.home-categories__background {
	z-index: 0;
	display: block;
	pointer-events: none;
}

.home-categories__background img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--home-category-bg-size, cover);
	object-position: var(--home-category-bg-position, left top);
}

.home-categories__overlay {
	z-index: 0;
	background: #000;
	opacity: var(--home-category-overlay-opacity, 0);
	pointer-events: none;
}

.home-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 30px;
	margin-top: 40px;
}

.home-categories__actions {
	display: flex;
	justify-content: center;
	margin-top: 38px;
}

.home-category-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--bath-black);
	background: var(--bath-white);
	overflow: hidden;
}

.home-category-card__media {
	display: block;
	aspect-ratio: 1.43 / 1;
	background-color: #f0f0ed;
	overflow: hidden;
}

.home-category-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.home-category-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	gap: 4px;
	background: var(--bath-white);
	text-align: center;
}

.home-category-card h3 {
	margin: 0;
	padding: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
}

.home-category-card__description {
	display: block;
	margin: -5px 0 10px;
	padding: 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bath-muted);
}

.home-guide-card time {
	display: block;
	margin-bottom: 7px;
	font-size: var(--font-size-card-meta);
	line-height: var(--line-height-card-meta);
	color: var(--bath-muted);
	text-transform: uppercase;
}

.home-guide-card h3 {
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.25;
}

.home-guide-card span {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--bath-black);
}

.home-partner-cta,
.home-rfq {
	background: #222222;
	color: var(--bath-white);
}

/* Reference: 30px section padding + 50px inner padding = 228px band. */
.home-partner-cta {
	padding: 30px 0;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}

.home-partner-cta__inner,
.home-rfq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 0;
}

.home-partner-cta__inner {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	min-height: 168px;
	padding: 50px 0;
}

.home-partner-cta h2 {
	margin-bottom: 0;
	padding-bottom: 5px;
	line-height: 1.4;
	color: var(--bath-white);
}

.home-partner-cta .button {
	min-width: 328px;
	min-height: 68px;
}

/* Reference: pill-shaped white button, navy text, solid blue fill on hover. */
.home-partner-cta .button--light {
	border: 2px solid var(--bath-white);
	border-radius: 999px;
	color: var(--bath-btn-navy);
	transition: background-color 0.5s, border-color 0.5s, color 0.5s;
}

.home-partner-cta .button--light:hover,
.home-partner-cta .button--light:focus-visible {
	background-color: #2d539f;
	border-color: #2d539f;
	color: var(--bath-white);
}

.home-partner-cta p,
.home-rfq p {
	max-width: 760px;
	color: rgba(255, 255, 255, 0.72);
}

.home-partner-cta p {
	font-size: 14px;
	line-height: 23.8px;
}

/* Reference About/Factory: no section padding, 80px top margin, 40px gap to the facts row. */
.home .section.home-manufacturing {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 80px;
	padding: 0;
}

.home-manufacturing__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	min-height: 395px;
}

/* Reference places the video on the left and the copy on the right,
   with an offset accent block behind its top-left corner. */
.home-manufacturing__video {
	order: 1;
	position: relative;
	margin-top: 65px;
}

.home-manufacturing__video::before {
	content: "";
	position: absolute;
	top: -65px;
	left: -44px;
	width: 275px;
	height: 206px;
	background: var(--home-manufacturing-accent, #1d3662);
}

.home-manufacturing__video .home-video-card {
	position: relative;
	z-index: 1;
}

.home-manufacturing__copy {
	order: 2;
	padding-top: 30px;
}

.home-manufacturing__copy p {
	max-width: 100%;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bath-black);
}

.home-manufacturing__copy p:last-of-type {
	margin-bottom: 0;
}

.home-manufacturing__copy .button {
	margin-top: 20px;
}

.home-video-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: #4b4b4b;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
}

.home-video-card--empty {
	border: 0;
}

.home-video-card > span:not(.video-play-button) {
	position: relative;
	z-index: 1;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 700;
}

/* Reference facts row: borderless, 96px tall, sits inside the About section. */
/*
 * Items shrink to their own content width (icon+number row vs. label row,
 * whichever is wider) and are spaced with justify-content: space-between,
 * so the visual gap before the next icon stays constant regardless of how
 * long each number/label happens to be — a fixed 270px column with
 * left-aligned content made the leftover whitespace vary per item instead.
 */
.home-facts {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	min-height: 96px;
}

.home-fact {
	display: grid;
	grid-template-columns: 60px max-content;
	grid-template-rows: 60px auto;
	column-gap: 20px;
	row-gap: 5px;
	align-items: flex-start;
	justify-content: start;
	flex: 0 0 auto;
	min-height: 96px;
	padding: 0;
	text-align: left;
}

.home-fact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1;
	width: 60px;
	height: 60px;
	color: var(--bath-black);
}

.home-fact__icon img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.home-fact__icon svg {
	width: 60px;
	height: 60px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-fact__value {
	display: block;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	min-height: 30px;
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 23.8px;
	font-weight: 400;
}

.home-fact__number {
	display: inline;
	font-family: var(--font-primary);
	font-size: 26px;
	line-height: 26px;
	font-weight: 400;
	color: var(--bath-black);
}

.home-fact__unit {
	display: inline;
	margin-left: 8px;
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 23.8px;
	font-weight: 400;
	color: var(--bath-black);
}

.home-fact > span:not(.home-fact__icon) {
	display: block;
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	font-family: var(--font-primary);
	font-size: 16px;
	line-height: 27.2px;
	font-weight: 400;
	color: var(--bath-black);
}

.home-oem__lines p,
.home-guides__empty {
	color: var(--bath-muted);
	line-height: 1.65;
}

.home-overlap-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-overlap-head {
	width: 560px;
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
}

.home-overlap-head h2 {
	font-size: 24px;
	line-height: 39.84px;
	font-weight: 600;
}

.home-overlap-head h3 {
	margin-top: 10px;
	font-size: 18px;
	line-height: 29.88px;
	font-weight: 600;
}

.home-overlap {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 348.7px;
	margin-top: 0;
}

.home-overlap__media {
	width: 75%;
	flex: 0 0 75%;
	max-width: 855px;
}

.home-overlap__media img {
	display: block;
	width: 100%;
	height: 348.7px;
	object-fit: cover;
	background: #f0f0ed;
}

.home-overlap__card {
	position: absolute;
	top: 50%;
	width: 456px;
	height: 282.8px;
	padding: 60px 40px 40px;
	background: var(--bath-white);
	transform: translateY(-50%);
	box-sizing: border-box;
}

.home-overlap__card::before {
	content: "";
	position: absolute;
	top: 20px;
	left: -40px;
	width: 80px;
	height: 10px;
	background: #1d3662;
}

@media (min-width: 1025px) {
	.home-oem .home-overlap__card::before {
		left: calc(100% - 40px);
	}
}

.home-overlap__card p {
	margin: 0;
	font-size: 14px;
	line-height: 23.8px;
	font-weight: 400;
	color: var(--bath-black);
}

.home-overlap__card .button {
	margin-top: 20px;
	width: 100%;
	min-height: 43.8px;
	padding: 8px 25px;
	border-radius: 50px;
	font-size: 14px;
	line-height: 23.8px;
	font-weight: 400;
	background: var(--bath-btn-navy);
}

.home-overlap--media-left .home-overlap__media {
	margin-right: auto;
}

.home-overlap--media-left .home-overlap__card {
	right: 0;
}

.home-overlap--media-right .home-overlap__media {
	margin-left: auto;
}

.home-overlap--media-right .home-overlap__card {
	left: 0;
}

.home-development {
	background: #f4f4f4;
	margin-top: 60px;
	padding: 80px 0 85px;
}

.home-development .home-overlap__card {
	background: var(--bath-white);
}

.home-development .site-width {
	max-width: 1140px;
}

.home .site-main .home-development {
	padding: 80px 0 85px;
}

.home .site-main .home-development .site-width {
	max-width: 1140px;
}

.home-oem {
	background-color: var(--bath-white);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.home-oem .home-overlap-head {
	width: 720px;
}

.home-oem .home-overlap-head h2 {
	line-height: 33.6px;
}

.home-oem .home-overlap-head h3 {
	line-height: 25.2px;
}

.home-overlap__lines,
.home-oem__lines {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-overlap__lines li,
.home-oem__lines li {
	display: grid;
	gap: 2px;
	font-size: 13px;
	line-height: 1.5;
}

.home-overlap__lines strong,
.home-oem__lines strong {
	font-weight: 700;
}

.home-overlap__lines span,
.home-oem__lines span {
	color: var(--bath-muted);
}

.home-service-tags,
.home-rfq__products,
.home-production__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.home-service-tags span,
.home-rfq__products span,
.home-production__steps span {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 700;
}

/* Inside the overlap card the tags are a compact supporting row. */
.home-overlap__card .home-service-tags {
	gap: 8px;
	margin-top: 16px;
}

.home-overlap__card .home-service-tags span {
	min-height: 30px;
	padding: 0 14px;
	font-size: 12px;
}

/* Reference Production: white band, copy column left inside the container,
   media bleeding to the right viewport edge. */
.home-production {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 473px;
	padding: 80px 0 40px;
	background: var(--bath-white);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	color: inherit;
	overflow: hidden;
}

.home-production::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: max(42vw, 577px);
	height: 100%;
	background:
		linear-gradient(135deg, rgba(29, 54, 98, 0.055) 0 1px, transparent 1px 52px),
		linear-gradient(45deg, rgba(29, 54, 98, 0.045) 0 1px, transparent 1px 52px);
	background-size: 52px 52px;
	pointer-events: none;
	opacity: 0.82;
}

.home-production[style*="background-image"]::before {
	display: none;
}

.home-production__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
	min-height: 353px;
	padding-left: max(20px, calc((100% - 1140px) / 2));
}

.home-production__inner {
	flex: 0 0 665px;
	max-width: 665px;
	padding-bottom: 20px;
}

.home-production__media {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 353px;
	overflow: hidden;
}

.home-production__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.home-production__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms ease, visibility 320ms ease;
}

.home-production__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.home-production__media img {
	display: block;
	width: 100%;
	height: 353px;
	object-fit: cover;
	background: #f0f0ed;
}

.home-production__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--bath-black);
	transform: translateY(-50%);
	transition: background 180ms ease, color 180ms ease;
}

.home-production__arrow:hover,
.home-production__arrow:focus-visible {
	background: var(--bath-black);
	color: var(--bath-white);
}

.home-production__arrow--prev {
	left: 0;
}

.home-production__arrow--next {
	right: 0;
}

.home-production__arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-production__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 3;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.home-production__dot {
	width: 10px;
	min-width: 10px;
	height: 10px;
	min-height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
}

.home-production__dot.is-active {
	background: var(--bath-black);
}

.home-production h2 {
	max-width: 620px;
	margin-bottom: 12px;
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
	color: var(--bath-black);
}

.home-production p {
	max-width: 599px;
	min-height: 95px;
	margin: 0 0 24px;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
	color: var(--bath-black);
}

.home-production .button {
	min-height: 43.8px;
	padding: 8px 25px;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: 0.5px;
	background: var(--bath-btn-navy);
	border-color: var(--bath-btn-navy);
}

.home-production__subtitle {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	letter-spacing: normal;
	color: var(--bath-black);
}

.home .site-main .home-production__subtitle {
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	letter-spacing: normal;
}

.home .site-main .home-production h2,
.home .site-main .home-guides .home-section-head h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
}

.home .site-main .home-production p,
.home .site-main .home-guides .home-section-head p {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

/* Reference Blog band: light grey, centred head, 3 square overlay cards, centred CTA. */
.home-guides {
	padding: 80px 0;
	background: #f4f4f4;
}

.home-guides .home-section-head {
	margin-bottom: 40px;
}

.home-guides .home-section-head h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
}

.home-guides .home-section-head p {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.home-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.home-guide-grid--count-1 .home-guide-card {
	grid-column: 2;
}

.home-guide-grid--count-2 .home-guide-card:first-child {
	grid-column: 1;
}

.home-guide-grid--count-2 .home-guide-card:nth-child(2) {
	grid-column: 3;
}

.home-guides__actions {
	margin-top: 40px;
	text-align: center;
}

.home-guide-card a {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 353px;
	padding: 30px 20px;
	color: var(--bath-white);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: #f1f1ee;
	overflow: hidden;
}

.home-guide-card a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72));
}

.home-guide-card__overlay {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: end;
	gap: 9px;
	min-height: 120px;
}

.home-guide-card time {
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font-size: 10px;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: normal;
}

.home-guide-card h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 22.4px;
	letter-spacing: normal;
	color: var(--bath-white);
}

.home-guide-card span {
	color: var(--bath-white);
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
	text-decoration: none;
}

.home-guides__actions .button {
	min-height: 43.8px;
	padding: 8px 25px;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: 0.5px;
}

/* Blog archive and single post templates, measured against Shouya's
   1140px content rail, 737px list column and 330-363px sidebar. */
.blog-hero {
	margin-top: 0;
}

.blog-hero__bg {
	display: flex;
	align-items: end;
	min-height: 422px;
	padding: 200px 0 80px;
	color: var(--bath-white);
	background-color: #1f2933;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

.blog-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
}

.blog-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.blog-hero h1 {
	max-width: 1140px;
	margin: 0 auto 10px;
	font-size: 33.6px;
	font-weight: 600;
	line-height: 47.04px;
	letter-spacing: normal;
	color: var(--bath-white);
}

.blog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	color: var(--bath-white);
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.blog-breadcrumb a {
	color: var(--bath-white);
}

.blog-hero p {
	max-width: 1140px;
	margin: 50px auto 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bath-white);
}

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 737px) minmax(0, 363px);
	gap: 40px;
	align-items: start;
	width: min(1140px, calc(100% - 40px));
	max-width: 1140px;
	margin-inline: auto;
	padding: 60px 0;
}

.blog-layout--single {
	grid-template-columns: minmax(0, 770px) minmax(0, 330px);
}

.blog-list {
	display: grid;
	gap: 20px;
}

.blog-list-card {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 40px;
	min-height: 212px;
	padding: 20px;
	background: var(--bath-white);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
}

.blog-list-card__media img {
	display: block;
	width: 230px;
	height: 172px;
	object-fit: cover;
	background: #f0f0ed;
}

.blog-list-card__body {
	align-self: center;
}

.blog-list-card h2 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 25.2px;
	letter-spacing: normal;
}

.blog-list-card h2 a,
.blog-read-more,
.blog-sidebar a,
.single-blog__nav a,
.single-related a {
	color: var(--bath-black);
}

.blog-list-card__excerpt {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 400;
	line-height: 20.4px;
	letter-spacing: normal;
	color: var(--bath-black);
}

.blog-list-card__excerpt p {
	margin: 0;
}

.blog-read-more {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.blog-sidebar {
	display: grid;
	gap: 20px;
}

.blog-search {
	display: flex;
	width: 202px;
	height: 42px;
}

.blog-search input {
	width: 130px;
	min-height: 42px;
	padding: 0 10px;
	border: 1px solid #d9d9d9;
}

.blog-search button {
	width: 72px;
	min-height: 42px;
	border: 0;
	background: var(--bath-btn-navy);
	color: var(--bath-white);
	font-size: 13px;
}

.blog-sidebar__block h2 {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
}

.blog-layout--single .blog-sidebar__block h2 {
	font-size: 18px;
	line-height: 25.2px;
}

.blog-sidebar-products {
	display: grid;
	gap: 20px;
}

.blog-sidebar-product {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	min-height: 70px;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.blog-layout--single .blog-sidebar-product {
	grid-template-columns: 62px minmax(0, 1fr);
}

.blog-sidebar-product img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	background: #f0f0ed;
}

.blog-layout--single .blog-sidebar-product img {
	width: 62px;
	height: 62px;
}

.blog-sidebar-posts {
	display: grid;
	gap: 30px;
}

.blog-sidebar-posts a {
	display: block;
	font-size: 18px;
	font-weight: 300;
	line-height: 25.2px;
	letter-spacing: normal;
}

.single-blog__date {
	display: block;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bath-muted);
}

.single-blog__content {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.single-blog__content > * {
	margin-top: 0;
	margin-bottom: 20px;
}

.single-blog__content h2 {
	margin-top: 38px;
	margin-bottom: 14px;
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
}

.single-blog__content h3 {
	margin-top: 28px;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	letter-spacing: normal;
}

.single-blog__content img {
	max-width: 100%;
	height: auto;
}

.single-blog__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.single-blog__content th,
.single-blog__content td {
	padding: 12px;
	border: 1px solid #dedede;
	text-align: left;
}

.single-blog__content ul,
.single-blog__content ol {
	padding-left: 1.4em;
}

.single-blog__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #e7e7e7;
	font-weight: 600;
}

.single-blog__nav div:last-child {
	text-align: right;
}

.single-related {
	margin-top: 44px;
}

.single-related h2 {
	margin-bottom: 20px;
	font-size: 24px;
}

.single-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.single-related a {
	display: block;
	min-height: 130px;
	padding: 20px;
	background: #f4f4f4;
	font-weight: 600;
}

.single .site-main .single-blog__content,
.single .site-main .single-blog__content p,
.single .site-main .single-blog__content li,
.single .site-main .single-blog__content table,
.single .site-main .single-blog__content th,
.single .site-main .single-blog__content td {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.single .site-main .single-blog__content h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	letter-spacing: normal;
}

.single .site-main .single-blog__content h3,
.single .site-main .single-related h2 {
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	letter-spacing: normal;
}

.single .site-main .single-blog__date {
	font-size: 14px;
	font-weight: 400;
	line-height: 23.8px;
	letter-spacing: normal;
}

.single .site-main .single-related a {
	font-size: 18px;
	font-weight: 300;
	line-height: 25.2px;
	letter-spacing: normal;
}

.home-rfq__inner {
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	min-height: 686px;
	align-content: center;
	padding: 80px 0;
}

.home-rfq__form {
	display: grid;
	gap: 16px;
}

.home-rfq__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.home-rfq__fields label {
	display: grid;
	gap: 7px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.78);
}

.home-rfq__fields input,
.home-rfq__fields select,
.home-rfq__fields textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0;
	background: transparent;
	color: var(--bath-white);
	font-size: 14px;
}

.home-rfq__fields select option {
	color: var(--bath-black);
}

.home-rfq__message {
	grid-column: 1 / -1;
}

.home-rfq__message textarea {
	min-height: 110px;
	resize: vertical;
}

/* Reference footer: light grey band, four columns, dark copyright bar below. */
.site-footer {
	padding: 80px 0;
	background: #f4f4f4;
	color: var(--bath-black);
}

.home .site-footer {
	padding: 80px 0;
}

.site-footer__inner {
	display: grid;
	width: calc(100% - 40px);
	max-width: 1232px;
	grid-template-columns: minmax(0, 321fr) minmax(0, 154fr) minmax(0, 192fr) minmax(0, 385fr);
	gap: 60px;
	align-items: start;
}

.site-copyright {
	padding: 10px 0;
	background: var(--bath-black);
	color: var(--bath-white);
	text-align: center;
}

.site-copyright span {
	font-size: 14px;
	line-height: 1.7;
	font-weight: 700;
}

.site-footer__brand {
	margin-bottom: 12px;
	font-family: var(--font-heading);
	font-size: var(--font-size-card-title);
	font-weight: var(--font-weight-card-title);
	line-height: var(--line-height-card-title);
	text-transform: uppercase;
}

.site-footer__logo {
	display: block;
	width: auto;
	max-width: 175px;
	max-height: 64px;
	object-fit: contain;
	margin-bottom: 12px;
}

.site-footer__copy {
	max-width: 321px;
	font-size: 14px;
	font-weight: var(--font-weight-card-copy);
	line-height: 1.7;
	color: var(--bath-muted);
}

.site-footer__group h2,
.site-footer__group h3 {
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--bath-black);
}

.site-footer__links {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links a,
.site-footer__links button {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: var(--font-weight-card-meta);
	line-height: 1.6;
	color: var(--bath-muted);
	text-align: left;
}

.site-footer__group--products .site-footer__links a {
	white-space: nowrap;
}

.site-footer__links--contact {
	gap: 14px;
}

.site-footer__links--contact li {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bath-muted);
}

.site-footer__links--contact svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-footer__address span {
	max-width: 250px;
}

.site-footer__links--contact .site-footer__quote {
	margin-left: 27px;
}

.site-footer__links a:hover,
.site-footer__links button:hover,
.site-footer__links a:focus-visible,
.site-footer__links button:focus-visible {
	color: var(--bath-black);
	text-decoration: underline;
}

.nav-toggle {
	display: none;
	position: relative;
	z-index: 4;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.nav-toggle__line {
	display: block;
	width: 20px;
	height: 1px;
	margin: 0 auto;
	background: currentColor;
}

@media (max-width: 1180px) {
	:root {
		--bath-max-width: 992px;
	}

	.site-header__inner {
		gap: 24px;
	}

	.site-nav__list {
		gap: 24px;
	}

	.customization-editorial {
		grid-template-columns: 0.85fr 1fr;
		gap: 48px;
	}

	.customization-list {
		grid-template-columns: 1fr;
	}

}

/* Small laptops / landscape tablets: the full desktop header (brand, six
   links, search, CTA) was ~25px wider than a 1024px viewport. Tighten
   spacing only in the range where the desktop nav is still shown. */
@media (min-width: 981px) and (max-width: 1180px) {
	.site-header__inner,
	.site-nav,
	.site-nav__cta {
		gap: 14px;
	}

	.site-nav__list {
		gap: 16px;
		margin-left: 8px;
	}

	.site-brand {
		width: 150px;
	}

	.site-search {
		width: 128px;
	}

	.site-nav__cta .button--dark {
		padding-inline: 20px;
	}
}

@media (max-width: 980px) {
	:root {
		--font-size-body: 16px;
		--line-height-body: 1.6;
		--font-size-h3: 26px;
		--line-height-h3: 1.4;
		--font-size-overlay-title: 30px;
		--line-height-overlay-title: 1.2;
	}

	.site-header__inner {
		position: relative;
		min-height: 92px;
	}

	.site-brand {
		width: auto;
	}

	.site-brand__name {
		font-size: 28px;
	}

	.nav-toggle {
		display: inline-flex;
		margin-left: auto;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		color: var(--font-color-heading);
	}

	.nav-toggle__line {
		width: 24px;
		height: 2px;
		background: var(--font-color-heading);
	}

	.site-nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		display: none;
		width: min(360px, 92vw);
		height: 100vh;
		padding: 36px 20px 36px;
		background: var(--bath-black);
		color: var(--bath-white);
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.62);
		overflow-y: auto;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-header:has(.site-nav.is-open) .site-brand {
		visibility: hidden;
	}

	.site-nav__list {
		display: grid;
		gap: 0;
	}

	.site-nav__link {
		min-height: 0;
		width: 100%;
		padding: 13px 0;
		color: var(--bath-white);
		font-size: var(--font-size-nav);
		font-weight: var(--font-weight-nav);
		text-transform: none;
	}

	.site-nav__cta {
		display: grid;
		gap: 18px;
		margin-top: 24px;
	}

	.site-search {
		display: flex;
		width: 100%;
		height: 40px;
		background: #f4f4f4;
		color: var(--font-color-body);
	}

	.site-nav__item--mega .mega-menu {
		position: static;
		display: none;
		width: 100%;
		min-height: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.site-nav__item--dropdown .dropdown-panel {
		position: static;
		display: none;
		min-height: 0;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.site-nav__item--mega.is-open .mega-menu {
		display: block;
	}

	.site-nav__item--dropdown.is-open .dropdown-panel {
		display: block;
	}

	.mega-menu__inner {
		width: 100%;
		padding: 8px 0 18px;
	}

	.dropdown-panel__inner {
		width: 100%;
		padding: 14px 0 22px;
	}

	.dropdown-panel__columns,
	.collection-grid,
	.home-manufacturing__grid,
	.home-split,
	.home-partner-cta__inner,
	.home-rfq__inner,
	.editorial-grid--two,
	.image-copy,
	.customization-editorial,
	.customization-list,
	.faq-layout,
	.dark-feature,
	.project-strip,
	.resource-row,
	.cta-panel {
		grid-template-columns: 1fr;
	}

	.mega-menu__columns {
		grid-template-columns: 132px minmax(0, 1fr);
		gap: 8px;
		padding: 0;
		align-items: start;
	}

	.section-heading--split,
	.cta-panel {
		display: grid;
		align-items: start;
		justify-content: start;
	}

	.section-heading--split .text-link,
	.cta-panel .button {
		justify-self: start;
	}

	.mega-menu__categories,
	.mega-menu__subcategories {
		min-height: 0;
		padding: 0;
		border-right: 0;
	}

	.mega-menu__categories {
		padding-top: 0;
	}

	.site-nav:has(.site-nav__item--mega.is-open) .site-nav__item:not(.site-nav__item--mega),
	.site-nav:has(.site-nav__item--mega.is-open) .site-nav__cta {
		display: none;
	}

	.site-nav:has(.site-nav__item--mega.is-open) {
		padding-right: 14px;
		padding-left: 14px;
	}

	.site-nav:has(.site-nav__item--mega.is-open) .site-nav__link {
		min-height: 43px;
		padding: 10px 0;
		font-size: var(--font-size-nav);
		line-height: var(--line-height-nav);
	}

	.mega-menu__category-link {
		min-height: 42px;
		padding: 0 8px 0 0;
		font-size: var(--font-size-nav);
		font-weight: var(--font-weight-nav);
		line-height: var(--line-height-nav);
		color: var(--bath-white);
	}

	.mega-menu__panel {
		margin-top: 0;
		padding: 8px 12px 10px;
		background: var(--bath-white);
		border-radius: 0;
	}

	.mega-menu__subcategories {
		display: block;
		padding-top: 0;
		align-self: start;
	}

	.mega-menu__link {
		min-height: 26px;
		padding: 0;
		color: var(--bath-black);
	}

	.mega-menu__links {
		gap: 4px;
	}

	.dropdown-panel__group,
	.dropdown-panel__note {
		min-height: 0;
		padding: 0 0 24px;
		border-right: 0;
	}

	.dropdown-panel__group-title,
	.dropdown-panel__eyebrow {
		margin-bottom: 12px;
		font-size: var(--font-size-card-meta);
	}

	.mega-menu__links,
	.dropdown-panel__links {
		gap: 10px;
	}

	.mega-menu__link,
	.dropdown-panel__link,
	.dropdown-panel__copy {
		font-size: var(--font-size-card-meta);
		line-height: var(--line-height-card-meta);
	}

	.collection-tile--mirrors {
		margin-top: 0;
	}

	.featured-product {
		min-width: 0;
	}

	.featured-products__toolbar {
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 12px 14px;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 4px;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.featured-products__toolbar::-webkit-scrollbar {
		display: none;
	}

	.featured-products__tab {
		flex: 0 0 auto;
		min-width: 172px;
	}

	.featured-products__carousel {
		--featured-gap: 20px;
		--featured-visible: 2;
		--featured-media-center: 184px;
	}

	.featured-product {
		flex-basis: calc((100% - var(--featured-gap)) / 2);
	}

	.featured-products__nav--prev {
		right: auto;
		left: -12px;
	}

	.featured-products__nav--next {
		right: -12px;
		left: auto;
	}

	.insights-track {
		width: 100%;
	}

	.insight-card {
		min-width: 0;
	}

	.customization-editorial {
		gap: 42px;
	}

	.faq-layout {
		gap: 42px;
	}

	.hero h1 {
		font-size: var(--font-size-page-h1-mobile);
		line-height: var(--line-height-page-h1-mobile);
	}

	.hero__content {
		padding-top: 28px;
		padding-bottom: 56px;
	}

	.home-category-grid,
	.home-oem__grid,
	.home-guide-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-facts {
		flex-direction: column;
	}

	.home-fact {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--bath-line);
	}

	.home-fact:last-child {
		border-bottom: 0;
	}

	.site-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__brand-block {
		grid-column: 1 / -1;
	}
}

@media (min-width: 641px) and (max-width: 980px) {
	.collection-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 30px;
	}

	.collection-tile--vanities {
		grid-row: span 2;
	}

	.editorial-grid--two,
	.project-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.featured-products {
		gap: 20px;
	}

	.featured-product__media {
		aspect-ratio: 1 / 1.05;
	}
}

@media (max-width: 640px) {
	:root {
		--bath-max-width: 748px;
		--font-size-h3: 24px;
		--line-height-h3: 1.4;
		--font-size-overlay-title: 28px;
		--line-height-overlay-title: 1.3;
	}

	body {
		font-size: var(--font-size-body-mobile);
		line-height: var(--line-height-body-mobile);
	}

	.section {
		padding: 58px 0;
	}

	.hero h1 {
		font-size: var(--font-size-page-h1-mobile);
		line-height: var(--line-height-page-h1-mobile);
	}

	.hero__lead {
		max-width: calc(100% - 18px);
		font-size: var(--font-size-body-mobile);
		line-height: var(--line-height-body-mobile);
	}

	.image-copy p,
	.dark-feature p,
	.resource-row p,
	.image-tile p {
		font-size: var(--font-size-body-mobile);
		line-height: var(--line-height-body-mobile);
	}

	.collections-heading h2,
	.section-heading h2,
	.section-heading--wide h2,
	.faq-layout .section-heading h2,
	.image-copy h2,
	.dark-feature h2,
	.cta-panel h2 {
		font-size: var(--font-size-h2-mobile);
		line-height: var(--line-height-h2-mobile);
	}

	.section-heading--wide p,
	.collections-heading p,
	.faq-layout .section-heading p {
		font-size: clamp(17.6px, 2.3vw + 8.6px, 21px);
		line-height: clamp(28.16px, 2.6vw + 18px, 33px);
	}

	.image-tile h3 {
		font-size: var(--font-size-h2-mobile);
		line-height: var(--line-height-h2-mobile);
	}

	.visual-entry__label {
		left: 36px;
		right: 36px;
		bottom: 34px;
	}

	.visual-entry__label h3 {
		font-size: var(--font-size-h2-mobile);
		line-height: var(--line-height-h2-mobile);
	}

	.visual-entry__label p {
		font-size: var(--font-size-card-meta);
	}

	.button,
	.insight-card span {
		min-height: 28px;
		padding: 0 12.804px;
		font-size: var(--font-size-button-mobile);
		line-height: var(--line-height-button-mobile);
		letter-spacing: var(--letter-spacing-button-mobile);
	}

	:where(.page, .single, .archive, .blog) .site-main h1 {
		font-size: var(--font-size-page-h1-mobile);
		line-height: var(--line-height-page-h1-mobile);
	}

	:where(.page, .single, .archive, .blog) .site-main h2 {
		font-size: var(--font-size-h2-mobile);
		line-height: var(--line-height-h2-mobile);
	}

	:where(.page, .single, .archive, .blog) .site-main p,
	:where(.page, .single, .archive, .blog) .site-main li,
	.breadcrumb,
	.breadcrumbs,
	.rank-math-breadcrumb,
	.yoast-breadcrumb {
		font-size: var(--font-size-body-mobile);
		line-height: var(--line-height-body-mobile);
	}

	.collection-grid {
		gap: 16px;
	}

	.collection-tile--vanities {
		grid-row: auto;
	}

	.collection-tile .collection-tile__media,
	.collection-tile--vanities .collection-tile__media,
	.collection-tile--mirrors .collection-tile__media,
	.collection-tile--shower-doors .collection-tile__media {
		aspect-ratio: 1 / 1.1;
	}

	.featured-products,
	.insights-track {
		grid-template-columns: 1fr;
	}

	.featured-products__toolbar {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px 12px;
		overflow: visible;
		margin-bottom: 28px;
	}

	.featured-products__tab {
		min-width: 150px;
		min-height: 38px;
		padding: 0 16px;
		font-size: 15px;
		line-height: 38px;
	}

	.featured-products {
		gap: 16px;
	}

	.featured-products__carousel {
		--featured-gap: 16px;
		--featured-visible: 1;
		--featured-media-center: 182px;
	}

	.featured-product {
		flex-basis: 100%;
	}

	.featured-products__nav {
		width: 22px;
		height: 44px;
	}

	.featured-products__nav--prev {
		right: auto;
		left: 0;
	}

	.featured-products__nav--next {
		right: 0;
		left: auto;
	}

	.featured-products__dots {
		gap: 9px;
		margin-top: 22px;
	}

	.featured-product__body {
		padding-inline: 0;
	}

	.featured-product__image,
	.insight-card__image,
	.customization-editorial__image,
	.image-tile__image,
	.image-tile:nth-child(2) .image-tile__image,
	.image-copy__image,
	.dark-feature__image {
		aspect-ratio: 1 / 1;
	}

	.site-footer__inner {
		display: grid;
	}

	.home-category-grid,
	.home-oem__grid,
	.home-guide-grid,
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.home-section-head h2,
	.home-manufacturing__copy h2,
	.home-split__copy h2,
	.home-production__inner h2,
	.home-rfq h2,
	.home-partner-cta h2 {
		font-size: 18px;
		line-height: 1.4;
	}

	.home-categories {
		min-height: 1470px;
		padding: 40px 0 20px;
	}

	.home .section:not(.home-categories) {
		padding: 40px 0;
	}

	.home-category-grid {
		margin-top: 130px;
		gap: 22px;
	}

	.home-partner-cta__inner,
	.home-rfq__inner {
		display: grid;
		justify-items: start;
	}

	.home-partner-cta__inner {
		min-height: 295px;
	}

	.home-manufacturing__grid,
	.home-split {
		gap: 28px;
	}

	.home-manufacturing__grid {
		min-height: 0;
	}

	.home-manufacturing__copy {
		padding-top: 0;
	}

	.home-manufacturing__video {
		margin-top: 28px;
	}

	.home-manufacturing__video::before {
		top: -28px;
		left: -15px;
		width: 48%;
		height: 118px;
	}

	.home-manufacturing-data {
		padding: 0 0 40px;
	}

	.home-facts {
		flex-direction: column;
		gap: 24px;
	}

	.home-rfq__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 0;
	}

	.home-rfq__fields {
		grid-template-columns: 1fr;
	}

	.home-rfq__products {
		margin-top: 0;
	}
}

@media (max-width: 980px) {
	.home-categories {
		min-height: 0;
		padding: 56px 0;
	}

	.home-categories .home-section-head {
		margin-bottom: 32px;
	}

	.home-categories .home-section-head h2 {
		margin-bottom: 18px;
	}

	.home-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
		margin-top: 28px;
	}

	.home-partner-cta__inner {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: start;
		min-height: 0;
		padding: 42px 0;
	}

	.home-production {
		min-height: 0;
		padding: 56px 0;
	}

	.home-production__row {
		display: grid;
		gap: 28px;
		padding-inline: 15px;
	}

	.home-production__inner {
		width: 100%;
		max-width: 100%;
		flex-basis: auto;
	}

	.home-production__media {
		width: 100%;
		height: 300px;
	}

	.home-production__media img {
		height: 300px;
	}

	.home-production::before {
		top: auto;
		bottom: 56px;
		width: 100%;
		opacity: 0.42;
	}

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

	.home-guide-grid--count-1 {
		grid-template-columns: minmax(0, min(353px, 100%));
		justify-content: center;
	}

	.home-guide-grid--count-1 .home-guide-card {
		grid-column: auto;
	}

	.home-guide-card a {
		min-height: 320px;
	}

	.blog-layout,
	.blog-layout--single {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 48px 15px;
	}

	.blog-sidebar {
		max-width: 100%;
	}

	.blog-search {
		width: min(100%, 360px);
	}

	.blog-search input {
		width: 100%;
	}

	.blog-hero {
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.home-categories {
		padding: 46px 0;
	}

	.home-categories .home-section-head {
		margin-bottom: 28px;
	}

	.home-categories .home-section-head p {
		min-height: 0;
		font-size: 14px;
		line-height: 1.7;
	}

	.home-category-grid {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 18px;
	}

	.home-category-card h3 {
		min-height: 44px;
		font-size: 16px;
		line-height: 1.35;
	}

	.home-partner-cta {
		padding: 24px 0;
	}

	.home-partner-cta__inner {
		padding: 34px 0;
	}

	.home-partner-cta .button {
		min-width: 0;
		min-height: 48px;
	}
}

.product-page {
	background: var(--bath-white);
	color: var(--font-color-body);
	padding-top: clamp(44px, 5vw, 72px);
	padding-bottom: clamp(72px, 8vw, 112px);
}

.product-category-hero {
	padding: 0 0 32px;
	background: transparent;
}

.product-category-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
	padding: clamp(34px, 5vw, 64px) clamp(18px, 4vw, 28px);
}

.product-category-hero__stage {
	position: relative;
	overflow: hidden;
	height: 400px;
	background: #1f1d1a;
}

.product-category-hero__media,
.product-category-hero__media img,
.product-category-hero__overlay {
	position: absolute;
	inset: 0;
}

.product-category-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-category-hero__overlay {
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.62) 0%, rgba(16, 16, 16, 0.48) 28%, rgba(16, 16, 16, 0.18) 52%, rgba(16, 16, 16, 0.06) 76%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
}

.product-category-hero__copy {
	width: min(48%, 760px);
	max-width: 100%;
	display: grid;
	gap: 14px;
	color: #fff;
}

.product-category-hero__copy h1 {
	margin: 0;
	max-width: 9ch;
	font-size: clamp(42px, 5vw, 64px);
	line-height: 1.02;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.03em;
}

.term-bathroom-mirror .product-category-hero__copy h1 {
	max-width: none;
}

.term-shower-doors .product-category-hero__copy h1 {
	max-width: none;
}

.product-category-hero__copy .eyebrow {
	display: none;
}

.product-category-hero__copy p:last-child {
	margin: 0;
	width: min(100%, 520px);
	max-width: 520px;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.58;
	color: rgba(255, 255, 255, 0.9);
}

.product-category-page {
	padding: clamp(32px, 4vw, 52px) 0 clamp(72px, 8vw, 112px);
	background: var(--bath-white);
}

.product-category-page__layout {
	display: block;
}

.product-category-results {
	display: grid;
	gap: 32px;
}

.product-category-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

/* Visuals live in the shared .flymus-filter-pill class; .product-category-filter
   only marks the "current page" state (server-rendered, since these are real
   navigation links between category pages, not a client-side toggle). */

.product-category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.product-category-card {
	display: grid;
	grid-template-rows: minmax(0, auto) 1fr;
	border: 0;
	background: transparent;
	align-content: start;
}

.product-category-card__media {
	display: block;
	overflow: hidden;
	background: #f7f6f4;
	aspect-ratio: 1 / 0.9;
}

.product-category-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

.product-category-card:hover .product-category-card__media img,
.product-category-card:focus-within .product-category-card__media img {
	transform: scale(1.03);
}

.product-category-card__body {
	display: grid;
	align-content: start;
	gap: 0;
	padding: 14px 0 0;
	min-height: 72px;
}

.product-category-card__body h2 {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-category-card__body h2 a {
	color: inherit;
	text-decoration: none;
}

.product-category-card__body h2 a:hover,
.product-category-card__body h2 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.product-category-empty {
	padding: 42px;
	border: 1px solid var(--bath-line);
	background: #faf9f6;
}

.product-category-empty h2,
.product-category-empty p {
	margin: 0;
}

.product-category-empty h2 {
	margin-bottom: 12px;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
	margin-top: 28px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 42px;
	height: 42px;
	padding: 0;
	border: 2px solid #4a4a4a;
	border-radius: 999px;
	background: var(--bath-white);
	color: var(--font-color-heading);
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	border-color: var(--bath-btn-navy);
	background: var(--bath-btn-navy);
	color: var(--bath-white);
	outline: 0;
}

.pagination .page-numbers.current {
	border-color: var(--bath-btn-navy);
	background: var(--bath-btn-navy);
	color: var(--bath-white);
}

.pagination .page-numbers.dots {
	cursor: default;
	pointer-events: none;
	font-size: 16px;
	letter-spacing: 0.08em;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	font-size: 26px;
	font-weight: 400;
	padding-bottom: 2px;
}

.product-category-options {
	margin-top: clamp(34px, 4vw, 52px);
}

.product-category-options__heading {
	display: grid;
	gap: 14px;
	margin-bottom: 24px;
	max-width: 920px;
}

.product-category-options__heading h2 {
	margin: 0;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	line-height: var(--line-height-h3);
	color: var(--font-color-heading);
}

.product-category-options__heading p {
	margin: 0;
	font-size: var(--font-size-card-copy);
	font-weight: var(--font-weight-card-copy);
	line-height: var(--line-height-card-copy);
	color: var(--font-color-body);
}

.product-category-options__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #dfe3e7;
	background: var(--bath-white);
}

.product-category-options__table thead th {
	background: #f6f7f8;
	font-weight: 700;
}

.product-category-options__table th,
.product-category-options__table td {
	padding: 16px 18px;
	border: 1px solid #dfe3e7;
	text-align: left;
	vertical-align: middle;
}

.product-category-options__table th {
	width: min(34%, 260px);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: var(--line-height-body);
	color: var(--font-color-heading);
}

.product-category-options__table td {
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);
	color: var(--font-color-body);
}

.product-page__stack {
	display: grid;
	gap: clamp(52px, 6vw, 82px);
}

.product-related-products {
	display: grid;
	gap: 28px;
}

.product-related-products h2 {
	margin: 0;
}

.product-related-products__grid {
	gap: clamp(18px, 2vw, 24px);
}

.product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
	gap: clamp(34px, 4vw, 58px);
	align-items: start;
}

.product-gallery {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.product-gallery__main {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bath-line);
	background: #f7f7f7;
}

.product-gallery__figure {
	display: none;
	aspect-ratio: 1 / 1;
	margin: 0;
}

.product-gallery__figure.is-active {
	display: block;
}

.product-gallery__figure img,
.product-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--bath-black);
	font-size: 22px;
	line-height: 1;
	place-items: center;
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.product-gallery__arrow:hover,
.product-gallery__arrow:focus-visible {
	border-color: var(--bath-black);
	background: var(--bath-white);
	outline: 0;
}

.product-gallery__arrow--prev {
	left: 16px;
}

.product-gallery__arrow--next {
	right: 16px;
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 12px;
	width: 100%;
}

.product-gallery__thumb {
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.product-gallery__thumb.is-active {
	border-color: var(--bath-black);
}

.product-hero__content {
	display: grid;
	gap: 0;
	padding-top: 2px;
}

.single-product .product-hero__content h1 {
	margin: 0 0 26px;
	font-size: var(--font-size-product-title);
	line-height: var(--line-height-product-title);
}

.single-product .product-hero__content > .product-hero__subcategory,
.single-product .product-hero__content > .product-hero__model {
	margin: 0;
	color: var(--font-color-body);
	line-height: var(--line-height-body);
}

.single-product .product-hero__content > .product-hero__subcategory {
	display: block;
	margin: 0 0 14px;
	font-size: var(--font-size-product-subcategory);
	font-weight: 700;
	line-height: var(--line-height-product-subcategory);
}

.single-product .product-hero__content > .product-hero__model {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	margin: 0 0 28px;
}

.product-hero__lead,
.product-copy__content p,
.product-tech-data > p {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: var(--font-color-body);
}

.product-hero__lead {
	margin: 0 0 24px;
}

.product-intro-list {
	display: grid;
	gap: 0;
	margin: 2px 0 8px;
	border-top: 1px solid var(--bath-line);
}

.product-intro-list__row {
	display: grid;
	grid-template-columns: minmax(126px, 0.42fr) minmax(0, 1fr);
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bath-line);
}

.product-intro-list dt,
.product-intro-list dd {
	margin: 0;
	font-size: var(--font-size-card-title);
	line-height: var(--line-height-card-title);
	color: var(--font-color-heading);
}

.product-intro-list dt {
	font-weight: 700;
}

.product-intro-list dd {
	font-weight: var(--font-weight-body);
}

.product-hero__cta {
	justify-self: start;
	margin-top: 28px;
}

.product-section {
	display: grid;
	gap: 24px;
	border-top: 1px solid var(--bath-line);
	padding-top: clamp(28px, 4vw, 42px);
}

.product-section h2 {
	margin: 0;
}

.product-copy__content {
	display: grid;
	gap: 18px;
	width: 100%;
}

.product-copy__content a {
	color: var(--bath-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.product-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #dfe3e7;
	background: var(--bath-white);
}

.product-spec-table th,
.product-spec-table td {
	width: 25%;
	padding: 16px 18px;
	border: 1px solid #dfe3e7;
	background: var(--bath-white);
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);
	text-align: left;
	vertical-align: middle;
	color: var(--font-color-heading);
}

.product-spec-table th {
	font-weight: 700;
}

.product-spec-table tr:nth-child(odd) th,
.product-spec-table tr:nth-child(odd) td {
	background: #f6f7f8;
}

.product-inquiry-form {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.product-inquiry-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px clamp(24px, 3vw, 40px);
	width: 100%;
}

.product-inquiry-form__field--full {
	grid-column: 1 / -1;
}

.product-inquiry-form .quote-modal__field label {
	font-weight: 600;
	color: var(--font-color-heading);
}

.product-inquiry-form .quote-modal__field input,
.product-inquiry-form .quote-modal__field select,
.product-inquiry-form .quote-modal__field textarea {
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid var(--bath-line);
	border-radius: 4px;
	background: var(--bath-white);
}

.product-inquiry-form .quote-modal__field input::placeholder,
.product-inquiry-form .quote-modal__field textarea::placeholder {
	color: var(--bath-muted);
}

.product-inquiry-form .quote-modal__field textarea {
	min-height: 168px;
	resize: vertical;
}

.product-inquiry-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.product-inquiry-form__actions {
	display: flex;
}

.product-inquiry-form__actions .button {
	width: auto;
	min-width: 180px;
}

@media (max-width: 768px) {
	.product-inquiry-form__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.product-inquiry-form__field--full {
		grid-column: 1 / -1;
	}
}

.get-a-quote-page__inner {
	display: grid;
	gap: clamp(28px, 4vw, 44px);
	max-width: 860px;
}

.get-a-quote-page__intro {
	display: grid;
	gap: 12px;
	text-align: center;
}

.get-a-quote-page__card {
	display: grid;
	gap: 24px;
	box-sizing: border-box;
}

.get-a-quote-page__card h2 {
	margin: 0;
}

@media (max-width: 980px) {
	.product-category-hero__copy h1 {
		font-size: clamp(36px, 7vw, 52px);
	}

	.product-category-hero__copy {
		width: min(68%, 720px);
	}

	.product-category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.single-product .product-hero__content h1 {
		font-size: var(--font-size-product-title-tablet);
		line-height: var(--line-height-product-title-mobile);
	}

	.single-product .product-hero__content > .product-hero__subcategory {
		font-size: var(--font-size-product-subcategory-tablet);
	}

	.product-hero {
		grid-template-columns: 1fr;
	}

	.product-category-options__table th {
		width: 220px;
	}
}

@media (max-width: 640px) {
	.product-category-hero {
		padding: 0 0 24px;
	}

	.product-category-hero__stage {
		height: auto;
	}

	.product-category-hero__media {
		position: relative;
		aspect-ratio: 4 / 5;
	}

	.product-category-hero__overlay {
		background: linear-gradient(180deg, rgba(12, 12, 12, 0.12), rgba(12, 12, 12, 0.72));
	}

	.product-category-hero__inner {
		position: absolute;
		inset: auto 0 0;
		padding: 22px 18px 18px;
		align-items: flex-end;
	}

	.product-category-hero__copy {
		width: 100%;
		padding: 18px 16px;
		background: rgba(16, 16, 16, 0.28);
		backdrop-filter: blur(3px);
	}

	.product-category-hero__copy h1 {
		font-size: 34px;
	}

	.product-category-filters {
		gap: 12px;
	}

	.product-category-filter {
		min-height: 38px;
		padding: 8px 18px;
		font-size: 14px;
	}

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

	.product-category-options__heading {
		margin-bottom: 18px;
	}

	.product-category-options__table thead {
		display: none;
	}

	.product-category-options__table,
	.product-category-options__table tbody,
	.product-category-options__table tr,
	.product-category-options__table th,
	.product-category-options__table td {
		display: block;
		width: 100%;
	}

	.product-category-options__table tr {
		padding: 12px 14px;
		border-top: 1px solid #dfe3e7;
	}

	.product-category-options__table th,
	.product-category-options__table td {
		padding: 0;
		border: 0;
		font-size: var(--font-size-small);
		line-height: var(--line-height-body);
	}

	.product-category-options__table tbody tr:first-child {
		border-top: 0;
	}

	.product-category-options__table tbody th {
		margin-bottom: 6px;
		padding-right: 0;
	}

	.product-category-sidebar__panel,
	.product-category-empty {
		padding: 18px;
	}

	.product-category-card__body {
		padding: 18px 18px 22px;
	}

	.product-category-card__body h2 {
		font-size: 21px;
	}

	.single-product .product-hero__content h1 {
		margin-bottom: 22px;
		font-size: var(--font-size-product-title-mobile);
		line-height: var(--line-height-product-title-mobile);
	}

	.single-product .product-hero__content > .product-hero__subcategory {
		margin-bottom: 12px;
		font-size: var(--font-size-product-subcategory-mobile);
	}

	.single-product .product-hero__content > .product-hero__model {
		margin-bottom: 22px;
	}

	.product-page {
		padding-top: 58px;
		padding-bottom: 74px;
	}

	.product-page__stack {
		gap: 54px;
	}

	.product-gallery__thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}

	.product-gallery__arrow {
		width: 32px;
		height: 32px;
		font-size: 20px;
	}

	.product-gallery__arrow--prev {
		left: 10px;
	}

	.product-gallery__arrow--next {
		right: 10px;
	}

	.product-intro-list__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.product-spec-table,
	.product-spec-table tbody {
		display: block;
		width: 100%;
	}

	.product-spec-table tr {
		display: grid;
		grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
		width: 100%;
		border-bottom: 0;
	}

	.product-spec-table th,
	.product-spec-table td {
		display: flex;
		align-items: center;
		width: auto;
		min-width: 0;
		min-height: 48px;
		border-width: 0 0 1px;
		padding: 12px 14px;
	}

	.product-spec-table th:nth-child(odd) {
		border-right: 1px solid #dfe3e7;
	}

	.product-tech-data .product-spec-table tr > :nth-child(1),
	.product-tech-data .product-spec-table tr > :nth-child(2) {
		background: #f6f7f8 !important;
		background-color: #f6f7f8 !important;
	}

	.product-tech-data .product-spec-table tr > :nth-child(3),
	.product-tech-data .product-spec-table tr > :nth-child(4) {
		background: var(--bath-white) !important;
		background-color: var(--bath-white) !important;
	}
}

/* Quote Modal ------------------------------------------------------------ */

.quote-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 40px 24px;
}

.quote-modal[hidden] {
	display: none;
}

.quote-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
}

.quote-modal__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 80px);
	margin: auto 0;
	background: var(--bath-white);
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

body.admin-bar .quote-modal {
	padding-top: calc(40px + 32px);
}

@media (max-width: 782px) {
	body.admin-bar .quote-modal {
		padding-top: calc(40px + 46px);
	}
}

.quote-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 16px;
	padding: 28px 32px;
	border-bottom: 1px solid var(--bath-line);
}

.quote-modal__header h2 {
	margin: 0;
	font-size: 26px;
	line-height: 1.2;
}

.quote-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1px solid var(--bath-line);
	border-radius: 999px;
	background: var(--bath-white);
	color: var(--bath-black);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.quote-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 28px 32px;
}

.quote-modal__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.quote-modal__form[hidden] {
	display: none;
}

.quote-modal__field {
	display: grid;
	gap: 6px;
}

.quote-modal__field--full {
	grid-column: 1 / -1;
}

.quote-modal__field label {
	font-size: 13px;
	font-weight: 700;
	color: var(--bath-black);
}

.quote-modal__required {
	color: var(--bath-muted);
}

.quote-modal__field input,
.quote-modal__field select,
.quote-modal__field textarea {
	min-height: 42px;
	padding: 10px 12px;
	border: 1px solid var(--bath-line);
	border-radius: 4px;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--bath-black);
	background: var(--bath-white);
}

.quote-modal__field textarea {
	min-height: 96px;
	resize: vertical;
}

.quote-modal__error {
	grid-column: 1 / -1;
	padding: 10px 14px;
	border: 1px solid var(--bath-black);
	border-radius: 4px;
	font-size: 13px;
	color: var(--bath-black);
	background: #f6f6f6;
}

.quote-modal__actions {
	grid-column: 1 / -1;
	margin-top: 4px;
}

.quote-modal__actions .button {
	width: auto;
}

.quote-modal__success {
	padding-top: 20px;
	text-align: center;
}

.quote-modal__success p {
	margin: 0 0 16px;
	font-size: 16px;
}

@media (max-width: 640px) {
	.quote-modal {
		padding: 0;
	}

	.quote-modal__panel {
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.quote-modal__header {
		padding: 20px;
	}

	.quote-modal__body {
		padding: 20px;
	}

	.quote-modal__form {
		grid-template-columns: 1fr;
	}

	.quote-modal__field,
	.quote-modal__field input,
	.quote-modal__field select,
	.quote-modal__field textarea {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.quote-modal__actions {
		position: sticky;
		bottom: -20px;
		margin: 12px -20px -20px;
		padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		background: var(--bath-white);
		border-top: 1px solid var(--bath-line);
	}

	.quote-modal__actions .button {
		width: 100%;
		min-width: 0;
	}
}

/* Manufacturing --------------------------------------------------------- */

.manufacturing-hero .site-width,
.manufacturing-videos .site-width {
	width: calc(100% - 96px);
	max-width: 1344px;
}

.manufacturing-hero {
	padding-top: 58px;
	padding-bottom: 74px;
}

.manufacturing-page-head {
	margin-bottom: 52px;
	padding-top: 0;
}

.manufacturing-page-head h1 {
	font-size: 56px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

.manufacturing-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 52px;
	align-items: center;
}

.manufacturing-overview__copy,
.manufacturing-overview__featured {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms ease, transform 520ms ease;
}

.manufacturing-overview__featured {
	transition-delay: 110ms;
}

.manufacturing-overview__copy.is-visible,
.manufacturing-overview__featured.is-visible,
.manufacturing-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.manufacturing-overview__copy h2,
.manufacturing-videos__heading h2 {
	margin-bottom: 36px;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
}

.manufacturing-overview__copy p {
	max-width: 640px;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: var(--font-weight-intro);
	line-height: 1.6;
	color: var(--font-color-body);
}

.manufacturing-overview__copy p:last-child {
	margin-bottom: 0;
}

.manufacturing-feature-card,
.manufacturing-card {
	display: block;
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.manufacturing-feature-card.is-disabled,
.manufacturing-card.is-disabled {
	cursor: default;
}

.manufacturing-feature-card {
	border-radius: 8px;
	overflow: hidden;
}

.manufacturing-feature-card__media,
.manufacturing-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e7e7e7;
	border-radius: 8px;
}

.manufacturing-feature-card__media::after,
.manufacturing-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.16);
	pointer-events: none;
}

.manufacturing-feature-card__media img,
.manufacturing-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 380ms ease, opacity 380ms ease;
}

.manufacturing-feature-card:hover .manufacturing-feature-card__media img,
.manufacturing-feature-card:focus-visible .manufacturing-feature-card__media img,
.manufacturing-card:hover .manufacturing-card__media img,
.manufacturing-card:focus-visible .manufacturing-card__media img {
	transform: scale(1.03);
}

/*
 * Unified video play button, shared by the Manufacturing featured video, the
 * Production Videos small cards, and the homepage video card. Measured
 * directly off hsk.de/en/videos (Playwright, computed styles on the real
 * <sl-button class="square-btn" variant="white" pill> + <sl-icon name="play">):
 * normal state is a solid-white circle with a black play triangle,
 * border-radius 50% (fully round), transition `all 0.4s ease`, no box-shadow,
 * no scale/opacity change anywhere in the lifecycle. On hover HSK swaps the
 * button to a solid fill color with a white triangle — HSK's own fill color
 * is their brand navy rgb(32, 80, 131); this site has no navy in its palette
 * (pure black/white throughout, see --bath-black/--bath-white), so the same
 * white-fills-to-solid transition is reproduced using var(--bath-black)
 * instead of HSK's brand blue. Positioning (absolute + translate(-50%,
 * -50%)) and the hover look are deliberately kept on completely separate CSS
 * properties: centering only ever touches `transform`, and hover only ever
 * touches `background-color`/`color`, so centering can never be overwritten,
 * dropped, or raced, and the button cannot visibly move (jump).
 */
.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: 50%;
	background-color: var(--bath-white);
	color: var(--bath-black);
	transition: background-color 400ms ease, color 400ms ease;
}

.video-play-button svg {
	width: 34%;
	height: 34%;
	fill: currentColor;
}

.video-play-button--small {
	width: 52px;
	height: 52px;
}

.video-play-button--disabled {
	background-color: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.6);
	cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
	.manufacturing-feature-card:hover .video-play-button:not(.video-play-button--disabled),
	.manufacturing-feature-card:focus-visible .video-play-button:not(.video-play-button--disabled),
	.manufacturing-card:hover .video-play-button:not(.video-play-button--disabled),
	.manufacturing-card:focus-visible .video-play-button:not(.video-play-button--disabled),
	.home-video-card:hover .video-play-button:not(.video-play-button--disabled),
	.home-video-card:focus-visible .video-play-button:not(.video-play-button--disabled) {
		background-color: var(--bath-black);
		color: var(--bath-white);
	}
}

.manufacturing-feature-card--empty {
	cursor: default;
}

.manufacturing-feature-card__placeholder,
.manufacturing-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 24px;
	color: rgba(0, 0, 0, 0.42);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.manufacturing-videos {
	padding-top: 74px;
	padding-bottom: 88px;
}

.manufacturing-videos__heading {
	max-width: 760px;
	margin-bottom: 28px;
}

.manufacturing-filters {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 68px;
}

/* Visuals for this pill now live in the shared .flymus-filter-pill class
   (see near the top of this file); .manufacturing-filter only carries the
   data-video-filter JS hook and the narrow-viewport size tweak below. */

.manufacturing-library {
	display: grid;
	gap: 64px;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
}

.manufacturing-library.is-switching {
	opacity: 0;
	transform: translateY(10px);
}

.manufacturing-category-group {
	display: grid;
	gap: 26px;
}

.manufacturing-category-group h3 {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
}

.manufacturing-category-group.is-hidden {
	display: none;
}

.manufacturing-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 42px;
	transition: opacity 300ms ease, transform 300ms ease;
}

.manufacturing-card {
	opacity: 0;
	transform: translateY(16px);
	transition-delay: var(--manufacturing-delay, 0ms);
	transition: transform 320ms ease, opacity 320ms ease;
}

.manufacturing-card:hover,
.manufacturing-card:focus-visible {
	transform: translateY(-4px);
}

.manufacturing-card__title {
	display: block;
	min-height: 45px;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: var(--font-weight-card-title);
	line-height: 1.35;
	color: var(--font-color-heading);
}

.manufacturing-card__description {
	display: block;
	margin: -6px 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bath-muted);
}

.manufacturing-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.manufacturing-modal[hidden] {
	display: none;
}

.manufacturing-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.76);
}

.manufacturing-modal__dialog {
	position: relative;
	width: min(1080px, calc(100% - 32px));
	background: #0f0f10;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
	overflow: hidden;
}

.manufacturing-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.manufacturing-modal__header h2 {
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
}

.manufacturing-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.84);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.manufacturing-modal__body {
	padding: 0;
}

.manufacturing-modal__frame {
	aspect-ratio: 16 / 9;
	background: #000;
}

.manufacturing-modal__frame iframe,
.manufacturing-modal__frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.manufacturing-modal__fallback {
	margin: 0;
	padding: 10px 18px 14px;
	font-size: 13px;
	color: #fff;
}

.manufacturing-modal__fallback[hidden] { display: none; }
.manufacturing-modal__fallback a { color: #fff; text-decoration: underline; }

body.has-manufacturing-modal {
	overflow: hidden;
}

@media (max-width: 1180px) {
	.manufacturing-hero .site-width,
	.manufacturing-videos .site-width {
		width: calc(100% - 60px);
		max-width: 1060px;
	}

	.manufacturing-overview {
		grid-template-columns: 1fr;
		gap: 34px;
		align-items: start;
	}

	.manufacturing-overview__copy p {
		max-width: 720px;
	}

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

	.manufacturing-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.manufacturing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.manufacturing-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: 54px;
	}
}

@media (max-width: 640px) {
	.manufacturing-hero .site-width,
	.manufacturing-videos .site-width {
		width: calc(100% - 30px);
	}

	.manufacturing-hero {
		padding-top: 46px;
		padding-bottom: 58px;
	}

	.manufacturing-page-head {
		margin-bottom: 34px;
	}

	.manufacturing-page-head h1 {
		font-size: 44px;
		line-height: 1.08;
	}

	.manufacturing-overview__copy h2,
	.manufacturing-videos__heading h2 {
		margin-bottom: 22px;
		max-width: 100%;
		font-size: 26px;
	}

	.manufacturing-videos {
		padding-top: 52px;
		padding-bottom: 64px;
	}

	.manufacturing-filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow-x: visible;
		gap: 10px;
		margin-bottom: 44px;
		padding-bottom: 0;
	}

	.manufacturing-filter {
		min-height: 44px;
		padding-inline: 14px;
		font-size: 14px;
		white-space: normal;
	}

	.manufacturing-library {
		gap: 46px;
	}

	.manufacturing-category-group {
		gap: 20px;
	}

	.manufacturing-category-group h3 {
		font-size: 25px;
	}

	.manufacturing-grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.video-play-button {
		width: 58px;
		height: 58px;
	}

	.video-play-button--small {
		width: 48px;
		height: 48px;
	}

	.manufacturing-modal {
		padding: 10px;
	}

	.manufacturing-modal__dialog {
		width: 100%;
		border-radius: 10px;
	}

	.manufacturing-modal__header {
		padding: 14px 14px 12px;
	}
}

@media (max-width: 550px) {
	.manufacturing-filters {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.manufacturing-overview__copy,
	.manufacturing-overview__featured,
	.manufacturing-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.manufacturing-feature-card__media img,
	.manufacturing-card__media img,
	.video-play-button,
	.manufacturing-filter,
	.manufacturing-card,
	.manufacturing-library,
	.manufacturing-grid {
		transition: none;
	}

	.manufacturing-card:hover,
	.manufacturing-card:focus-visible,
	.manufacturing-feature-card:hover .manufacturing-feature-card__media img,
	.manufacturing-feature-card:focus-visible .manufacturing-feature-card__media img,
	.manufacturing-card:hover .manufacturing-card__media img,
	.manufacturing-card:focus-visible .manufacturing-card__media img {
		transform: none;
	}
}


@media (max-width: 640px) {
	.home-overlap {
		display: grid;
		gap: 0;
		min-height: 0;
	}

	.home-overlap__media {
		width: 100%;
		flex-basis: auto;
	}

	.home-overlap__card {
		position: relative;
		top: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 34px 24px 28px;
		transform: none;
	}

	.home-overlap__card::before {
		top: 24px;
		left: 24px;
	}

	.home-development .home-overlap__card::before,
	.home-oem .home-overlap__card::before {
		top: 20px;
		left: -25px;
		width: 40px;
	}

	.home-overlap__card .button,
	.home .site-main .button {
		max-width: 100%;
		white-space: normal;
	}

	.home-production__row {
		display: grid;
		gap: 24px;
		padding-inline: 20px;
	}

	.home-production__inner {
		width: 100%;
		max-width: 100%;
	}

	.home-production__inner h2,
	.home-production__subtitle,
	.home-production__inner p {
		width: 100%;
		max-width: 100%;
	}

	.home-production__inner p {
		min-height: 0;
	}

	.home-production__steps {
		width: 100%;
	}

	.home-guides {
		padding: 48px 0;
	}

	.home-guide-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.home-guide-grid--count-1 .home-guide-card,
	.home-guide-grid--count-2 .home-guide-card:first-child,
	.home-guide-grid--count-2 .home-guide-card:nth-child(2) {
		grid-column: auto;
	}

	.home-guide-card a {
		min-height: 300px;
	}

	.blog-hero__bg {
		min-height: 360px;
		padding: 160px 0 56px;
	}

	.blog-hero h1 {
		font-size: 28px;
		line-height: 1.25;
	}

	.blog-hero p {
		margin-top: 24px;
	}

	.blog-layout,
	.blog-layout--single {
		padding: 40px 20px;
	}

	.blog-list-card {
		grid-template-columns: 1fr;
		gap: 18px;
		min-height: 0;
	}

	.blog-list-card__media img {
		width: 100%;
		height: auto;
		aspect-ratio: 1.43 / 1;
	}

	.single-blog__nav,
	.single-related__grid {
		grid-template-columns: 1fr;
	}

	.single-blog__nav div:last-child {
		text-align: left;
	}
}

/* About page: layout modelled on the reference factory page; Flymus-owned content and assets. */
.about-page {
	--about-navy: #1d3662;
	--about-navy-dark: #142848;
	--about-ink: #1b1b1b;
	--about-text: #3d3d3d;
	--about-grey: #f4f4f4;
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.7;
	color: var(--about-text);
	background: #fff;
}

.about-page h1,
.about-page h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--about-ink);
	letter-spacing: 0;
}

.about-page h2 {
	font-size: 24px;
	line-height: 1.4;
}

.about-container {
	width: min(1140px, calc(100% - 60px));
	margin: 0 auto;
}

.about-copy p {
	margin: 0 0 14px;
}

.about-copy p:last-child {
	margin-bottom: 0;
}

.about-eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.5px;
	color: var(--about-navy);
}

.about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 25px;
	border: 0;
	border-radius: 50px;
	font-family: var(--font-button);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.5px;
	color: #fff;
	background: var(--bath-btn-navy);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.about-btn:hover,
.about-btn:focus-visible {
	color: #fff;
	background: var(--bath-btn-navy);
}

/* 1. Banner */
.about-banner {
	display: flex;
	align-items: center;
	min-height: 422px;
	padding: 60px 0;
	text-align: center;
	color: #fff;
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), var(--about-banner-image) center / cover no-repeat;
}

.about-banner .about-container {
	max-width: 1140px;
}

.about-page .about-banner h1 {
	font-size: 33.6px;
	line-height: 1.4;
	color: #fff;
}

.about-breadcrumb {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 12px 0;
	color: #fff;
}

.about-breadcrumb a {
	color: #fff;
	text-decoration: none;
}

.inner-hero[style*="--inner-hero-image"] {
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), var(--inner-hero-image) center / cover no-repeat;
	color: #fff;
}

.inner-hero-breadcrumb {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 14px;
}

.inner-hero-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

/*
 * Privacy Policy — rendered by page.php; all copy and the RFQ reusable block
 * ("Privacy Policy RFQ Form") are edited in the block editor.
 * WordPress adds the `privacy-policy` body class to the page set under
 * Settings > Privacy, so every page-level rule is scoped to body.privacy-policy.
 */
body.privacy-policy .inner-hero {
	padding: 48px 0 0;
	text-align: center;
}

body.privacy-policy .inner-hero h1 {
	font-weight: 700;
	color: #000;
}

/* Full-width content area so the RFQ block can span the viewport like the homepage one. */
body.privacy-policy .site-main > .section {
	padding: 0;
}

body.privacy-policy .site-main > .section > .page-content {
	width: 100%;
	max-width: none;
}

.privacy-policy-content {
	padding: 48px 20px 88px;
}

.privacy-policy-content__inner {
	width: min(760px, 100%);
	margin: 0 auto;
	color: var(--font-color-body);
}

.privacy-policy-section {
	margin: 0 0 34px;
}

.privacy-policy-content__inner h3 {
	margin: 0 0 12px;
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
}

.privacy-policy-content__inner p,
.privacy-policy-content__inner li {
	font-size: 16px;
	line-height: 1.8;
}

.privacy-policy-content__inner p {
	margin: 0 0 14px;
}

.privacy-policy-content__inner p:last-child {
	margin-bottom: 0;
}

.privacy-policy-content__inner ul {
	margin: 0 0 14px;
	padding-left: 22px;
	list-style: disc;
}

.privacy-policy-content__inner li {
	margin: 0 0 7px;
}

.privacy-policy-content__inner a {
	color: var(--bath-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 767px) {
	body.privacy-policy .inner-hero {
		padding-top: 40px;
	}

	body.privacy-policy .inner-hero h1 {
		font-size: var(--font-size-page-h1-mobile);
		line-height: var(--line-height-page-h1-mobile);
	}

	.privacy-policy-content {
		padding: 40px 20px 62px;
	}

	.privacy-policy-section {
		margin-bottom: 28px;
	}

	.privacy-policy-content__inner p,
	.privacy-policy-content__inner li {
		font-size: 15px;
		line-height: 1.75;
	}
}

.about-banner__text,
.about-banner__text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

/* 2. About + video */
.about-intro {
	padding: 60px 0 0;
}

.about-intro__head h2 {
	margin-bottom: 20px;
	text-align: center;
}

.about-intro__text p {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 20px;
}

.about-video {
	width: min(912px, 100%);
	margin: 28px auto 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.about-video iframe,
.about-video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

.about-video__placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	height: 100%;
	background: var(--about-video-image) center / cover no-repeat;
}

.about-video__placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.45);
}

.about-video__play {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
}

.about-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--about-navy);
}

.about-video__caption {
	position: relative;
	padding: 0 20px;
	font-size: 15px;
	color: #fff;
	text-align: center;
}

/* 2 + 3. Image / text splits */
.about-split {
	padding-top: 60px;
}

.about-split__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 550px));
	gap: 40px;
	align-items: center;
}

.about-split__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.about-split--image-left .about-split__media img {
	aspect-ratio: 4 / 3;
}

.about-split--image-right .about-split__media img {
	aspect-ratio: 550 / 309;
}

.about-split--image-right .about-split__media {
	order: 2;
}

.about-split__text h2,
.about-split__text .about-eyebrow,
.about-split__text .about-copy,
.about-split__text .about-btn {
	text-align: center;
}

.about-split__text .about-eyebrow {
	margin-bottom: 4px;
}

.about-split__text h2 {
	margin-bottom: 16px;
}

.about-split__text .about-btn {
	display: flex;
	width: fit-content;
	margin: 22px auto 0;
}

/* About page product and service split typography. */
.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-eyebrow {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	margin-bottom: 20px;
}

.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) h2 {
	margin-bottom: 20px;
}

.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-copy p {
	font-size: 14px;
	line-height: 1.7;
}

.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-btn {
	margin-top: 20px;
}

.about-tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #e3e7ee;
}

.about-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-tile.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 1px dashed #b9c2d0;
	font-size: 12px;
	text-align: center;
	color: #66748a;
}

/* Grey bands (Production / Warehousing) */
.about-band {
	margin-top: 60px;
	padding: 50px 0;
	background: var(--about-grey);
}

.about-band + .about-band {
	margin-top: 0;
	padding-top: 0;
}

.about-band__grid {
	display: grid;
	grid-template-columns: minmax(0, 570px) minmax(0, 530px);
	gap: 40px;
	align-items: center;
}

.about-band--media-left .about-band__media {
	order: -1;
}

.about-band--media-right .about-band__grid {
	grid-template-columns: minmax(0, 530px) minmax(0, 570px);
}

.about-band--media-right .about-band__media {
	order: 1;
}

.about-band__text h2 {
	margin-bottom: 14px;
}

.about-bullets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	margin-top: 18px;
}

.about-bullets--cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.about-bullets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-bullets li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 16px;
}

.about-bullets li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--about-navy);
}

.about-band__note {
	margin-top: 18px;
}

.about-band__note strong {
	display: block;
	margin-bottom: 6px;
	color: var(--about-ink);
}

.about-band__note p {
	margin: 0;
}

.about-band__text .about-btn {
	margin-top: 22px;
}

/* About page production and warehouse text only. */
.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-eyebrow {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
	margin-bottom: 20px;
}

.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) h2 {
	margin-bottom: 20px;
}

.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-copy p,
.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-bullets li,
.about-page .about-band[data-about-section="warehouse"] .about-band__note p {
	font-size: 14px;
	line-height: 28px;
}

.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-bullets,
.about-page .about-band[data-about-section="warehouse"] .about-band__note {
	margin-top: 20px;
}

.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-bullets li {
	margin-bottom: 0;
}

.about-page .about-band[data-about-section="warehouse"] .about-band__note strong {
	display: inline;
	margin: 0;
}

.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-btn {
	margin-top: 20px;
}

/* Production / Warehouse image carousel */
.about-carousel__viewport {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e3e7ee;
}

.about-carousel__viewport.is-draggable {
	cursor: grab;
	touch-action: pan-y;
}

.about-carousel__viewport.is-draggable.is-dragging {
	cursor: grabbing;
}

.about-carousel__viewport.is-dragging,
.about-carousel__viewport.is-dragging * {
	user-select: none;
}

.about-carousel__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms ease, visibility 320ms ease, transform 220ms ease;
}

.about-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.about-carousel__slide.is-dragging {
	transition: opacity 320ms ease, visibility 320ms ease, transform 0ms linear;
}

.about-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

.about-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.about-carousel__dot {
	width: 9px;
	min-width: 9px;
	height: 9px;
	min-height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c7ccd6;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.about-carousel__dot.is-active {
	background: var(--bath-black);
}

/* 4 + 5. Centered heading + four-up rows */
.about-showcase {
	padding-top: 60px;
}

.about-page .about-showcase[data-about-section="quality"] {
	padding-bottom: 80px;
}

.about-showcase__head {
	max-width: 760px;
	margin: 0 auto 28px;
	text-align: center;
}

.about-showcase__head h2 {
	margin-bottom: 12px;
}

.about-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.about-check {
	padding: 26px 22px 24px;
	border: 1px solid #e2e2e2;
	background: #fff;
}

.about-check__no {
	display: block;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var(--about-navy);
}

.about-check strong {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--about-ink);
}

.about-check p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

.about-tile--portrait {
	aspect-ratio: 270 / 382;
}

@media (max-width: 1199px) {
	.about-page .about-showcase[data-about-section="quality"] {
		padding-bottom: 64px;
	}
}

@media (max-width: 1024px) {
	.about-container {
		width: calc(100% - 60px);
	}

	.about-split__grid,
	.about-band--media-left .about-band__grid,
	.about-band--media-right .about-band__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.about-band--media-left .about-band__media,
	.about-band--media-right .about-band__media {
		order: -1;
	}

	.about-band--media-left .about-band__text,
	.about-band--media-right .about-band__text {
		order: 0;
	}

	.about-split--image-right .about-split__media {
		order: 0;
	}

	.about-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.about-page .about-showcase[data-about-section="quality"] {
		padding-bottom: 48px;
	}
}

@media (max-width: 640px) {
	.about-container {
		width: calc(100% - 30px);
	}

	.about-banner {
		min-height: 340px;
		padding: 44px 0;
	}

	.about-page .about-banner h1 {
		font-size: 26px;
	}

	.about-intro__head h2 {
		font-size: 18px;
	}

	.about-intro {
		padding-top: 44px;
	}

	.about-split,
	.about-showcase {
		padding-top: 44px;
	}

	.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-split__grid {
		gap: 10px;
	}

	.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-eyebrow,
	.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) h2 {
		margin-bottom: 10px;
	}

	.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) h2 {
		font-size: 18px;
	}

	.about-page .about-split:is([data-about-section="showcase"], [data-about-section="services"]) .about-btn {
		margin-top: 10px;
	}

	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-band__grid {
		gap: 10px;
	}

	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-eyebrow,
	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) h2 {
		margin-bottom: 10px;
	}

	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) h2 {
		font-size: 18px;
	}

	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-copy p,
	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-bullets li,
	.about-page .about-band[data-about-section="warehouse"] .about-band__note p {
		line-height: 24px;
	}

	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-bullets,
	.about-page .about-band[data-about-section="warehouse"] .about-band__note,
	.about-page .about-band:is([data-about-section="production"], [data-about-section="warehouse"]) .about-btn {
		margin-top: 10px;
	}

	.about-band {
		margin-top: 44px;
		padding: 40px 0;
	}

	.about-bullets {
		grid-template-columns: 1fr;
	}

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

	.about-check {
		padding: 18px 16px;
	}

	.about-video__play {
		width: 56px;
		height: 56px;
	}

	.about-video__play::after {
		border-width: 9px 0 9px 15px;
	}
}

@media (max-width: 420px) {
	.about-row--cards {
		grid-template-columns: 1fr;
	}
}

.products-hub {
	background: var(--bath-white);
	color: var(--font-color-body);
}

.products-hub-hero {
	position: relative;
	min-height: clamp(430px, 46vw, 520px);
	overflow: hidden;
	background: #1f1d1a;
	color: var(--font-color-inverse);
}

.products-hub-hero__media,
.products-hub-hero__media img,
.products-hub-hero__overlay {
	position: absolute;
	inset: 0;
}

.products-hub-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.products-hub-hero__overlay {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.48) 36%, rgba(0, 0, 0, 0.12) 72%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28));
}

.products-hub-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: center;
	gap: 18px;
	min-height: clamp(430px, 46vw, 520px);
	padding-top: clamp(72px, 8vw, 104px);
	padding-bottom: clamp(46px, 6vw, 72px);
}

.products-hub-breadcrumb {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.products-hub-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.products-hub-breadcrumb a::after {
	content: "/";
	margin-left: 10px;
	color: rgba(255, 255, 255, 0.52);
}

.products-hub-hero h1 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(38px, 4.7vw, 62px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: 0;
}

.products-hub-hero p {
	max-width: 560px;
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.58;
}

.products-hub-button {
	width: fit-content;
	min-height: 46px;
}

.products-hub-section {
	padding: clamp(52px, 6vw, 80px) 0;
}

.products-hub-section:nth-of-type(odd) {
	background: #f7f6f3;
}

.products-hub-heading {
	display: grid;
	gap: 13px;
	max-width: 780px;
}

.products-hub-heading--center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.products-hub-heading h2 {
	margin: 0;
	color: var(--font-color-heading);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0;
}

.products-hub-heading p {
	margin: 0;
	color: #4e4e4e;
	font-size: 16px;
	line-height: 1.62;
}

.products-hub-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 28px);
	margin-top: clamp(26px, 3.5vw, 42px);
}

.products-hub-category {
	display: grid;
	grid-template-rows: auto 1fr;
	color: inherit;
	text-decoration: none;
	background: var(--bath-white);
}

.products-hub-category__image {
	display: block;
	overflow: hidden;
	aspect-ratio: 1.55 / 1;
	background: #eee;
}

.products-hub-category__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

.products-hub-category:hover img,
.products-hub-category:focus-visible img {
	transform: scale(1.03);
}

.products-hub-category__body {
	display: grid;
	gap: 8px;
	padding: 16px 0 0;
}

.products-hub-category__body strong {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
}

.products-hub-category__body span {
	color: #555;
	font-size: 15px;
	line-height: 1.55;
}

.products-hub-section__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(30px, 4vw, 46px);
}

.products-hub-section__actions--left {
	justify-content: flex-start;
}

.products-hub-line__head {
	display: flex;
	gap: 28px;
	align-items: end;
	justify-content: space-between;
	margin-bottom: clamp(28px, 4vw, 46px);
}

.products-hub-line__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: flex-end;
}

.products-hub-link {
	color: var(--font-color-heading);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.products-hub-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.products-hub-product-card {
	display: grid;
	align-content: start;
	background: transparent;
}

.products-hub-product-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 0.9;
	background: #f1f0ec;
}

.products-hub-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

.products-hub-product-card:hover .products-hub-product-card__media img,
.products-hub-product-card:focus-within .products-hub-product-card__media img {
	transform: scale(1.03);
}

.products-hub-product-card__body {
	display: grid;
	gap: 5px;
	min-height: 82px;
	padding: 14px 0 0;
}

.products-hub-product-card__body p {
	margin: 0;
	color: #777;
	font-size: 13px;
	line-height: 1.35;
}

.products-hub-product-card__body h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

.products-hub-product-card__body a {
	color: inherit;
	text-decoration: none;
}

.products-hub-product-card__body a:hover,
.products-hub-product-card__body a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.products-hub-table-wrap {
	margin-top: 28px;
	overflow-x: auto;
	background: var(--bath-white);
}

.products-hub-table {
	width: 100%;
	min-width: 840px;
	border-collapse: collapse;
	background: var(--bath-white);
}

.products-hub-table th,
.products-hub-table td {
	padding: 18px 20px;
	border: 1px solid #dfe3e7;
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.55;
}

.products-hub-table thead th {
	background: #f3f4f5;
	color: var(--font-color-heading);
	font-weight: 600;
}

.products-hub-table tbody th {
	width: 18%;
	color: var(--font-color-heading);
	font-weight: 600;
}

.products-hub-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
	gap: clamp(34px, 5vw, 70px);
	align-items: center;
}

.products-hub-split__content {
	display: grid;
	gap: 28px;
}

.products-hub-split__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1.08 / 1;
	background: #eee;
}

.products-hub-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.products-hub-mini-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.products-hub-mini,
.products-hub-supply__items div,
.products-hub-fact,
.products-hub-guide {
	display: grid;
	gap: 8px;
	padding: 20px;
	background: var(--bath-white);
	border: 1px solid #e3e0da;
}

.products-hub-mini strong,
.products-hub-supply__items strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.products-hub-mini span,
.products-hub-supply__items span {
	color: #555;
	font-size: 14px;
	line-height: 1.55;
}

.products-hub-supply {
	padding: clamp(40px, 5vw, 64px) 0;
	background: #191919;
	color: #fff;
}

.products-hub-supply .products-hub-heading h2,
.products-hub-supply .products-hub-heading p {
	color: #fff;
}

.products-hub-supply .products-hub-heading p {
	color: rgba(255, 255, 255, 0.76);
}

.products-hub-supply__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.products-hub-supply__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.products-hub-supply__items div {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
}

.products-hub-supply__items span {
	color: rgba(255, 255, 255, 0.76);
}

.products-hub-supply .products-hub-button {
	grid-column: 2;
}

.products-hub-manufacturing__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(34px, 5vw, 68px);
	align-items: center;
}

.products-hub-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.products-hub-fact {
	min-height: 138px;
	justify-content: start;
	align-content: center;
}

.products-hub-fact strong {
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 500;
	line-height: 1.05;
}

.products-hub-fact span {
	color: #555;
	font-size: 14px;
	line-height: 1.45;
}

.products-hub-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.products-hub-guide {
	min-height: 180px;
	color: inherit;
	text-decoration: none;
}

.products-hub-guide span {
	color: #777;
	font-size: 13px;
	line-height: 1.4;
}

.products-hub-guide strong {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

.products-hub-guide em {
	color: #555;
	font-size: 14px;
	font-style: normal;
	line-height: 1.55;
}

.products-hub-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(34px, 5vw, 72px);
	align-items: start;
}

.products-hub-faq__items {
	display: grid;
	gap: 0;
	border-top: 1px solid #ddd;
}

.products-hub-faq details {
	border-bottom: 1px solid #ddd;
}

.products-hub-faq summary {
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 22px 0;
	color: var(--font-color-heading);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
}

.products-hub-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: 400;
}

.products-hub-faq details[open] summary::after {
	content: "-";
}

.products-hub-faq details p {
	margin: 0;
	padding: 0 0 22px;
	color: #555;
	font-size: 15px;
	line-height: 1.65;
}

.products-hub-faq .products-hub-section__actions {
	grid-column: 2;
	margin-top: 24px;
}

.products-hub-rfq {
	padding: clamp(64px, 8vw, 108px) 0;
	background: #111;
	color: #fff;
}

.products-hub-rfq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: clamp(34px, 5vw, 72px);
	align-items: start;
}

.products-hub-rfq__copy {
	display: grid;
	gap: 14px;
}

.products-hub-rfq__copy h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: 0;
}

.products-hub-rfq__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 16px;
	line-height: 1.62;
}

.products-hub-rfq__form {
	display: grid;
	gap: 18px;
}

.products-hub-rfq__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.products-hub-rfq__fields label {
	display: grid;
	gap: 8px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	line-height: 1.4;
}

.products-hub-rfq__fields input,
.products-hub-rfq__fields select,
.products-hub-rfq__fields textarea {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit;
}

.products-hub-rfq__fields select option {
	color: #111;
}

.products-hub-rfq__message {
	grid-column: 1 / -1;
}

.products-hub-rfq__fields textarea {
	min-height: 116px;
	resize: vertical;
}

@media (max-width: 1080px) {
	.products-hub-product-grid,
	.products-hub-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.products-hub-mini-grid,
	.products-hub-supply__items {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.products-hub-line__head,
	.products-hub-supply__inner,
	.products-hub-manufacturing__inner,
	.products-hub-faq__inner,
	.products-hub-rfq__inner,
	.products-hub-split {
		display: grid;
		grid-template-columns: 1fr;
	}

	.products-hub-line__head {
		align-items: start;
	}

	.products-hub-line__actions {
		justify-content: flex-start;
	}

	.products-hub-supply .products-hub-button,
	.products-hub-faq .products-hub-section__actions {
		grid-column: auto;
	}

	.products-hub-category-grid,
	.products-hub-guide-grid {
		grid-template-columns: 1fr;
	}

	.products-hub-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.products-hub-split__media {
		aspect-ratio: 1.42 / 1;
	}
}

@media (max-width: 560px) {
	.products-hub-hero,
	.products-hub-hero__inner {
		min-height: 470px;
	}

	.products-hub-section {
		padding: 48px 0;
	}

	.products-hub-product-grid,
	.products-hub-facts,
	.products-hub-rfq__fields {
		grid-template-columns: 1fr;
	}

	.products-hub-product-card__body {
		min-height: auto;
	}

	.products-hub-table {
		min-width: 720px;
	}
}

/*
 * Responsive refinement pass.
 *
 * These rules intentionally live after the legacy breakpoint blocks so the
 * mobile layout has one predictable final layer. Desktop rules are untouched.
 * The rhythm follows the reference site's compact single-column mobile flow:
 * clear section bands, useful image ratios, and touch-sized actions.
 */
@media (max-width: 980px) {
	.site-header__inner {
		min-height: 72px;
	}

	.site-brand__logo {
		max-height: 42px;
	}

	.site-brand__name {
		font-size: 26px;
	}

	.nav-toggle {
		width: 44px;
		height: 44px;
		padding: 10px;
		border: 1px solid transparent;
	}

	.site-header:has(.site-nav.is-open) .nav-toggle {
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 1005;
		color: var(--bath-white);
		border-color: rgba(255, 255, 255, 0.35);
	}

	.site-header:has(.site-nav.is-open) .nav-toggle__line {
		background: var(--bath-white);
	}

	.site-nav {
		width: min(340px, 88vw);
		padding: 78px 24px 32px;
	}

	.site-nav__link {
		min-height: 44px;
		padding: 10px 0;
	}

	.site-nav__cta {
		gap: 14px;
		margin-top: 20px;
	}

	.site-nav__cta .button {
		min-height: 44px;
		width: 100%;
	}
}

@media (max-width: 768px) {
	.site-width {
		width: min(100% - 32px, var(--bath-max-width));
	}

	.home .section:not(.home-categories) {
		padding-block: 44px;
	}

	.home-categories {
		min-height: 0;
		padding-block: 44px 48px;
	}

	.home-categories .home-section-head {
		margin-bottom: 24px;
	}

	.home-category-grid {
		gap: 16px;
		margin-top: 22px;
	}

	.home-category-card__media {
		aspect-ratio: 1.42 / 1;
	}

	.home-category-card__body {
		padding: 12px 0 4px;
	}

	.home-category-card h3 {
		min-height: 0;
		margin-bottom: 6px;
		font-size: 16px;
		line-height: 1.35;
	}

	.home-partner-cta__inner {
		padding-block: 34px;
	}

	.home-manufacturing__grid,
	.home-split {
		gap: 24px;
	}

	/* Keep the four manufacturing facts in a compact tablet row. The legacy
	 * max-width: 980px rule changed this flex row to one column, which made
	 * the 768px About/Factory section unnecessarily tall. */
	.home-facts {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
		min-height: 0;
		padding-block: 0;
	}

	.home-fact {
		grid-template-columns: 42px minmax(0, max-content);
		grid-template-rows: auto auto;
		column-gap: 10px;
		row-gap: 6px;
		width: auto;
		min-width: 0;
		min-height: 0;
		border: 0;
		justify-content: center;
		justify-items: start;
		text-align: center;
	}

	.home-fact__icon,
	.home-fact__icon img,
	.home-fact__icon svg {
		width: 42px;
		height: 42px;
	}

	.home-fact__value {
		min-width: 0;
		min-height: 0;
		max-width: 100%;
		font-size: 13px;
		line-height: 1.35;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.home-fact__number {
		font-size: 22px;
		line-height: 1.1;
	}

	.home-fact__unit {
		margin-left: 4px;
		font-size: 12px;
		line-height: 1.35;
	}

	.home-fact > span:not(.home-fact__icon) {
		text-align: left;
		font-size: 13px;
		line-height: 1.45;
	}

	.home-manufacturing__video {
		margin-top: 20px;
	}

	.home-overlap__card {
		padding: 28px 20px 24px;
	}

	.home-production {
		padding-block: 48px 56px;
	}

	.home-production__row {
		gap: 22px;
		padding-inline: 16px;
	}

	.home-production__media,
	.home-production__media img {
		height: 240px;
	}

	.home-guides {
		padding-block: 44px;
	}

	.home-guide-card a {
		min-height: 240px;
	}

	.home-rfq {
		padding-block: 48px;
	}

	.home-rfq__inner {
		gap: 28px;
	}

	.home-rfq__fields {
		gap: 14px;
	}

	.home-rfq__form .button,
	.product-inquiry-form__actions .button,
	.products-hub-rfq__form .products-hub-button {
		width: 100%;
	}

	.home-rfq__form,
	.product-inquiry-form,
	.products-hub-rfq__form {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.home-rfq__fields,
	.product-inquiry-form__grid,
	.products-hub-rfq__fields {
		width: 100%;
		min-width: 0;
	}

	.home-rfq__fields > label,
	.products-hub-rfq__fields > label,
	.product-inquiry-form__grid > .quote-modal__field {
		width: 100%;
		min-width: 0;
	}

	.home-rfq__fields input,
	.home-rfq__fields select,
	.home-rfq__fields textarea,
	.products-hub-rfq__fields input,
	.products-hub-rfq__fields select,
	.products-hub-rfq__fields textarea,
	.product-inquiry-form .quote-modal__field input,
	.product-inquiry-form .quote-modal__field select,
	.product-inquiry-form .quote-modal__field textarea {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}

	.product-inquiry-form__actions,
	.product-inquiry-form__actions .button,
	.products-hub-rfq__form .products-hub-button {
		width: 100%;
		min-width: 0;
	}

	.site-footer {
		padding-block: 48px;
	}

	.home .site-footer {
		padding-block: 48px;
	}

	.site-footer__inner {
		gap: 30px;
	}

	.site-footer__copy {
		max-width: 100%;
	}

	.site-footer__links {
		gap: 16px;
	}

	.site-footer__links a,
	.site-footer__links button,
	.site-footer__links--contact li {
		font-size: 15px;
	}

	.site-footer__links--contact {
		gap: 16px;
	}

	.site-footer__group--products .site-footer__links a {
		white-space: normal;
	}

	.product-page {
		padding-block: 40px 64px;
	}

	.product-hero {
		gap: 28px;
	}

	.product-gallery__main {
		aspect-ratio: 1 / 0.92;
	}

	.product-gallery__thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.single-product .product-hero__content h1 {
		margin-bottom: 18px;
		font-size: clamp(26px, 7vw, 34px);
		line-height: 1.15;
	}

	.product-hero__cta {
		width: 100%;
		margin-top: 20px;
	}

	.product-hero__cta .button {
		width: 100%;
	}

	.product-spec-table th,
	.product-spec-table td {
		padding: 12px 10px;
		font-size: 13px;
	}

	.products-hub-section {
		padding-block: 44px;
	}

	.products-hub-hero,
	.products-hub-hero__inner {
		min-height: 420px;
	}

	.products-hub-hero__inner {
		padding-block: 64px 44px;
	}

	.products-hub-hero h1 {
		font-size: clamp(32px, 8vw, 46px);
	}

	.product-category-hero__inner {
		padding-inline: 16px;
	}

	.product-category-page {
		padding-block: 40px 64px;
	}

	.product-category-filters {
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		flex-wrap: nowrap;
	}

	.product-category-filter {
		flex: 0 0 auto;
		min-height: 42px;
	}
}

/* Keep the mobile category layout single-column after the later tablet overrides. */
@media (max-width: 640px) {
	.home-category-grid {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 18px;
	}
}

@media (max-width: 560px) {
	.site-width {
		width: calc(100% - 30px);
	}

	.home .section:not(.home-categories) {
		padding-block: 36px;
	}

	.home-categories {
		padding-block: 38px 42px;
	}

	.home-category-grid {
		gap: 14px;
		margin-top: 18px;
	}

	.home-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}

	.home-fact {
		grid-template-columns: 36px minmax(0, 1fr);
		grid-template-rows: 36px auto;
		column-gap: 8px;
		row-gap: 8px;
		width: 100%;
		min-width: 0;
		justify-content: initial;
		justify-items: initial;
		text-align: left;
	}

	.home-fact__icon,
	.home-fact__icon img,
	.home-fact__icon svg {
		width: 36px;
		height: 36px;
	}

	.home-fact__number {
		font-size: 20px;
	}

	.home-fact__icon {
		align-self: center;
		justify-self: start;
	}

	.home-fact__value {
		align-self: center;
		min-width: 0;
		max-width: none;
		text-align: left;
	}

	.home-fact > span:not(.home-fact__icon) {
		text-align: left;
	}

	.home-category-card__media {
		aspect-ratio: 1.5 / 1;
	}

	.home-partner-cta__inner {
		padding-block: 28px;
	}

	.home-production__media,
	.home-production__media img {
		height: 220px;
	}

	.home-guide-card a {
		min-height: 220px;
	}

	.products-hub-hero,
	.products-hub-hero__inner {
		min-height: 390px;
	}

	.products-hub-hero__inner {
		padding-block: 56px 36px;
	}

	.products-hub-section {
		padding-block: 38px;
	}

	.products-hub-product-card__media {
		aspect-ratio: 1 / 0.94;
	}

	.products-hub-rfq {
		padding-block: 48px;
	}

	.products-hub-table-wrap {
		margin-inline: -15px;
		padding-inline: 15px;
	}

	.products-hub-table {
		min-width: 680px;
	}
}

/*
 * Wholesale Bathroom Vanity Cabinets landing page.
 * Layout rhythm measured against the Shouya reference page (hero band ratio,
 * feature-strip spacing, light-grey intro section, category grid) — copy and
 * imagery are our own.
 */
.wv-page {
	background: var(--bath-white);
	color: var(--font-color-body);
}

/*
 * Hero sizing measured directly off the reference page (getBoundingClientRect):
 * .banner_bg padding-top/bottom = 220/80 above 1520px, 200/80 at <=1520px,
 * 160/60 at <=991px — this is a content+padding box, not a fixed aspect ratio
 * (confirmed: reference hero measured 422px tall at 1425px viewport and 459px
 * tall at 1905px viewport, i.e. it does NOT scale as a fixed ratio). Overlay
 * is a flat rgba(51,51,51,0.6) tint (.banner_bg::before), not a gradient.
 */
.wv-hero {
	position: relative;
	overflow: hidden;
	background: #2a2a28;
	color: var(--font-color-inverse);
}

.wv-hero__bg,
.wv-hero__bg img,
.wv-hero__overlay {
	position: absolute;
	inset: 0;
}

.wv-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wv-hero__overlay {
	background: rgba(51, 51, 51, 0.6);
}

.wv-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	row-gap: 10px;
	text-align: center;
	padding: 220px 0 96px;
}

@media (max-width: 1520px) {
	.wv-hero__inner {
		padding-top: 200px;
	}
}

@media (max-width: 991px) {
	.wv-hero__inner {
		padding-top: 160px;
		padding-bottom: 60px;
	}
}

.wv-hero h1 {
	margin: 0;
	max-width: 1100px;
	color: #fff;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 600;
	line-height: 1.2;
}

.wv-breadcrumb {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.82);
}

.wv-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.wv-hero p {
	max-width: 1140px;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	line-height: 1.7;
}

.wv-features {
	margin-top: 60px;
	padding: 0;
}

.wv-features__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wv-feature {
	display: grid;
	justify-items: center;
	row-gap: 10px;
	padding: 40px 20px;
	text-align: center;
	border-radius: 4px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wv-feature:hover,
.wv-feature:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(29, 54, 98, 0.12);
}

.wv-feature__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	color: #333333;
}

.wv-feature__icon svg {
	width: 100%;
	height: 100%;
}

.wv-feature h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.wv-feature p {
	margin: 0;
	max-width: 245px;
	color: var(--bath-muted);
	font-size: 12px;
	line-height: 1.7;
}

.wv-intro {
	margin-top: 60px;
	padding: 50px 0 10px;
	background: #f4f4f4;
	text-align: center;
}

.wv-intro__inner {
	display: grid;
	justify-items: center;
	gap: 10px;
}

.wv-intro h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
}

.wv-intro p {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0;
	color: var(--bath-muted);
	font-size: 14px;
	line-height: 1.7;
}

.wv-product-line {
	padding: clamp(48px, 6vw, 72px) 0;
}

.wv-product-line:nth-of-type(odd) {
	background: #f7f6f3;
}

.wv-product-line > .site-width > h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 500;
	color: var(--font-color-heading);
}

.wv-category + .wv-category {
	margin-top: clamp(40px, 5vw, 60px);
}

.wv-category h3 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 500;
	color: var(--font-color-heading);
}

.wv-category__banner {
	overflow: hidden;
	max-width: 780px;
	margin: 0 0 20px;
	border-radius: 4px;
	aspect-ratio: 16 / 6;
	background: #f1f0ec;
}

.wv-category__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wv-category__desc {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 30px;
	color: var(--bath-muted);
	font-size: 14px;
	line-height: 1.65;
	white-space: normal;
}

.wv-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 24px);
}

.wv-product-card {
	display: grid;
	align-content: start;
}

.wv-product-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f1f0ec;
}

.wv-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}

.wv-product-card:hover .wv-product-card__media img,
.wv-product-card:focus-within .wv-product-card__media img {
	transform: scale(1.03);
}

.wv-product-card__body {
	padding: 12px 0 0;
}

.wv-product-card__body h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.wv-product-card__body a {
	color: inherit;
	text-decoration: none;
}

.wv-category__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: clamp(28px, 3.5vw, 40px);
}

/*
 * Second (outline) button per category, measured against the reference:
 * transparent bg, 2px navy border, navy text, same 50px pill radius as our
 * .button--dark, fills navy with white text on hover/focus.
 */
.wv-category__actions .button--outline-navy {
	background: transparent;
	border: 2px solid var(--bath-btn-navy);
	border-radius: 999px;
	color: var(--bath-btn-navy);
	transition: background-color 0.3s, color 0.3s;
}

.wv-category__actions .button--outline-navy:hover,
.wv-category__actions .button--outline-navy:focus-visible {
	background: var(--bath-btn-navy);
	color: var(--bath-white);
}

.wv-cta {
	padding: clamp(52px, 6vw, 76px) 0;
	background: #1d3662;
	color: var(--bath-white);
	text-align: center;
}

.wv-cta__inner {
	display: grid;
	justify-items: center;
	gap: 16px;
}

.wv-cta h2 {
	margin: 0;
	max-width: 720px;
	color: var(--bath-white);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 500;
}

.wv-cta p {
	margin: 0;
	max-width: 620px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 900px) {
	.wv-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
	}

	.wv-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.wv-hero p {
		font-size: 12px;
		line-height: 1.7;
	}

	.wv-breadcrumb {
		max-width: 100%;
		font-size: 12px;
		white-space: nowrap;
	}

	.wv-breadcrumb span:last-child {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wv-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 0;
	}

	.wv-feature {
		padding: 24px 10px;
	}

	.wv-intro {
		padding: 35px 0;
	}

	.wv-intro h2 {
		font-size: 22px;
	}

	.wv-intro p {
		font-size: 12px;
		line-height: 1.7;
	}

	.wv-category__actions {
		flex-direction: column;
	}

	.wv-category__actions .button {
		width: 100%;
	}
}