/* =========================================================================
   Single product page — woocommerce/content-single-product.php + the
   partials in template-parts/product/.
   Scoped to .pd — mobile-first, min-width media queries only.
   Tokens mirror home.css / shop.css / sectors.css (Billi Brand Book 2026).
   ========================================================================= */

.pd {
	/* Billi Brand Book 2026 palette */
	--pd-navy: #181d46;      /* Billi Blue — signature colour */
	--pd-lightblue: #90cdeb; /* button hover state */
	--pd-band-grey: #f5f5f5;
	--pd-band-blue: #f1f5f5; /* Green Grey */
	--pd-line: #eaeaea;
	--pd-text: #000;
	--pd-muted: #6b6b72;
	--pd-red: #dd1829;       /* form errors */
	--pd-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--pd-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.pd { --pd-gutter: 40px; }
}

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

.pd img { max-width: 100%; height: auto; display: block; }

.pd-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--pd-gutter);
	padding-right: var(--pd-gutter);
}

/* Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content's minimum size. The single-column mobile grids have no
   minmax(0, …) to stop that, so one wide child — the 614px gallery thumbnail
   rail — stretched the whole column past the viewport and pushed the heading
   off-screen. Desktop was unaffected because those tracks use minmax(0, 1fr). */
.pd [class$='__grid'] > *,
.pd [class$='__layout'] > *,
.pd [class$='__row'] > * { min-width: 0; }

.pd :is(button, input, select, textarea) { font-family: inherit; }

.pd :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--pd-lightblue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.pd [class*='__heading'] :is(h1, h2, h3, h4, p),
.pd [class*='__title'] :is(h1, h2, h3, h4, p),
.pd .pd-section-heading :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.pd [class*='__text'] p,
.pd [class*='__intro'] p { margin: 0 0 0.6em; }

.pd [class*='__text'] p:last-child,
.pd [class*='__intro'] p:last-child { margin-bottom: 0; }

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


/* ---- Legacy defences ---------------------------------------------------- */

/* desktop.css and responsive.css set overflow-x:hidden on #wrapper/body, which
   kills position:sticky for the desktop action rail.

   That override is scoped to 900px and up on purpose. The only thing that needs
   it is the sticky summary rail, which is desktop-only, while mobile depends on
   the legacy overflow-x:hidden to contain the fixed Complianz cookie banner —
   it is 654px wide and stretches the document sideways without it. Applying the
   override at every width put that clipping at the mercy of `overflow: clip`
   support, and pushed the top of the page off-screen where it was unsupported. */
@media (min-width: 900px) {
	body.billi-pdp,
	body.billi-pdp #wrapper {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* The old single-product chrome is no longer rendered; hide the empty
   breadcrumb strip the shop header still prints when it finds nothing. */
body.billi-pdp .breadcrumb-holder:empty { display: none; }
/* The legacy cyan fails WCAG AA (3.07:1); the same hue darkened passes (4.57:1). */
body.billi-pdp .breadcrumb_last { color: #0080a0; }

/* Sticky bar clearance so the footer is never occluded on mobile. */
@media (max-width: 899px) {
	body.billi-pdp.pd-has-sticky { padding-bottom: 76px; }
}


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

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular,
   hover inverts to white with a navy ring for contrast. */
.pd .pd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover.
   The related-product card is one big link wrapping a <span> button, so the
   opt-out has to sit on the link: opacity on an ancestor cannot be undone by
   a descendant. */
.pd .pd-btn:hover,
.pd .pd-card__link:hover { opacity: 1; }

.pd .pd-btn--navy { background: var(--pd-navy); color: #fff; }
.pd .pd-btn--navy:hover { background: #fff; color: var(--pd-navy); box-shadow: inset 0 0 0 1px var(--pd-navy); }

.pd .pd-btn--ghost {
	background: transparent;
	color: var(--pd-navy);
	border: 1px solid var(--pd-navy);
}
.pd .pd-btn--ghost:hover { background: var(--pd-navy); color: #fff; }

.pd .pd-btn--small {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 14px;
}

.pd .pd-btn--block { display: flex; width: 100%; }


/* ---- Shared section scaffolding ----------------------------------------- */

.pd-section-heading {
	color: var(--pd-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 28px;
}

@media (min-width: 900px) {
	.pd-section-heading { font-size: 32px; margin-bottom: 40px; }
}

.pd-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

.pd-section-head .pd-section-heading { margin-bottom: 0; }

@media (min-width: 640px) {
	.pd-section-head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 900px) {
	.pd-section-head { margin-bottom: 40px; }
}


/* ---- Badges and swatches ------------------------------------------------ */

/* All Billi Blue with Billi's own icons; see .hp-badge in home.css. */
.pd-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid currentColor;
	background: #fff;
	color: var(--pd-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.pd-badge svg { width: 20px; height: 20px; }

.pd-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}


/* =========================================================================
   Hero
   ========================================================================= */

.pd-hero {
	padding: 28px 0 44px;
	background: #fff;
}

@media (min-width: 900px) {
	.pd-hero { padding: 40px 0 72px; }
}

/* Mobile leads with the heading, then the gallery, then the detail — a
   gallery-first hero puts the heading past 844px and fails the 3-second test.
   Desktop restores the conventional gallery-left, detail-right split. */
.pd-hero__grid { display: grid; gap: 24px; }

@media (min-width: 900px) {
	.pd-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'gallery head'
			'gallery summary';
		column-gap: 56px;
		row-gap: 24px;
		align-items: start;
	}

	.pd-hero__head { grid-area: head; }
	.pd-gallery { grid-area: gallery; }
	.pd-summary { grid-area: summary; }
}


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

/* Matches .pr-card__media on the range page: grey panel, contained product
   shot. Deliberately tolerant of a single mediocre image — 45 products share
   one placeholder and several dispensers share a generic studio shot. */
.pd-gallery__stage {
	border-radius: 4px;
	background: var(--pd-band-grey);
	padding: 7%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pd .pd-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.2s ease;
}

.pd-gallery__img.is-swapping { opacity: 0; }

/* One scrolling row at every width. Wrapping to a second row costs ~80px and
   pushes the heading below the fold on a 390 × 844 viewport, and on desktop it
   left a single orphaned thumbnail on its own line. */
.pd-gallery__rail { position: relative; }

.pd-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Bleed to the screen edge on mobile so the row reads as scrollable. */
	margin-right: calc(var(--pd-gutter) * -1);
	padding-right: var(--pd-gutter);
}

.pd-gallery__thumbs::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
	.pd-gallery__thumbs { margin-right: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pd-gallery__thumbs { scroll-behavior: auto; }
}

/* Arrows mirror the homepage reviews carousel. A scroll rail with no control
   hides content on desktop, where there is no swipe. JS shows them only when
   the row actually overflows and disables them at each end. */
.pd .pd-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: 6px; /* offsets the rail's 12px top margin */
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--pd-line);
	border-radius: 50%;
	background: #fff;
	color: var(--pd-navy);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(24, 29, 70, 0.12);
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.pd-gallery__rail.has-overflow .pd-gallery__arrow { display: inline-flex; }

.pd .pd-gallery__arrow:hover { background: var(--pd-lightblue); }

.pd .pd-gallery__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.pd .pd-gallery__arrow--prev { left: -6px; }
.pd .pd-gallery__arrow--next { right: -6px; }

.pd .pd-gallery__arrow svg { width: 15px; height: 15px; }

.pd .pd-gallery__thumb {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 68px;
	height: 68px;
	padding: 6px;
	border: 1px solid var(--pd-line);
	border-radius: 4px;
	background: var(--pd-band-grey);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.pd .pd-gallery__thumb:hover { border-color: var(--pd-lightblue); }
.pd .pd-gallery__thumb.is-active { border-color: var(--pd-navy); }

.pd .pd-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

@media (min-width: 900px) {
	.pd .pd-gallery__thumb { width: 84px; height: 84px; }
}


/* ---- Summary / action rail ---------------------------------------------- */

@media (min-width: 900px) {
	.pd-summary__inner {
		position: sticky;
		top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 24px);
	}
	body.admin-bar .pd-summary__inner {
		top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 56px);
	}
}

.pd-title { margin: 0; }

.pd-title__name {
	display: block;
	color: var(--pd-navy);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
}

/* Deliberately not --pd-muted at meta size: this is the line that tells an
   unfamiliar buyer what the product does and who it suits. */
.pd-title__descriptor {
	display: block;
	margin: 8px 0 0;
	color: var(--pd-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
}

@media (min-width: 900px) {
	.pd-title__name { font-size: 38px; }
	.pd-title__descriptor { font-size: 20px; }
}

.pd-summary__text {
	font-size: 16px;
	line-height: 1.5;
}

.pd-keyfacts {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--pd-line);
	display: grid;
	gap: 12px;
}

.pd-keyfact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.4;
}

.pd-keyfact svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--pd-navy);
}


/* ---- Finish swatches ---------------------------------------------------- */

.pd-finishes {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--pd-line);
}

.pd-finishes__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
}

.pd-finishes__label { font-size: 15px; font-weight: 600; color: var(--pd-navy); }
.pd-finishes__value { font-size: 15px; color: var(--pd-muted); }

.pd-finishes__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pd .pd-swatch {
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pd-sw, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.pd .pd-swatch:hover { transform: scale(1.08); }

.pd .pd-swatch.is-active::after {
	content: '';
	position: absolute;
	inset: -5px;
	border: 2px solid var(--pd-navy);
	border-radius: 50%;
}


/* ---- CTAs --------------------------------------------------------------- */

.pd-actions {
	display: grid;
	gap: 10px;
	margin-top: 26px;
}

.pd-price {
	color: var(--pd-navy);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

.pd-reassure {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.pd-reassure li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pd-muted);
}

.pd-reassure svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: var(--pd-navy);
}

.pd-callus {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--pd-muted);
}

.pd-callus a {
	color: var(--pd-navy);
	font-weight: 600;
	text-decoration: underline;
}


/* =========================================================================
   Fit — "is this the right one for your site?"
   ========================================================================= */

.pd-fit { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-fit { padding: 88px 0; }
}

.pd-fit__grid { display: grid; gap: 32px; }

@media (min-width: 900px) {
	.pd-fit__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

.pd-fit__text { font-size: 16px; line-height: 1.5; margin-bottom: 24px; }

.pd-fit__facts {
	margin: 0;
	border-top: 1px solid var(--pd-line);
}

.pd-fit__fact {
	display: grid;
	gap: 2px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pd-line);
}

@media (min-width: 640px) {
	.pd-fit__fact {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 20px;
		align-items: baseline;
	}
}

.pd-fit__fact dt {
	margin: 0;
	color: var(--pd-navy);
	font-size: 15px;
	font-weight: 600;
}

.pd-fit__fact dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

.pd-fit__drawing { margin: 28px 0 0; }

.pd .pd-fit__drawing-img {
	width: 100%;
	border: 1px solid var(--pd-line);
	border-radius: 4px;
	background: #fff;
}

.pd-fit__drawing figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--pd-muted);
}

/* Being honest about who this model is wrong for lifts lead quality. */
.pd-fit__alt {
	padding: 24px;
	border: 1px solid var(--pd-line);
	border-radius: 4px;
	background: var(--pd-band-blue);
}

@media (min-width: 900px) {
	.pd-fit__alt { padding: 28px; }
}

.pd-fit__alt-title {
	color: var(--pd-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.pd-fit__alt-text {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.45;
}

.pd-fit__alt-list {
	list-style: none;
	margin: 18px 0;
	padding: 0;
	border-top: 1px solid var(--pd-line);
}

.pd-fit__alt-list li { border-bottom: 1px solid var(--pd-line); }

.pd-fit__alt-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 2px;
	color: var(--pd-navy);
	text-decoration: none;
}

.pd-fit__alt-link:hover .pd-fit__alt-name { text-decoration: underline; }
.pd-fit__alt-link:hover .pd-fit__alt-chev { transform: translateX(3px); }

.pd .pd-fit__alt-img {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 4px;
	background: #fff;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pd-fit__alt-copy { flex: 1 1 auto; min-width: 0; }

.pd-fit__alt-label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}

.pd-fit__alt-name {
	display: block;
	font-size: 13px;
	color: var(--pd-muted);
	line-height: 1.3;
}

.pd-fit__alt-chev {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--pd-lightblue);
	transition: transform 0.2s ease;
}


/* =========================================================================
   Features
   ========================================================================= */

.pd-features { padding: 56px 0; background: var(--pd-band-grey); }

@media (min-width: 900px) {
	.pd-features { padding: 80px 0; }
}

.pd-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

@media (min-width: 640px) {
	.pd-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.pd-features__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
}

.pd-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.pd .pd-feature__icon {
	width: 62px;
	height: 62px;
	object-fit: contain;
}

.pd-feature__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pd-navy);
}


/* =========================================================================
   Sustainability
   ========================================================================= */

.pd-sus { padding: 56px 0 0; background: #fff; }

@media (min-width: 900px) {
	.pd-sus { padding: 88px 0 0; }
}

.pd-sus__card {
	display: grid;
	gap: 0;
	border-radius: 4px;
	background: var(--pd-lightblue);
	overflow: hidden;
}

@media (min-width: 768px) {
	.pd-sus__card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}

.pd-sus__content { padding: 32px 24px; }

@media (min-width: 768px) {
	.pd-sus__content { padding: 48px 56px; }
}

.pd-sus__stat {
	color: var(--pd-navy);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.05;
}

@media (min-width: 768px) {
	.pd-sus__stat { font-size: 52px; }
}

.pd-sus__text {
	margin-top: 14px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pd-navy);
}

.pd .pd-sus__btn { margin-top: 24px; }
/* Already the inverted white hover; kept explicit because this button sits
   on a Light Blue card where the navy ring would be the only edge. */
.pd .pd-sus__btn:hover { background: #fff; color: var(--pd-navy); }

.pd-sus__media { align-self: stretch; min-height: 220px; }

.pd .pd-sus__img { width: 100%; height: 100%; object-fit: cover; }


/* =========================================================================
   Reassurance
   ========================================================================= */

.pd-reassurance { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-reassurance { padding: 88px 0; }
}

.pd-reassurance__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 24px;
}

@media (min-width: 640px) {
	.pd-reassurance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.pd-reassurance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

.pd-reassurance__item {
	padding: 24px;
	border: 1px solid var(--pd-line);
	border-radius: 4px;
}

.pd-reassurance__icon {
	width: 26px;
	height: 26px;
	color: var(--pd-navy);
	margin-bottom: 14px;
}

.pd-reassurance__title {
	color: var(--pd-navy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 6px;
}

.pd-reassurance__text {
	font-size: 15px;
	line-height: 1.45;
	color: var(--pd-muted);
}

.pd-accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--pd-line);
}

.pd-accreditation {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--pd-muted);
	font-size: 12px;
}

.pd .pd-accreditation img { max-height: 56px; width: auto; }


/* =========================================================================
   Specification table
   ========================================================================= */

.pd-specs { padding: 56px 0; background: var(--pd-band-blue); }

@media (min-width: 900px) {
	.pd-specs { padding: 88px 0; }
}

.pd-specs__layout { display: grid; gap: 32px; }

@media (min-width: 900px) {
	.pd-specs__layout {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}
}

/* ---- Mobile accordion --------------------------------------------------- */

.pd-specs__acc {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.pd-specs__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	color: var(--pd-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.pd-specs__summary::-webkit-details-marker { display: none; }

.pd-specs__count {
	margin-left: auto;
	color: var(--pd-muted);
	font-size: 13px;
	font-weight: 400;
}

.pd-specs__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.pd-specs__acc[open] .pd-specs__icon { transform: rotate(45deg); }
.pd-specs__acc[open] .pd-specs__summary { border-bottom: 1px solid var(--pd-line); }

/* From 900px the table is always shown and the toggle disappears — the
   override keeps the content rendered even though <details> is closed.
   product.js sets [open] as a backstop for browsers that ignore this. */
@media (min-width: 900px) {
	.pd-specs__acc > .pd-specs__summary { display: none; }
	.pd-specs__acc > .pd-specs__tablewrap {
		display: block !important;
		content-visibility: visible !important;
	}
}

/* Two sets of legacy rules have to be undone here.

   desktop.css styles bare tables for the old content pages:
     table, table td, table th { border: 3px solid #fff }   → boxed-in rows
     table td, table th        { width: 33.33%; padding: 10px }
     table th                  { font-size: 1.688rem; text-transform: uppercase }
   plus another 1px border from .woocommerce table.

   responsive.css:1611 then forces, on mobile only:
     table   { min-width: 600px }
     th, td  { min-width: 200px; border: 1px solid #ddd }
   which is what made this table scroll sideways on a phone — 600px of table
   in a 350px column. Nothing else in the design system uppercases either. */
.pd .pd-specs__table,
.pd .pd-specs__table th,
.pd .pd-specs__table td,
.pd .pd-specs__table tr,
.pd .pd-specs__table tbody {
	border: 0;
	background: transparent;
	width: auto;
	min-width: 0;
}

.pd .pd-specs__table {
	width: 100%;
	border-collapse: collapse;
}

.pd .pd-specs__table th,
.pd .pd-specs__table td {
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
}

/* Stacked below 768px: a two-column spec table at 390px forces a sideways
   scroll to read the values, which is the whole problem with spec tables on
   phones. Label above value, full width, no horizontal scroll anywhere.
   The table and tbody go block too — leaving them in table layout keeps a
   min-content width from the longest cell even when the rows are blocks. */
.pd .pd-specs__table,
.pd .pd-specs__table tbody {
	display: block;
	width: 100%;
}

.pd .pd-specs__table tr {
	display: block;
	padding: 14px 20px;
	border-bottom: 1px solid var(--pd-line);
}

.pd .pd-specs__table tr:last-child { border-bottom: 0; }

.pd .pd-specs__table th,
.pd .pd-specs__table td { display: block; }

.pd .pd-specs__table th {
	color: var(--pd-navy);
	font-weight: 600;
	margin-bottom: 2px;
}

@media (min-width: 768px) {
	.pd .pd-specs__table { display: table; }
	.pd .pd-specs__table tbody { display: table-row-group; }
	.pd .pd-specs__table tr { display: table-row; padding: 0; border-bottom: 0; }

	.pd .pd-specs__table th,
	.pd .pd-specs__table td {
		display: table-cell;
		padding: 14px 18px;
		border-bottom: 1px solid var(--pd-line);
	}

	.pd .pd-specs__table tr:last-child :is(th, td) { border-bottom: 0; }

	.pd .pd-specs__table th { width: 40%; margin-bottom: 0; }
}

.pd-specs__copy { font-size: 16px; line-height: 1.55; }


/* =========================================================================
   Downloads
   ========================================================================= */

.pd-downloads { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-downloads { padding: 88px 0; }
}

.pd-downloads__intro {
	margin: -12px 0 28px;
	font-size: 15px;
	color: var(--pd-muted);
}

.pd-downloads__grid {
	display: grid;
	gap: 28px;
}

@media (min-width: 640px) {
	.pd-downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.pd-downloads__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

.pd-downloads__group-title {
	margin: 0 0 10px;
	color: var(--pd-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.pd-downloads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--pd-line);
}

.pd-downloads__list li { border-bottom: 1px solid var(--pd-line); }

.pd-download {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 2px;
	color: var(--pd-navy);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
}

.pd-download:hover .pd-download__title { text-decoration: underline; }

.pd-download__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--pd-lightblue);
}

.pd-download__title { flex: 1 1 auto; min-width: 0; }

.pd-download__ext {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--pd-band-grey);
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 600;
}


/* =========================================================================
   Enquiry
   ========================================================================= */

.pd-enquiry { padding: 56px 0; background: var(--pd-band-grey); }

/* "Get a quote" links anywhere on the page land here (billi_quote_url()), so
   a jump to the section clears the fixed header rather than hiding the form
   heading under it. The body class carries the header's height tokens. */
.pd-enquiry {
	scroll-margin-top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 0px) + 16px);
}

@media (min-width: 900px) {
	.pd-enquiry { padding: 88px 0; }
}

.pd-enquiry__grid { display: grid; gap: 32px; }

@media (min-width: 900px) {
	.pd-enquiry__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 56px;
		align-items: start;
	}
}

.pd-enquiry__lead {
	margin: -12px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

.pd-steps {
	margin-top: 28px;
	padding: 24px;
	border-radius: 4px;
	background: #fff;
}

.pd-steps__title {
	color: var(--pd-navy);
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 16px;
}

.pd-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: pd-step;
}

.pd-step { display: flex; align-items: flex-start; gap: 12px; }

.pd-step__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pd-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.pd-step__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--pd-navy);
	line-height: 1.3;
}

.pd-step__text {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--pd-muted);
}

.pd-enquiry__alt {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pd-muted);
}

.pd-enquiry__alt a { color: var(--pd-navy); font-weight: 600; text-decoration: underline; }

.pd-enquiry__form {
	padding: 24px;
	border-radius: 4px;
	background: #fff;
}

@media (min-width: 900px) {
	.pd-enquiry__form { padding: 36px; }
}

/* ---- Gravity Forms ------------------------------------------------------
   Form 33 renders in Gravity Forms 2.10 "gravity-theme" markup: a CSS-grid
   .gform_fields of .gfield divs and fieldsets, .gchoice rows for checkbox and
   radio groups, and .ginput_complex for the sub-labelled name field.

   Two legacy rules have to be beaten, both from css/desktop.css:
     .single-product .gform_wrapper — a #efefef panel with 50px 40px padding,
        written for the old layout where the brochure form sat by the gallery.
     body .gform_wrapper input:not([type=radio]):not([type=checkbox])… — six
        chained :not() attribute selectors give it specificity (0,7,2), so the
        overrides below repeat the chain rather than trying to out-nest it.
   ------------------------------------------------------------------------ */

.pd .pd-enquiry__form .gform_wrapper,
.pd .pd-enquiry__form .gform_wrapper.gravity-theme {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

/* Gravity Forms lays fields out on a twelve-column grid and already tags each
   one — Company, Email, Phone and Region are .gfield--width-half (span 6), the
   rest are --width-full. Declaring a single explicit column here turned those
   spans into eleven implicit 0px tracks and squashed the half-width fields to
   104px, so the track list matches what the markup expects instead. Paired
   fields also keep the form appreciably shorter on a phone. */
.pd .pd-enquiry__form .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Anything GF has not tagged with a width (the captcha) takes the full row. */
.pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1; }
.pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--width-half { grid-column: span 6; }
.pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--width-third { grid-column: span 4; }
.pd .pd-enquiry__form .gform_wrapper .gform_fields > .gfield--width-quarter { grid-column: span 3; }

.pd .pd-enquiry__form .gform_wrapper .gfield {
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 0;
}

/* The section header repeats "Enquire Now" above our own heading. */
.pd .pd-enquiry__form .gform_wrapper .gsection,
.pd .pd-enquiry__form .gform_wrapper .gfield--type-section { display: none; }

/* Honeypot and GF's own validation container must stay hidden. */
.pd .pd-enquiry__form .gform_wrapper .gform_validation_container,
.pd .pd-enquiry__form .gform_wrapper .gfield--type-honeypot { display: none !important; }

.pd .pd-enquiry__form .gform_wrapper :is(.gfield_label, .gform-field-label) {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--pd-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* First / Last, and other sub-labels, are quieter than the field label. */
.pd .pd-enquiry__form .gform_wrapper .gform-field-label--type-sub {
	margin: 6px 0 0;
	color: var(--pd-muted);
	font-size: 13px;
	font-weight: 400;
}

.pd .pd-enquiry__form .gform_wrapper .gfield_required { color: var(--pd-red); }

/* Repeats the legacy :not() chain to reach specificity (0,10,2). */
body .pd .pd-enquiry__form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
body .pd .pd-enquiry__form .gform_wrapper textarea,
body .pd .pd-enquiry__form .gform_wrapper select {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--pd-line);
	border-radius: 4px;
	background: #fff;
	/* 16px stops iOS zooming the viewport when a field takes focus. */
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--pd-text);
	box-shadow: none;
	transition: border-color 0.15s ease;
}

body .pd .pd-enquiry__form .gform_wrapper textarea {
	min-height: 130px;
	line-height: 1.5;
	resize: vertical;
}

/* Native select arrow, drawn inline so there is no extra request. */
body .pd .pd-enquiry__form .gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23181d46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
}

/* Gravity Forms' theme CSS sizes a "medium" select at half its column
   (.gform_wrapper.gravity-theme .gfield select.medium outranks the width
   rule above), so every select is set to fill its column again. */
body .pd .pd-enquiry__form .gform_wrapper .gfield select { width: 100%; }

body .pd .pd-enquiry__form .gform_wrapper :is(input, textarea, select):focus {
	border-color: var(--pd-navy);
	outline: 2px solid var(--pd-lightblue);
	outline-offset: 1px;
}

body .pd .pd-enquiry__form .gform_wrapper ::placeholder { color: var(--pd-muted); opacity: 1; }

/* Name field: GF lays its parts out as a nested grid. */
.pd .pd-enquiry__form .gform_wrapper .ginput_complex {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.pd .pd-enquiry__form .gform_wrapper .ginput_complex > span { min-width: 0; }
.pd .pd-enquiry__form .gform_wrapper .ginput_container { margin: 0; }

/* Gravity Forms' theme CSS pads the parts of compound fields and puts 8px
   under each; the grid gap above already spaces them. */
body .pd .pd-enquiry__form .gform_wrapper .ginput_complex > span {
	margin-bottom: 0;
	padding: 0;
}

/* The float clearer GF prints inside compound fields is a grid item here,
   and added an empty row (and a 12px gap) under the last part. */
body .pd .pd-enquiry__form .gform_wrapper .ginput_complex > .gf_clear { display: none; }

/* Address fields: the street line takes the full width. On a phone every
   part stacks (in two columns the country select was cut to "United Ki" at
   375px); the city, postcode and country pair up from 640px. */
body .pd .pd-enquiry__form .gform_wrapper .ginput_container_address { grid-template-columns: minmax(0, 1fr); }
body .pd .pd-enquiry__form .gform_wrapper .ginput_complex > .ginput_full { grid-column: 1 / -1; }

@media (min-width: 640px) {
	body .pd .pd-enquiry__form .gform_wrapper .ginput_container_address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Checkbox and radio groups. */
.pd .pd-enquiry__form .gform_wrapper :is(.gfield_checkbox, .gfield_radio) {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd .pd-enquiry__form .gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.pd .pd-enquiry__form .gform_wrapper .gchoice label {
	margin: 0;
	color: var(--pd-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

/* desktop.css:7640 ships its own checkbox/radio system — a #469DDD fill plus
   ::after pseudo-elements for the tick and dot. Its radio dot is a 14px white
   circle offset 6px inside a 20px control, so it spills over the edge and
   renders as a crescent. Both pseudo-elements are removed here; this page
   draws its own states below. */
body .pd .pd-enquiry__form .gform_wrapper :is(input[type=checkbox], input[type=radio])::after,
body .pd .pd-enquiry__form .gform_wrapper :is(input[type=checkbox], input[type=radio])::before {
	content: none;
}

/* Gravity Forms sets appearance:none on these, which makes accent-color a
   no-op, and then paints no :checked state — so the boxes fell back to
   whatever the browser drew. Both states are owned here instead. */
body .pd .pd-enquiry__form .gform_wrapper :is(input[type=checkbox], input[type=radio]) {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 2px solid #cbcfda;
	background: #fff;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body .pd .pd-enquiry__form .gform_wrapper input[type=checkbox] { border-radius: 4px; }
body .pd .pd-enquiry__form .gform_wrapper input[type=radio] { border-radius: 50%; }

body .pd .pd-enquiry__form .gform_wrapper :is(input[type=checkbox], input[type=radio]):hover {
	border-color: var(--pd-navy);
}

/* Filled navy box with a white tick, inlined so there is no extra request. */
body .pd .pd-enquiry__form .gform_wrapper input[type=checkbox]:checked {
	background-color: var(--pd-navy);
	border-color: var(--pd-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px 14px;
}

/* The radio keeps a white field with a painted dot. An inset box-shadow ring
   renders as a crescent here — it does not clip cleanly against the border. */
body .pd .pd-enquiry__form .gform_wrapper input[type=radio]:checked {
	border-color: var(--pd-navy);
	background-color: #fff;
	background-image: radial-gradient(circle at center, var(--pd-navy) 0 4px, transparent 4.5px);
}

.pd .pd-enquiry__form .gform_wrapper .gfield_description {
	margin: 6px 0 0;
	padding: 0;
	color: var(--pd-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Submit. */
.pd .pd-enquiry__form .gform_wrapper .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

body .pd .pd-enquiry__form .gform_wrapper :is(.gform_button, input[type=submit]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 12px 28px;
	border: 0;
	border-radius: 2px;
	background: var(--pd-navy);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	/* The legacy submit rule uppercases and sets line-height:40px. */
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .pd .pd-enquiry__form .gform_wrapper :is(.gform_button, input[type=submit]):hover {
	background: #fff;
	color: var(--pd-navy);
	box-shadow: inset 0 0 0 1px var(--pd-navy);
}

/* The generic light-blue focus ring is under 3:1 against the white form card
   (WCAG 1.4.11), and the submit has no border to change colour like the
   inputs do, so it gets its own navy ring. */
body .pd .pd-enquiry__form .gform_wrapper :is(.gform_button, input[type=submit]):focus {
	outline: 2px solid var(--pd-navy);
	outline-offset: 2px;
}

/* Validation. */
body .pd .pd-enquiry__form .gform_wrapper .gfield_error :is(input, textarea, select) { border-color: var(--pd-red); }

.pd .pd-enquiry__form .gform_wrapper :is(.validation_message, .gfield_validation_message) {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pd-red);
	font-size: 14px;
}

body .pd .pd-enquiry__form .gform_wrapper :is(.gform_validation_errors, div.validation_error) {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 0;
	border-left: 4px solid var(--pd-red);
	border-radius: 4px;
	background: #fdecec;
	color: var(--pd-red);
	font-size: 14px;
	text-align: left;
}

/* desktop.css forces the summary heading to white (!important), which made
   it invisible on the pale red panel. */
body .pd .pd-enquiry__form .gform_wrapper .gform_validation_errors > h2 {
	margin: 0;
	color: var(--pd-red) !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.pd .pd-enquiry__form .gform_confirmation_message {
	padding: 24px;
	border-radius: 4px;
	background: var(--pd-band-blue);
	color: var(--pd-navy);
	font-size: 16px;
	line-height: 1.5;
}

/* reCAPTCHA does not fit a 390px column and overflows the card. */
.pd .pd-enquiry__form .gform_wrapper .ginput_recaptcha {
	transform-origin: 0 0;
	overflow: hidden;
}

@media (max-width: 400px) {
	.pd .pd-enquiry__form .gform_wrapper .ginput_recaptcha { transform: scale(0.87); }
}


/* =========================================================================
   Case studies
   ========================================================================= */

.pd-cases { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-cases { padding: 88px 0; }
}

.pd-cases__grid { display: grid; gap: 24px; }

@media (min-width: 768px) {
	.pd-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

.pd-case {
	border: 1px solid var(--pd-line);
	border-radius: 4px;
	overflow: hidden;
}

.pd-case__link { display: block; text-decoration: none; color: inherit; }

.pd-case__media { aspect-ratio: 700 / 380; background: var(--pd-band-grey); overflow: hidden; }

.pd .pd-case__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.pd-case__link:hover .pd-case__img { transform: scale(1.03); }

.pd-case__body { padding: 24px; }

.pd-case__title {
	margin: 0;
	color: var(--pd-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.pd-case__text {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--pd-muted);
}

.pd-case__more {
	display: inline-block;
	margin-top: 14px;
	color: var(--pd-navy);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
}


/* =========================================================================
   FAQs — same component as the sectors hub.
   ========================================================================= */

.pd-faqs { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-faqs { padding: 88px 0; }
}

.pd-faqs__list { border-top: 1px solid var(--pd-line); }

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

.pd-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 2px;
	color: var(--pd-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.pd-faq__q::-webkit-details-marker { display: none; }

.pd-faq__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.pd-faq[open] .pd-faq__icon { transform: rotate(45deg); }

.pd-faq__a {
	padding: 0 2px 20px;
	max-width: 860px;
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 900px) {
	.pd-faq__q { padding: 22px 2px; font-size: 19px; }
}


/* =========================================================================
   Related products — cards mirror .pr-card on the range page.
   ========================================================================= */

.pd-related { padding: 56px 0; background: #fff; }

@media (min-width: 900px) {
	.pd-related { padding: 88px 0; }
}

.pd-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 12px;
}

@media (min-width: 768px) {
	.pd-related__grid { gap: 36px 20px; }
}

@media (min-width: 900px) {
	.pd-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
}

.pd-card { display: flex; }

.pd-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.pd-card__media {
	border-radius: 4px;
	background: var(--pd-band-grey);
	padding: 9%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 14px;
}

.pd .pd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.3s ease;
}

.pd-card__link:hover .pd-card__media img { transform: scale(1.04); }

.pd-card__title {
	margin: 0 0 10px;
	color: var(--pd-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.pd-card__title { font-size: 17px; }
}

.pd-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

/* 16px is the smallest the official icons stay legible at. */
.pd-card .pd-badge { font-size: 11px; padding: 4px 8px; gap: 5px; }
.pd-card .pd-badge svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
	.pd-card .pd-badge { font-size: 13px; padding: 5px 12px; gap: 7px; }
	.pd-card .pd-badge svg { width: 20px; height: 20px; }
}

.pd-card__meta { margin-bottom: 14px; }

.pd-card__people {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--pd-muted);
}

.pd-card__people .hp-person-icon { width: 15px; height: 15px; }

.pd .pd-card__btn {
	margin-top: auto;
	width: 100%;
	min-height: 40px;
	padding: 9px 18px;
	font-size: 14px;
}

.pd-card__link:hover .pd-card__btn { background: #fff; color: var(--pd-navy); box-shadow: inset 0 0 0 1px var(--pd-navy); }

@media (min-width: 768px) {
	.pd .pd-card__btn { min-height: 48px; padding: 12px 28px; font-size: 16px; }
}

/* Line cards up row by row, as .pr-card does on the range page: each card
   spans five grid rows and shares them through subgrid, so title, badges,
   capacity and button sit level across a row whatever each card holds. The
   gutter between card rows moves onto the card as padding, because a grid
   row-gap would also open between a card's own rows. */
@supports (grid-template-rows: subgrid) {
	.pd-related__grid {
		--pd-row-gap: 28px;
		row-gap: 0;
		margin-bottom: calc(-1 * var(--pd-row-gap));
	}

	.pd-card {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-bottom: var(--pd-row-gap);
	}

	.pd-card__link {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.pd-card__media { grid-row: 1; }
	.pd-card__title { grid-row: 2; }
	.pd-card__badges { grid-row: 3; align-self: start; }
	.pd-card__meta { grid-row: 4; align-self: start; }
	.pd .pd-card__btn { grid-row: 5; align-self: end; margin-top: 0; }

	@media (min-width: 768px) {
		.pd-related__grid { --pd-row-gap: 36px; }
	}

	@media (min-width: 900px) {
		.pd-related__grid { --pd-row-gap: 44px; }
	}
}


/* =========================================================================
   Closing CTA band. Green Grey, deliberately NOT navy: the site footer is
   Billi Blue, and a navy CTA directly above it reads as one block with only
   a hairline between them (as .sc-help on the sectors hub and .fq-help on
   the FAQs page). The standard navy button carries the colour.
   ========================================================================= */

.pd-help {
	padding: 48px 0;
	background: var(--pd-band-blue);
}

@media (min-width: 768px) {
	.pd-help { padding: 72px 0; }
}

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

@media (min-width: 768px) {
	.pd-help__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
	.pd-help__row > .pd-btn { min-width: 194px; min-height: 52px; }
}

.pd-help .pd-section-heading { color: var(--pd-navy); margin-bottom: 0; }

.pd-help__text {
	margin-top: 12px;
	max-width: 640px;
	color: var(--pd-text);
	font-size: 16px;
	line-height: 1.5;
}


/* =========================================================================
   Mobile sticky CTA bar
   ========================================================================= */

.pd-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: #fff;
	border-top: 1px solid var(--pd-line);
	box-shadow: 0 -4px 16px rgba(24, 29, 70, 0.1);
	padding-bottom: env(safe-area-inset-bottom, 0);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.pd-sticky.is-visible { transform: translateY(0); }

.pd-sticky__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--pd-gutter);
}

.pd-sticky__info { flex: 1 1 auto; min-width: 0; display: none; }

.pd-sticky__name {
	display: block;
	color: var(--pd-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pd-sticky__meta {
	display: block;
	font-size: 12px;
	color: var(--pd-muted);
}

.pd .pd-sticky__cta { flex: 1 1 auto; min-height: 46px; padding: 10px 20px; }

.pd-sticky__call {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--pd-navy);
	border-radius: 50%;
	color: var(--pd-navy);
}

.pd-sticky__call svg { width: 20px; height: 20px; }

@media (min-width: 480px) {
	.pd-sticky__info { display: block; }
	.pd .pd-sticky__cta { flex: 0 0 auto; }
}

/* Desktop keeps the sticky summary rail instead. */
@media (min-width: 900px) {
	.pd-sticky { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pd-sticky,
	.pd .pd-swatch,
	.pd .pd-card__media img,
	.pd .pd-case__img,
	.pd .pd-btn { transition: none; }
}