/* =============================================================================
   Bakery Combinations — Equipment archive

   Desktop source: Figma node 51375:26886 (1440 frame).
   Mobile source:  Figma node 51375:33328 (430 frame).
   Filter rail:    Figma 51446:11541 (collapsed) / 51446:11672 (open), 310px.

   The hero, the opening band, the product cards, the questions and the enquiry
   form are all reused; only the catalogue layout and the filter rail are here.
============================================================================= */

.equipment-intro {
	padding: var(--section-pad-y) var(--gutter);
}

.equipment-intro .band__title {
	max-width: 894px;
	font-size: clamp(24px, 17.188px + 1.5842vw, 40px);
	line-height: 1.1;
}

.equipment-intro .band__lede {
	/* The client file's 664px measure (53314:30231). */
	max-width: 664px;
}

/* -----------------------------------------------------------------------------
   Catalogue
-------------------------------------------------------------------------- */

.catalogue {
	/* The rail's footprint, shared by the layout and by anything that has to
	   reason about the page's centre rather than the column's. */
	--rail-w: 310px;
	--rail-gap: 40px;

	padding: var(--section-pad-y) var(--gutter);
}

.catalogue__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

/* -----------------------------------------------------------------------------
   Filter rail — 310px on the desktop frame
-------------------------------------------------------------------------- */

.catalogue__rail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

/* "Hide Filters" with the tangerine sliders mark. */
.catalogue__toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: var(--bca-hairline) solid rgba(40, 53, 124, 0.1);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bca-midnight);
}

.catalogue__toggle-icon {
	display: flex;
	color: var(--bca-tangerine);
}

.catalogue__groups {
	display: flex;
	flex-direction: column;
}

.catalogue__groups[hidden] {
	display: none;
}

/* A group: heading with a chevron, then its terms. */
.filter-group {
	border-bottom: var(--bca-hairline) solid rgba(40, 53, 124, 0.1);
}

.filter-group__head,
.filter-sub__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
	color: var(--bca-midnight);
}

.filter-group__head {
	padding-block: 24px;
}

.filter-group__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.filter-group__chevron,
.filter-sub__chevron {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--bca-tangerine);
	transition: transform 0.2s ease;
}

/* The frame draws an open group's chevron pointing up. */
.filter-group__head[aria-expanded="true"] .filter-group__chevron,
.filter-sub__head[aria-expanded="true"] .filter-sub__chevron {
	transform: rotate(180deg);
}

.filter-group__body {
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
}

.filter-group__body[hidden],
.filter-sub__list[hidden] {
	display: none;
}

/* A category parent and the terms under it: the parent is a checkbox row of
   its own, with the chevron that opens its children sat at the row's end. */
.filter-sub__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 12px;
}

.filter-sub__row .filter-option {
	flex: 1 1 auto;
	min-width: 0;
}

/* The parent's label keeps the small-caps voice the heading had. */
.filter-sub__row .filter-option__label {
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.filter-sub__head {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--bca-midnight);
	background: none;
	border: 0;
	cursor: pointer;
}

.filter-sub__title {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bca-midnight);
}

.filter-sub__list,
.filter-group__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 12px;
}

/* The checkbox rows. */
.filter-option__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--bca-midnight);
	transition: color 0.2s ease;
}

.filter-option__link:hover {
	color: var(--bca-tangerine);
}

.filter-option__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 1px;
	border: var(--bca-hairline) solid rgba(40, 53, 124, 0.15);
	color: var(--bca-white);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.filter-option.is-checked .filter-option__box {
	background-color: var(--bca-tangerine);
	border-color: var(--bca-tangerine);
}

/* The tick is always in the box; it shows on the checked state, so a box
   ticked by the script reads the same as one the page loaded ticked. */
.filter-option__tick {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.filter-option.is-checked .filter-option__tick {
	opacity: 1;
	transform: none;
}

.filter-option__label {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.catalogue__reset {
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bca-midnight);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.catalogue__reset:hover {
	color: var(--bca-tangerine);
}

/* -----------------------------------------------------------------------------
   The rail as a panel — the phone frame, Figma 51375:50134

   Below the desktop breakpoint the frame does not put the rail beside the grid;
   it slides a 310px panel in from the right, leaving a sliver of the page
   behind it, headed "Filters" with a round close and closed by two full width
   actions. Above 1200px none of this applies and the rail is a column again.
-------------------------------------------------------------------------- */

/* The opener, drawn above the results. */
/* The opener is the design system's own button (Figma 51375:33439 is an instance
   of "Buttons"), so it takes .btn .btn--primary and only adds the 24px gap and
   the icon the instance carries. 24 + 24 icon + 24 gap + 106 label + 24 = 202,
   which is the width the frame reports. It is centred on the column. */
.catalogue__open {
	gap: 24px;
	align-self: center;
}

.catalogue__open-icon {
	display: flex;
	flex: none;
}

.catalogue__scrim {
	position: fixed;
	inset: 0;
	z-index: 40;
	background-color: rgba(8, 6, 36, 0.4);
}

.catalogue__scrim[hidden] {
	display: none;
}

/* "Filters" and the round close, at the head of the panel. */
.catalogue__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 0;
}

.catalogue__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bca-midnight);
}

.catalogue__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border: var(--bca-hairline) solid rgba(40, 53, 124, 0.1);
	border-radius: 50%;
	color: var(--bca-midnight);
}

/* The two full width actions the frame closes on, 16px apart. */
.catalogue__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 20px 20px;
}

.catalogue__actions .btn {
	width: 100%;
	padding: 14px 16px;
}

@media (max-width: 1199.98px) {

	/* Hidden as well as moved off when closed, so its links leave the tab
	   order and the accessibility tree; the visibility waits out the slide. */
	.catalogue__rail {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 50;
		width: 310px;
		max-width: calc(100% - 40px);
		gap: 0;
		padding: 0;
		background-color: var(--bca-powder);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.catalogue__rail.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease, visibility 0s;
	}

	/* The groups take the panel's 20px gutter. */
	.catalogue__toggle,
	.catalogue__groups,
	.catalogue__reset {
		margin-inline: 20px;
	}

	.catalogue__toggle {
		padding-top: 24px;
	}

	.catalogue__reset {
		margin-bottom: 24px;
	}
}

/* Locked behind the panel. */
body.filters-open {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Results
-------------------------------------------------------------------------- */

/* The column beside the rail: the equipment search (D6, HOME-2) over the
   results. On the phone the panel's opener joins the search, under it. */
.catalogue__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.catalogue__tools {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.catalogue__results {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

/* The chosen filters, repeated above the grid. */
.catalogue__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* One pill per taxonomy, holding every pick made in it. Desktop (51375:27203)
   and the phone (51375:33446) draw it identically: 48px tall, fully rounded,
   flat grey with no border, 24px of side padding, 8px between the parts. */
.chip-set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 200px;
	background-color: #f0f0f0;
}

.chip-set__label,
.chip {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--bca-midnight);
}

/* The taxonomy is named in medium, the picks themselves in light. */
.chip-set__label {
	font-weight: 500;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 300;
	transition: color 0.2s ease;
}

.chip:hover {
	color: var(--bca-tangerine);
}

.chip__remove {
	display: flex;
	flex: none;
	color: #2c2c2c;
	transition: color 0.2s ease;
}

.chip__remove svg {
	width: 10px;
	height: 10px;
}

.chip:hover .chip__remove {
	color: var(--bca-tangerine);
}

.catalogue__clear {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.catalogue__clear:hover {
	color: var(--bca-tangerine);
}

/* The phone band, Figma 51375:33429 — copy, opener, chips and grid in one
   column 64px apart, and 128px from the chips down to the first card. The
   catalogue drops its own top padding so the band above it owns that gap.
   Kept below the rules it overrides; a media query adds no specificity. */
@media (max-width: 1199.98px) {

	.catalogue {
		padding-top: 0;
	}

	.catalogue__inner,
	.catalogue__main {
		gap: 64px;
	}

	.catalogue__results {
		gap: 128px;
	}

	/* The pills are the desktop ones; the frame only stacks them. */
	.catalogue__chips {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* One card per row on the phone frame, three across on the desktop one. */
.catalogue__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 24px;
	width: 100%;
}

.catalogue__item {
	min-width: 0;
}

.catalogue__empty {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bca-midnight);
}

.catalogue__empty a {
	color: var(--bca-tangerine);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Back To Top ↑" — Figma 51375:27433, centred under the grid.

   The frame sets it in 48px Clash at 100% line height with no tracking, 16px
   clear of a 36.77px arrow, and gives the pair 36px of air above and below. */
.catalogue__top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	align-self: center;
	margin-block: 36px;
	font-family: var(--font-display);
	font-weight: 400;
	/* 28px @430 → 48px @1440, the frame's own size at the top end. */
	font-size: clamp(28px, 19.49px + 1.9802vw, 48px);
	line-height: 1;
	letter-spacing: 0;
	color: var(--bca-midnight);
	transition: color 0.2s ease;
}

.catalogue__top-icon {
	display: flex;
	flex: none;
}

.catalogue__top-icon svg {
	width: 36.77px;
	height: 36.77px;
}

.catalogue__top:hover {
	color: var(--bca-tangerine);
}

/* The pagination is the theme's, on the light ground. */
.catalogue .pagination {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.catalogue .page-numbers {
	color: var(--bca-midnight);
	box-shadow: inset 0 0 0 var(--bca-hairline) rgba(40, 53, 124, 0.4);
}

.catalogue .page-numbers:hover,
.catalogue .page-numbers.current {
	background-color: var(--bca-steel-blue);
	color: var(--bca-white);
}

/* =============================================================================
   Tablet and up
============================================================================= */

@media (min-width: 768px) {

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

/* =============================================================================
   Desktop — the 1440 frame
============================================================================= */

@media (min-width: 1200px) {

	.equipment-intro,
	.catalogue {
		padding-block: 88px;
	}

	/* The rail sits at 310px beside the results, 40px apart. */
	.catalogue__inner {
		max-width: 1360px;
		margin-inline: auto;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--rail-gap);
	}

	/* The frame centres this on the page (x=367..1073 of 1440), not on the
	   results column it sits in — so it is pulled back across the rail. */
	.catalogue__top {
		margin-right: calc(var(--rail-w) + var(--rail-gap));
	}

	.catalogue__rail {
		position: sticky;
		top: 24px;
		width: var(--rail-w);
		flex: none;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* The rail scrolls, but the browser's full-size bar read as part of
		   the drawing — keep it a hairline, and only under the pointer. */
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}

	.catalogue__rail:hover {
		scrollbar-color: rgba(40, 53, 124, 0.3) transparent;
	}

	.catalogue__rail::-webkit-scrollbar {
		width: 4px;
	}

	.catalogue__rail::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: transparent;
	}

	.catalogue__rail:hover::-webkit-scrollbar-thumb {
		background-color: rgba(40, 53, 124, 0.3);
	}

	.catalogue__main {
		flex: 1 1 0;
	}

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

	/* The panel chrome belongs to the phone frame only. */
	.catalogue__open,
	.catalogue__head,
	.catalogue__actions,
	.catalogue__scrim {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Filtering without a reload

   The results column is replaced in place while the request is in flight; it
   fades rather than disappearing so the page does not jump under the reader.
-------------------------------------------------------------------------- */

.catalogue__results {
	transition: opacity 0.2s ease;
}

.catalogue.is-loading .catalogue__results {
	opacity: 0.45;
	pointer-events: none;
}

/* =============================================================================
   Single equipment — desktop 51375:19705 (1440 × 4503) / mobile 51375:35443

   Opens on the powder panel, so the navigation inverts (see has-light-header).
   The product accordion is the FAQ accordion, the related rail is the homepage
   equipment carousel, and the corner marks are the theme's.
============================================================================= */

.product {
	display: flex;
	flex-direction: column;
	gap: 40px;
	/* Mobile nav = 24 + 64 icon + 24 = 112. */
	padding: calc(112px + 24px) var(--gutter) var(--section-pad-y);
}

/* The back link is the design system's Buttons text (53333:27450): 14px Clash
   set solid on a 12px padding block, the small arrow ~19px off the label. */
.product__back {
	display: inline-flex;
	align-items: center;
	gap: 19px;
	align-self: flex-start;
	padding-block: 12px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bca-steel-blue);
	transition: color 0.2s ease;
}

.product__back:hover {
	color: var(--bca-tangerine);
}

.product__back-icon {
	display: flex;
	color: var(--bca-steel-blue);
}

.product__back-icon .arrow-icon {
	width: 15px;
	height: 13px;
}

.product__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

/* Back link and plate share the left column (53333:27448), 48px apart on the
   desktop frame; the detail column top-aligns with the link. */
.product__media {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

/* The plate is the plain white square the product cards use. */
.product__plate {
	position: relative;
	display: block;
	margin: 0;
	background-color: var(--bca-white);
	aspect-ratio: 1;
	overflow: hidden;
}

/* A supplier's clip plays inside the plate, over the photograph it replaces. */
.product__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background-color: var(--bca-midnight);
}

.product__plate iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.product__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	color: var(--bca-white);
	background-color: rgba(40, 53, 124, 0.85);
	border: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.product__play:hover {
	background-color: var(--bca-tangerine);
	transform: translate(-50%, -50%) scale(1.06);
}

.product__play-mark {
	display: block;
	/* The triangle reads centred only once it is nudged off its own bounds. */
	margin-left: 4px;
}

/* The gallery strip under the plate. */
.product__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.product__thumb {
	margin: 0;
}

.product__thumb-btn {
	display: block;
	width: 100%;
	padding: 0;
	aspect-ratio: 1;
	background-color: var(--bca-white);
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.75;
}

.product__thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product__thumb-btn:hover,
.product__thumb-btn.is-current {
	border-color: var(--bca-steel-blue);
	opacity: 1;
}

.product__plate img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product__detail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.product__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product__eyebrow {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bca-steel-blue);
	opacity: 0.9;
}

/* Each half of the eyebrow is a link into the catalogue — the category and
   the industry archives — and says so on hover. */
.product__eyebrow a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.product__eyebrow a:hover,
.product__eyebrow a:focus-visible {
	color: var(--bca-tangerine);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.product__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 21.19px + 1.5842vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bca-midnight);
}

/* The same Accordion component as the FAQ, so it carries the same bordered
   rectangle with the crosshairs centred on its corners. The new frame strokes
   it at 0.25px rgba(40,53,124,0.6) — 0.15 under the quarter-alpha rule. */
.product__frame {
	position: relative;
	padding: 24px;
	border: var(--bca-hairline) solid var(--bca-mount-rule);
}

.product__accordion .accordion__question {
	font-size: clamp(16px, 14.3px + 0.396vw, 20px);
}

.product__copy p {
	margin: 0;
}

.product__copy p + p {
	margin-top: 16px;
}

.product__copy ul,
.product__copy ol {
	padding-left: 20px;
	list-style: disc;
}

.product__copy ol {
	list-style: decimal;
}

/* The suppliers' technical descriptions arrive as specification tables, so the
   accordion sets them as one: a hairline-ruled two column list, the name in the
   left column and the figures in the right. It scrolls inside its own box
   rather than widening the panel. */
.product__copy table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	text-align: left;
}

.product__copy p + table,
.product__copy ul + table {
	margin-top: 16px;
}

.product__copy th,
.product__copy td {
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid rgba(40, 53, 124, 0.15);
	vertical-align: top;
}

.product__copy th {
	width: 38%;
	font-weight: 400;
	color: var(--bca-midnight);
}

.product__copy td {
	opacity: 0.8;
}

.product__copy tr:last-child th,
.product__copy tr:last-child td {
	border-bottom: 0;
}

.related {
	display: flex;
	flex-direction: column;
	gap: var(--section-64-88);
	padding: var(--section-pad-y) var(--gutter);
	--card-w: 259.33px;
	--card-gap: 24px;
}

@media (min-width: 768px) {

	.product__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	.product__media { width: 42%; flex: none; }
	.product__plate { width: 100%; }
	.product__detail { flex: 1 1 0; }
}

@media (min-width: 1200px) {

	/* 89px bar, then the frame's 48px column gap under its underline. */
	.product {
		padding-top: calc(89px + 48px);
		padding-bottom: 88px;
		gap: 48px;
	}

	/* 557px column + 114px gutter + 689px detail = the 1360 content box,
	   centred past the frame's width. */
	.product__inner {
		gap: 114px;
		max-width: 1360px;
		margin-inline: auto;
	}

	.product__media {
		width: 557px;
		flex: none;
		gap: 48px;
	}

	.product__plate {
		width: 100%;
		aspect-ratio: 557 / 549;
	}

	.product__head {
		gap: 20px;
	}

	/* The frame border sits 77px under the title — 20px of clear air plus the
	   57px the corner ticks reach up (53333:27465). */
	.product__detail {
		gap: 77px;
	}

	.product__title {
		font-size: 40px;
		line-height: 1;
	}

	/* The desktop frame keeps the 24px panel padding (53333:27465). */

	.product__accordion .accordion__question {
		font-size: 22px;
	}

	/* The product accordion runs 24px above and below every rule, with 8px
	   between a question and its answer, on 24px tabler glyphs. */
	.accordion.product__accordion {
		gap: 24px;
	}

	.product__accordion .accordion__body {
		margin-top: 8px;
	}

	.product__accordion .accordion__toggle .arrow-icon {
		width: 24px;
		height: 24px;
	}

	.related {
		gap: 88px;
		padding-block: 88px;
		--card-w: calc((100% - 48px) / 3);
		--card-gap: 24px;
	}

	/* The new frame draws the lede under the related band's full-size title. */
	.related .band__lede {
		display: block;
		max-width: 380px;
	}

	/* Same 24px name row and 9.67px card-row slack as the homepage equipment
	   section (Figma 53333:27620 / 27609) — a minimum, so a machine whose name
	   runs to two or three lines grows the row instead of being clipped. */
	.related .product-card__row {
		min-height: 24px;
	}

	.related .carousel {
		padding-bottom: 9.67px;
	}
}

/* -----------------------------------------------------------------------------
   Request a Quote — the button under the product accordion and the dialog it
   opens. The form inside is the contact card's own enquiry form, so it wears
   those styles unchanged; the dialog is the card's white plate with the
   corner marks, sat over a midnight wash.
-------------------------------------------------------------------------- */

.product__cta {
	display: flex;
	margin-top: 8px;
}

.quote {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.quote__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(8, 6, 36, 0.72);
}

.quote__dialog {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 40px auto;
	padding: 32px 24px;
	background-color: var(--bca-white);
	outline: 0;
	animation: quote-rise 0.3s ease both;
}

@keyframes quote-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.quote__dialog { animation: none; }
}

.quote__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--bca-midnight);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

.quote__close:hover {
	color: var(--bca-tangerine);
}

.quote__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px;
	/* Clear of the close button. */
	padding-right: 48px;
}

.quote__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(24px, 20.6px + 0.7921vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bca-midnight);
}

.quote__lede {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--bca-midnight);
	opacity: 0.8;
}

/* The dialog scrolls the page it sits on; the page behind is held still. */
.has-quote-open {
	overflow: hidden;
}

/* CF7 prints its response line under the form; midnight, as on the contact
   card, and a little air above it. */
.quote .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--bca-midnight);
}

.quote .wpcf7-not-valid-tip {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--bca-tangerine);
}

@media (min-width: 768px) {

	.quote__dialog {
		padding: 48px;
	}

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

	.quote .enquiry__field--wide {
		grid-column: 1 / -1;
	}

	.quote .enquiry__foot {
		flex-direction: row;
		align-items: flex-end;
	}
}

/* -----------------------------------------------------------------------------
   Brochures (D6 feedback, EQUIP-5) — the supplier PDFs Product Details closes
   on, and the email step before the first download (inc/brochures.php,
   initBrochures() in main.js).

   The list is ruled in the specification tables' ink; its action is the
   theme's text button (the back link, the search's submit) with the card
   arrow turned down into the file. The dialog is the quote dialog's plate
   holding the contact card's field.
-------------------------------------------------------------------------- */

.brochures {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

.brochures__title {
	display: flex;
}

/* Out-ranks .product__copy ul, which would bullet and indent it. */
.product__copy .brochures__list {
	padding-left: 0;
	list-style: none;
	border-top: 1px solid rgba(40, 53, 124, 0.15);
}

.brochures__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-block: 16px;
	border-bottom: 1px solid rgba(40, 53, 124, 0.15);
}

.brochures__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
}

.brochures__name {
	font-weight: 400;
	line-height: 1.4;
	color: var(--bca-midnight);
	overflow-wrap: anywhere;
}

.brochures__meta {
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.6;
}

.brochures__download {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
	min-height: 24px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--bca-steel-blue);
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Drawn 24px tall; the tap target reaches 44. */
.brochures__download::before {
	content: "";
	position: absolute;
	inset: -10px -8px;
}

.brochures__download:hover {
	color: var(--bca-tangerine);
}

.brochures__download.is-busy {
	opacity: 0.5;
	cursor: progress;
}

.brochures__download-icon {
	display: flex;
}

/* The card arrow points back; a quarter turn points it down. */
.brochures__download-icon .arrow-icon {
	width: 15px;
	height: 13px;
	transform: rotate(-90deg);
}

/* "Your download has started. Open the PDF" — or what went wrong. */
.brochures__status {
	flex: 1 0 100%;
	font-size: 12px;
	line-height: 1.5;
}

.brochures__status.is-error {
	color: var(--bca-tangerine);
}

.brochures__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.8;
}

.brochures__forget {
	position: relative;
	font: inherit;
	letter-spacing: inherit;
}

.brochures__forget::before {
	content: "";
	position: absolute;
	inset: -12px -6px;
}

/* No brochure: one line after the details, pointing at the team. */
.accordion__answer > .brochures__none {
	margin-top: 24px;
}

.accordion__answer > .brochures:first-child,
.accordion__answer > .brochures__none:first-child {
	margin-top: 0;
}

.brochures__status a,
.brochures__forget,
.brochures__none a,
.brochure-gate__privacy a {
	color: var(--bca-steel-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.brochures__status a:hover,
.brochures__forget:hover,
.brochures__none a:hover,
.brochure-gate__privacy a:hover {
	color: var(--bca-tangerine);
}

/* The email step: a single field, so a narrower plate, held mid-screen when
   there is room (auto margins, so a short viewport still scrolls to it). */
.brochure-gate .quote__dialog {
	max-width: 560px;
	margin-block: auto;
}

.brochure-gate__form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.brochure-gate__field.is-invalid,
.brochure-gate__field.is-invalid:focus-within {
	border-bottom-color: var(--bca-tangerine);
}

/* Empty until something is wrong; kept in the page (not display: none) so the
   alert it carries is announced the moment it is filled. */
.brochure-gate__error {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bca-tangerine);
}

.brochure-gate__error:not(:empty) {
	margin-top: 8px;
}

/* The honeypot: off-screen, out of the tab order, hidden from assistive
   technology. */
.brochure-gate__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.brochure-gate__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.brochure-gate__privacy {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--bca-midnight);
	opacity: 0.8;
}

.brochure-gate__submit.is-busy {
	opacity: 0.6;
	cursor: progress;
}

/* The page behind is held still while the dialog is open. */
.has-brochure-open {
	overflow: hidden;
}

@media (min-width: 1200px) {

	.brochures {
		margin-top: 32px;
	}

	.accordion__answer > .brochures__none {
		margin-top: 32px;
	}
}