/*
 * Hua Ban Group theme: styles for our own patterns.
 * Colours, type and spacing come from theme.json presets (--wp--preset--*).
 * Design notes: docs/design-direction.md
 */

:root {
	--hbg-rule: #d5dbe7;
	--hbg-on-dark-muted: #dce3f7;
	--hbg-on-dark-faint: #b9c8f2;
}

/* Keyboard focus: visible on light and dark backgrounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Template parts and sections butt together without gaps. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
}

.hbg-main > .wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* ---------- Header ---------- */

.hbg-header {
	border-bottom: 1px solid var(--hbg-rule);
	background: var(--wp--preset--color--white);
}

.hbg-header__bar {
	gap: var(--wp--preset--spacing--30);
}

.hbg-header__nav {
	gap: var(--wp--preset--spacing--30);
}

/* Tablet widths: keep the menu on one line (it becomes the mobile menu under 600px). */
.hbg-header .wp-block-navigation__container {
	flex-wrap: nowrap;
}

@media (min-width: 600px) and (max-width: 960px) {
	.hbg-header .wp-block-navigation__container {
		gap: 1rem;
	}

	.hbg-header .wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
	}

	.hbg-header .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* Narrow tablets: the full menu needs the room, so show the logo without the name.
   The name stays in the page for screen readers (the logo image has no alt text). */
@media (min-width: 600px) and (max-width: 740px) {
	.hbg-header .hbg-brand__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.hbg-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.hbg-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hbg-header__cta .wp-block-button__link {
	padding: 0.6rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.hbg-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.hbg-brand img {
	display: block;
	width: 48px;
	height: auto;
}

.hbg-brand a {
	color: inherit;
	text-decoration: none;
}

.hbg-brand__name {
	font-weight: 800;
	font-stretch: 120%;
	font-size: 1.125rem;
	line-height: 1;
	white-space: nowrap;
}

.hbg-brand--footer {
	color: var(--wp--preset--color--white);
}

.hbg-brand--footer img {
	width: 56px;
}

/* Header on small screens: hide the header button (it is repeated in the hero). */
@media (max-width: 781px) {
	.hbg-header .wp-block-buttons.hbg-header__cta {
		display: none;
	}
}

/* The "Partner with us" menu item is for small screens only; from 782px the header button does it. */
@media (min-width: 782px) {
	.hbg-header .wp-block-navigation-item.hbg-nav-partner {
		display: none;
	}
}

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

.wp-block-button.hbg-button--on-dark .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid currentcolor;
	padding: calc(0.85rem - 2px) calc(1.4rem - 2px);
}

.wp-block-button.hbg-button--on-dark .wp-block-button__link:hover {
	background: rgb(255 255 255 / 0.12);
}

/* ---------- Hero with route map ---------- */

.hbg-hero h1 {
	max-width: 14ch;
}

.hbg-hero__lead {
	color: var(--hbg-on-dark-muted);
	max-width: 36em;
}

.hbg-hero__columns {
	gap: var(--wp--preset--spacing--40);
}

.hbg-route-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: inherit;
}

.hbg-route-map__line {
	fill: none;
	stroke: var(--wp--preset--color--ring);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hbg-route-map__line--spur {
	stroke-width: 5;
}

.hbg-route-map__stop circle {
	fill: var(--wp--preset--color--white);
	stroke: var(--wp--preset--color--navy);
	stroke-width: 2.5;
}

.hbg-route-map__stop text {
	fill: var(--hbg-on-dark-muted);
	font-size: 15px;
	font-weight: 500;
}

.hbg-ring-outer {
	fill: var(--wp--preset--color--ring);
}

.hbg-ring-gap {
	fill: var(--wp--preset--color--white);
}

.hbg-ring-core {
	fill: var(--wp--preset--color--navy);
}

.hbg-route-map__branch-name {
	fill: var(--wp--preset--color--white);
	font-size: 21px;
	font-weight: 800;
	font-stretch: 118%;
}

.hbg-route-map__note {
	fill: var(--hbg-on-dark-faint);
	font-size: 14px;
	font-weight: 500;
}

/* Small screens: the map shrinks to about half size, so drop minor town names (the key towns stay) and
   enlarge the branch labels (SVG units scale with the drawing). */
@media (max-width: 600px) {
	.hbg-route-map__stop text {
		display: none;
	}

	.hbg-route-map__stop.hbg-route-map__stop--key text {
		display: block;
		font-size: 24px;
	}

	.hbg-route-map__branch-name {
		font-size: 36px;
	}

	.hbg-route-map__note {
		font-size: 25px;
	}

	/* Bigger type needs more room between name and note. */
	.hbg-route-map__branch .hbg-route-map__branch-name {
		transform: translateY(-10px);
	}

	.hbg-route-map__branch .hbg-route-map__note {
		transform: translateY(12px);
	}

	.hbg-route-map__branch--below .hbg-route-map__branch-name {
		transform: translateY(12px);
	}

	.hbg-route-map__branch--below .hbg-route-map__note {
		transform: translateY(34px);
	}

}

/* The page's one motion moment: the route draws itself once. */
@media (prefers-reduced-motion: no-preference) {
	.hbg-route-map__line {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: hbg-draw-route 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.2s forwards;
	}

	.hbg-route-map__line--spur {
		animation-delay: 1.3s;
		animation-duration: 0.8s;
	}
}

@keyframes hbg-draw-route {
	to {
		stroke-dashoffset: 0;
	}
}

/* ---------- Ledger: what a principal gets ---------- */

.hbg-ledger__rows {
	margin: 0;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-ledger__row {
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	gap: 0.25rem 1.5rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-ledger__row dt,
.hbg-ledger__term {
	font-weight: 750;
	font-stretch: 112%;
	color: var(--wp--preset--color--navy);
}

.hbg-ledger__row dd,
.hbg-ledger__desc {
	margin: 0;
}

@media (max-width: 599px) {
	.hbg-ledger__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Divisions ---------- */

.hbg-divisions__rows {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-divisions__row {
	display: grid;
	grid-template-columns: minmax(14rem, 1.1fr) 2fr minmax(10rem, 1fr);
	gap: 0.5rem 2rem;
	align-items: baseline;
	padding-block: 1.5rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-divisions__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-divisions__name a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.hbg-divisions__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hbg-divisions__what,
.hbg-divisions__brands {
	margin: 0;
}

.hbg-divisions__brands {
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
}

@media (max-width: 781px) {
	.hbg-divisions__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Piping ---------- */

.hbg-piping__mark {
	margin: 0;
}

.hbg-piping__mark img {
	display: block;
	width: 120px;
	height: auto;
}

.hbg-piping__gauges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.hbg-piping__gauges figure {
	margin: 0;
	flex: 0 1 min(240px, calc(50% - var(--wp--preset--spacing--40)));
	text-align: center;
}

.hbg-piping__gauges figcaption {
	margin-top: 0.5rem;
	font-weight: 700;
	font-stretch: 110%;
}

.hbg-pipe-gauge {
	display: block;
	width: 100%;
	height: auto;
}

.hbg-pipe-gauge circle {
	fill: none;
}

.hbg-pipe-gauge--grey circle {
	stroke: #b4bac1;
}

.hbg-pipe-gauge--white circle {
	stroke: var(--wp--preset--color--white);
}

.hbg-pipe-gauge text {
	fill: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 600px) {
	.hbg-pipe-gauge text {
		font-size: 24px;
	}
}

/* ---------- Photos ---------- */

.hbg-photo img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	border-radius: 4px;
}

.hbg-photo figcaption {
	color: var(--wp--preset--color--pvc);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.5rem;
}

/* Placeholder photo placements: a row of three, one wide photo, one beside the ledger rows. */
.hbg-photo-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.hbg-photo-row__item {
	margin: 0;
}

.hbg-photo-row__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

@media (max-width: 781px) {
	.hbg-photo-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hbg-wide-photo {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 1240px;
}

.hbg-wide-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
}

.hbg-delivery__photo {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.hbg-delivery__photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

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

.hbg-footer a {
	color: var(--wp--preset--color--white);
}

.hbg-footer__heading {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body);
	font-stretch: 112%;
	margin-bottom: 0.5rem;
}

.hbg-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1.9;
}

.hbg-footer__legal {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid rgb(255 255 255 / 0.2);
	color: var(--hbg-on-dark-muted);
}

/* ---------- Piping solutions page ---------- */

.hbg-piping-hero h1 {
	max-width: 18ch;
}

.hbg-piping-hero__lead {
	color: var(--hbg-on-dark-muted);
	max-width: 40em;
}

.hbg-sizes__note {
	color: var(--hbg-on-dark-muted);
	font-size: var(--wp--preset--font-size--small);
}

.hbg-piping__gauges figcaption span {
	display: block;
	font-weight: 400;
	font-stretch: 100%;
	color: var(--hbg-on-dark-muted);
}

/* Comparison table: three columns on wide screens, stacked rows on phones. */
.wp-block-table.hbg-tiers__table thead {
	border: 0;
}

.wp-block-table.hbg-tiers__table {
	margin: 0;
}

.wp-block-table.hbg-tiers__table table {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.wp-block-table.hbg-tiers__table th,
.wp-block-table.hbg-tiers__table td {
	border: 0;
	padding: 1rem 1.25rem 1rem 0;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--hbg-rule);
}

.wp-block-table.hbg-tiers__table thead th {
	font-size: var(--wp--preset--font-size--subheading);
	color: var(--wp--preset--color--navy);
	border-top: 0;
	border-bottom: 2px solid var(--wp--preset--color--navy);
}

.wp-block-table.hbg-tiers__table thead td {
	border-top: 0;
	border-bottom: 2px solid var(--wp--preset--color--navy);
}

.wp-block-table.hbg-tiers__table tbody th {
	width: 22%;
	font-weight: 750;
	font-stretch: 112%;
	color: var(--wp--preset--color--navy);
}

.wp-block-table.hbg-tiers__table tbody tr:last-child > * {
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-tiers__note {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 699px) {
	.wp-block-table.hbg-tiers__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.wp-block-table.hbg-tiers__table table,
	.wp-block-table.hbg-tiers__table tbody,
	.wp-block-table.hbg-tiers__table tr,
	.wp-block-table.hbg-tiers__table th,
	.wp-block-table.hbg-tiers__table td {
		display: block;
		width: auto;
	}

	.wp-block-table.hbg-tiers__table tbody tr {
		padding-block: 1rem;
		border-top: 1px solid var(--hbg-rule);
	}

	.wp-block-table.hbg-tiers__table tbody tr:last-child {
		border-bottom: 1px solid var(--hbg-rule);
	}

	.wp-block-table.hbg-tiers__table th,
	.wp-block-table.hbg-tiers__table td,
	.wp-block-table.hbg-tiers__table tbody tr:last-child > * {
		padding: 0.2rem 0;
		border: 0;
	}

	.wp-block-table.hbg-tiers__table tbody th {
		width: auto;
		font-size: var(--wp--preset--font-size--lead);
	}

	.wp-block-table.hbg-tiers__table td::before {
		content: attr(data-label) ": ";
		font-weight: 650;
		color: var(--wp--preset--color--pvc);
	}
}

/* Rest of the range: two-column rows. */
.hbg-range__rows .hbg-divisions__row {
	grid-template-columns: minmax(14rem, 1fr) 2fr;
}

@media (max-width: 781px) {
	.hbg-range__rows .hbg-divisions__row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Quotation form (Contact Form 7) ---------- */

.hbg-quotation .wpcf7 form > p,
.hbg-quotation .hbg-form__field {
	margin: 0 0 1.25rem;
}

.hbg-quotation .wpcf7 label,
.hbg-quotation .wpcf7 legend {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 650;
	color: var(--wp--preset--color--navy);
}

.hbg-quotation .wpcf7 fieldset {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.hbg-quotation .wpcf7 .hbg-form__hint {
	font-weight: 400;
	color: var(--wp--preset--color--pvc);
}

.hbg-quotation .wpcf7 input[type="text"],
.hbg-quotation .wpcf7 input[type="email"],
.hbg-quotation .wpcf7 input[type="tel"],
.hbg-quotation .wpcf7 input[type="url"],
.hbg-quotation .wpcf7 select,
.hbg-quotation .wpcf7 input[type="date"],
.hbg-quotation .wpcf7 input[type="file"],
.hbg-quotation .wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--pvc);
	border-radius: 4px;
}

.hbg-quotation .wpcf7 textarea {
	min-height: 8rem;
}

.hbg-quotation .wpcf7 input:focus-visible,
.hbg-quotation .wpcf7 select:focus-visible,
.hbg-quotation .wpcf7 textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--navy);
}

.hbg-quotation .wpcf7 .wpcf7-checkbox,
.hbg-quotation .wpcf7 .wpcf7-acceptance {
	display: block;
}

.hbg-quotation .wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0 0 0.4rem;
}

.hbg-quotation .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.hbg-quotation .wpcf7 input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--navy);
}

.hbg-quotation .wpcf7 input[type="submit"] {
	padding: 0.85rem 1.4rem;
	font: inherit;
	font-weight: 700;
	font-stretch: 108%;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--signal);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.hbg-quotation .wpcf7 input[type="submit"]:hover {
	background: #ffd866;
}

.hbg-quotation .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-weight: 600;
	color: #b3261e;
}

.hbg-quotation .wpcf7-not-valid {
	border-color: #b3261e !important;
	border-width: 2px !important;
}

.hbg-quotation .wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.hbg-quotation .wpcf7 form.invalid .wpcf7-response-output,
.hbg-quotation .wpcf7 form.failed .wpcf7-response-output,
.hbg-quotation .wpcf7 form.aborted .wpcf7-response-output,
.hbg-quotation .wpcf7 form.spam .wpcf7-response-output,
.hbg-quotation .wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #b3261e;
}

.hbg-quotation .wpcf7 form.sent .wpcf7-response-output {
	border-color: #1e7a3c;
}

/* Contact Form 7 wraps fields in paragraphs and adds line breaks; flatten them. */
.hbg-quotation .wpcf7 .hbg-form__field > p {
	margin: 0;
}

.hbg-quotation .wpcf7 br {
	display: none;
}

.hbg-quotation .wpcf7 legend {
	padding: 0;
}

.hbg-quotation .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/* ---------- Partner with us ---------- */

.hbg-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbg-group__list li + li {
	margin-top: 0.75rem;
}

.hbg-group__list strong,
.hbg-group__detail {
	display: block;
}

.hbg-group__detail {
	color: var(--wp--preset--color--pvc);
}

.hbg-steps__rows {
	list-style: none;
	counter-reset: hbg-step;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-steps__row {
	counter-increment: hbg-step;
	display: grid;
	grid-template-columns: 3rem minmax(14rem, 1.1fr) 2fr;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	padding-block: 1.5rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-steps__row::before {
	content: counter(hbg-step);
	font-size: var(--wp--preset--font-size--subheading);
	font-weight: 750;
	font-stretch: 112%;
	color: var(--wp--preset--color--navy);
}

.hbg-steps__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--subheading);
	color: var(--wp--preset--color--navy);
}

.hbg-steps__what {
	margin: 0;
}

@media (max-width: 781px) {
	.hbg-steps__row {
		grid-template-columns: 2rem 1fr;
	}

	.hbg-steps__what {
		grid-column: 2;
	}
}

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

.hbg-catalog__body > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hbg-page-title {
	margin-block: 0.5rem 0;
	font-size: var(--wp--preset--font-size--heading);
	overflow-wrap: anywhere;
}

.hbg-intro {
	max-width: 46rem;
	margin-block-start: 0.75rem;
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--pvc);
}

.hbg-breadcrumb li + li::before {
	content: "/";
	margin-inline-end: 0.5rem;
}

.hbg-breadcrumb [aria-current] {
	color: var(--wp--preset--color--ink);
}

.hbg-section {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hbg-section__title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-section__title a {
	color: inherit;
	text-decoration: none;
}

.hbg-section__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hbg-product__brands {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
}

/* Product page: photo and facts side by side. */
.hbg-product__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-block-start: var(--wp--preset--spacing--30);
}

.hbg-product__top > * {
	margin-block: 0;
}

.hbg-product__top:not(:has(.hbg-product__media)) {
	grid-template-columns: minmax(0, 46rem);
}

.hbg-product__photo {
	margin: 0;
}

.hbg-product__photo img {
	display: block;
	/* Never wider than the file itself: small photos stay small instead of blurring. */
	width: auto;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	/* A product's main photo is never cropped: logos and edges must stay visible. */
	object-fit: contain;
	background: var(--wp--preset--color--paper);
	border-radius: 4px;
}

/* Near-square product shots on white are shown whole on a paper background. */
.hbg-product__photo--contain img {
	object-fit: contain;
	background: var(--wp--preset--color--paper);
}

.hbg-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.hbg-product__thumbs img {
	display: block;
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--hbg-rule);
}

/* Stand-in for a missing photo: brand and size in type, not a grey box. */
.hbg-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	box-sizing: border-box;
	width: 8.5rem;
	height: 6rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--paper);
	border-left: 4px solid var(--wp--preset--color--ring);
	color: var(--wp--preset--color--navy);
	overflow: hidden;
}

.hbg-tile__main {
	font-weight: 800;
	font-stretch: 118%;
	font-size: 1.125rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.hbg-tile__size {
	font-weight: 600;
	color: var(--wp--preset--color--pvc);
	font-size: var(--wp--preset--font-size--small);
}

.hbg-tile--large {
	width: 100%;
	height: auto;
	min-height: 11rem;
	padding: 1.5rem;
}

.hbg-tile--large .hbg-tile__main {
	font-size: var(--wp--preset--font-size--heading);
}

.hbg-tile--large .hbg-tile__size {
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-thumb {
	width: 8.5rem;
	height: 6rem;
}

.hbg-thumb--contain img {
	object-fit: contain;
	background: var(--wp--preset--color--paper);
}

.hbg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.hbg-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.hbg-badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-radius: 4px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.hbg-product__cert {
	margin-block-end: 1rem;
}

.hbg-product__cert > p {
	margin: 0 0 0.5rem;
}

/* Label and value rows. */
.hbg-facts {
	margin: 0;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-facts__row {
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 0.25rem 1.25rem;
	padding-block: 0.8rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-facts__row dt {
	font-weight: 750;
	font-stretch: 112%;
	color: var(--wp--preset--color--navy);
}

.hbg-facts__row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.hbg-facts--wide {
	max-width: 46rem;
}

.hbg-list {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.hbg-list li + li {
	margin-top: 0.35rem;
}

.hbg-files__meta {
	color: var(--wp--preset--color--pvc);
}

.hbg-prose {
	max-width: 46rem;
}

.hbg-prose > * + * {
	margin-block-start: 1rem;
}

.hbg-table-scroll {
	overflow-x: auto;
	max-width: 100%;
}

.hbg-table {
	width: 100%;
	border-collapse: collapse;
}

.hbg-table th,
.hbg-table td {
	padding: 0.8rem 1.25rem 0.8rem 0;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-table thead th {
	border-top: 0;
	border-bottom: 2px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.hbg-table tbody th {
	font-weight: 750;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.hbg-table tbody tr:last-child > * {
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-table-note {
	margin-block: 0.75rem 0;
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--pvc);
}

/* Call to action. */
.hbg-cta {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hbg-cta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-cta__lead {
	margin: 0.25rem 0 1rem;
}

.hbg-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.hbg-cta__phone {
	font-weight: 650;
}

.hbg-product__side .hbg-cta {
	padding-top: var(--wp--preset--spacing--20);
}

/* Search form (Products page and search results): plain field and a navy button. */
.hbg-search {
	max-width: 32rem;
	margin-block: var(--wp--preset--spacing--30);
}

.hbg-search .wp-block-search__label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.hbg-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.5rem;
}

.hbg-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--pvc);
	border-radius: 4px;
}

.hbg-search .wp-block-search__input:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--navy);
}

.hbg-search .wp-block-search__button {
	margin: 0;
	padding: 0.7rem 1.25rem;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--navy);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.hbg-search .wp-block-search__button:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hbg-catalog__body > .wp-block-query .hbg-guide-rows {
	margin-top: var(--wp--preset--spacing--30);
}

/* Rows shared by categories, products and brands. */
.hbg-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-row {
	display: grid;
	gap: 0.5rem 2rem;
	align-items: baseline;
	padding-block: 1.25rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-row__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-row__name a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.hbg-row__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hbg-row__what,
.hbg-row__count {
	margin: 0;
}

.hbg-brand-scope {
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
}

.hbg-row__count {
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
}

.hbg-category-row {
	grid-template-columns: minmax(14rem, 1.1fr) 2fr minmax(10rem, 0.8fr);
}

/* Brands in a category, then the product count: the brands in the muted third column (as on the home page). */
.hbg-row__meta > * {
	margin: 0;
}

.hbg-row__brands {
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
	line-height: 1.6;
}

.hbg-row__brands a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.hbg-row__brands a:hover {
	color: var(--wp--preset--color--navy);
}

.hbg-row__brands + .hbg-row__count {
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.hbg-brand-row {
	grid-template-columns: minmax(10rem, 0.8fr) 2.4fr minmax(8rem, 0.6fr);
}

.hbg-brand-row__text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hbg-brand-row__text > * {
	margin: 0;
}

.hbg-brand-row__logo {
	order: 2;
	flex: 0 0 auto;
}

.hbg-brand-row__logo img {
	display: block;
	max-height: 2.5rem;
	max-width: 6rem;
	width: auto;
	height: auto;
}

.hbg-notfound .hbg-row {
	grid-template-columns: minmax(12rem, 1fr) 2fr;
}

.hbg-product-row {
	grid-template-columns: 8.5rem minmax(0, 2fr) minmax(8rem, 1fr);
	align-items: start;
}

.hbg-product-row__text .hbg-row__what {
	margin-top: 0.25rem;
}

.hbg-product-row__meta p {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--pvc);
	font-weight: 600;
}

.hbg-product-row__meta .hbg-badges {
	margin: 0;
}

.hbg-empty p {
	margin: 0;
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-banner {
	margin: 0;
}

.hbg-banner {
	margin-block: var(--wp--preset--spacing--30);
}

.hbg-banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	object-fit: cover;
	border-radius: 4px;
}

@media (max-width: 599px) {
	.hbg-banner img {
		aspect-ratio: 3 / 2;
	}
}

/* Whole banner: for product pictures that must not be cropped. Shown at their own
   proportions, left-aligned, up to the same height as a cropped banner. */
.hbg-banner.hbg-banner--whole img {
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
}

.hbg-brand-logo {
	margin: 0;
}

.hbg-brand-logo img {
	display: block;
	max-height: 5rem;
	width: auto;
}

@media (max-width: 781px) {
	.hbg-product__top,
	.hbg-category-row,
	.hbg-brand-row,
	.hbg-notfound .hbg-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.hbg-product-row {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 0.5rem 1rem;
	}

	.hbg-product-row .hbg-tile,
	.hbg-product-row .hbg-thumb {
		width: 6.5rem;
		height: 5rem;
		padding: 0.5rem 0.75rem;
	}

	.hbg-product-row__meta {
		grid-column: 2;
	}

	.hbg-facts__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hbg-intro + .hbg-rows {
	margin-top: var(--wp--preset--spacing--30);
}

.hbg-product-row .hbg-tile {
	height: auto;
	min-height: 6rem;
}

/* Specification tables on phones: each row becomes a small block with labelled values. */
@media (max-width: 599px) {
	.hbg-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.hbg-table,
	.hbg-table tbody,
	.hbg-table tr,
	.hbg-table th,
	.hbg-table td {
		display: block;
	}

	.hbg-table tbody tr {
		padding-block: 0.8rem;
		border-top: 1px solid var(--hbg-rule);
	}

	.hbg-table tbody tr:last-child {
		border-bottom: 1px solid var(--hbg-rule);
	}

	.hbg-table th,
	.hbg-table td,
	.hbg-table tbody tr:last-child > * {
		padding: 0.15rem 0;
		border: 0;
		white-space: normal;
	}

	.hbg-table td::before {
		content: attr(data-label) ": ";
		font-weight: 650;
		color: var(--wp--preset--color--pvc);
	}
}

/* ---------- Contact ---------- */

.hbg-contact-hero__towns {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.hbg-contact-hero .hbg-ledger__rows {
	border-top: 0;
}

.hbg-contact-hero .hbg-ledger__row:first-child,
.hbg-enquiry .hbg-ledger__row:first-child {
	border-top: 1px solid var(--hbg-rule);
}

.hbg-nowrap {
	white-space: nowrap;
}

.hbg-line {
	display: block;
}

.hbg-towns {
	margin-top: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-branch {
	scroll-margin-top: var(--wp--preset--spacing--30);
}

.hbg-branch--group {
	display: grid;
	grid-template-columns: minmax(8rem, 13rem) 1fr;
	gap: 1rem 1.5rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-towns__singles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 0 2rem;
}

.hbg-towns__singles .hbg-branch {
	padding-block: 1.5rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-branch__head > * {
	margin: 0;
}

.hbg-branch__head address {
	margin-top: 0.35rem;
	font-style: normal;
}

.hbg-branch__town {
	/* The town is the row's heading: clearly larger than the company names under it. */
	font-size: var(--wp--preset--font-size--subheading);
	font-weight: 760;
	font-stretch: 112%;
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
}

.hbg-towns__singles .hbg-branch__head {
	margin-bottom: 1rem;
}

.hbg-branch__flag {
	font-weight: 400;
	font-stretch: 100%;
	color: var(--wp--preset--color--pvc);
}

.hbg-branch__body p,
.hbg-branch__body address {
	margin: 0;
	font-style: normal;
}

.hbg-branch__company {
	margin: 0;
	font-size: inherit;
	font-weight: 650;
}

.hbg-branch__body address {
	margin-top: 0.15rem;
}

.hbg-contact-list {
	display: grid;
	gap: 0.3rem;
	margin: 0.6rem 0 0;
}

.hbg-contact-list > div {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 0 0.75rem;
}

.hbg-contact-list dt {
	color: var(--wp--preset--color--pvc);
}

.hbg-contact-list dd {
	margin: 0;
}

/* Several companies in one town sit side by side on wide screens. */
.hbg-branch__companies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.75rem 2rem;
}

.hbg-branch__role,
.hbg-branch__reg {
	color: var(--wp--preset--color--pvc);
}

.hbg-branch__reg {
	font-size: var(--wp--preset--font-size--small);
}

/* A town with several companies: one company per row, with phone, fax and email in fixed columns. */
.hbg-branch--group .hbg-branch__companies {
	grid-template-columns: 1fr;
	gap: 0;
}

.hbg-branch--group .hbg-branch__body {
	padding-block: 1rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-branch--group .hbg-branch__body:first-child {
	padding-top: 0;
	border-top: 0;
}

.hbg-branch--group .hbg-branch__body:last-child {
	padding-bottom: 0;
}

@media (min-width: 1100px) {
	.hbg-branch--group .hbg-branch__body {
		display: grid;
		grid-template-columns: 1fr 8.5rem 7rem 13rem;
		grid-template-rows: auto 1fr;
		gap: 0 1.5rem;
	}

	.hbg-branch--group .hbg-contact-list,
	.hbg-branch--group .hbg-contact-list > div {
		display: contents;
	}

	.hbg-branch--group .hbg-contact-list dt {
		grid-row: 1;
		font-size: var(--wp--preset--font-size--small);
	}

	.hbg-branch--group .hbg-contact-list dd {
		grid-row: 2;
	}

	.hbg-branch--group .hbg-branch__who {
		grid-area: 1 / 1 / 3 / 2;
	}

	.hbg-branch--group .hbg-contact-list__phone > * {
		grid-column: 2;
	}

	.hbg-branch--group .hbg-contact-list__fax > * {
		grid-column: 3;
	}

	.hbg-branch--group .hbg-contact-list__email > * {
		grid-column: 4;
	}
}

.hbg-division-contacts .hbg-ledger__rows {
	margin-top: var(--wp--preset--spacing--30);
}

.hbg-division-contacts .hbg-branch__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbg-enquiry__pointers {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.hbg-enquiry__pointers li + li {
	margin-top: 0.5rem;
}

.hbg-enquiry {
	scroll-margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 899px) {
	.hbg-branch--group {
		grid-template-columns: 1fr;
	}
}

/* ---------- Text pages (About, Privacy policy) ---------- */

.hbg-page__column > .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.hbg-page .wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-page .wp-block-post-content > h3 {
	font-size: var(--wp--preset--font-size--lead);
}

/* About page: two columns on the landing layout. */
.hbg-about h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-about h3 {
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-about .wp-block-column > :first-child {
	margin-top: 0;
}

/* ---------- Guides ---------- */

.hbg-guide__column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hbg-guide__updated {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--pvc);
	font-size: var(--wp--preset--font-size--small);
}

.hbg-guide__image {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.hbg-guide__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.hbg-guide__content > * + * {
	margin-block-start: 1rem;
}

.hbg-guide__content > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-guide__content > h3 {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--lead);
}

.hbg-guide__content .wp-block-image {
	margin-block: var(--wp--preset--spacing--30);
}

.hbg-guide__content .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--hbg-rule);
}

.hbg-guide__content .wp-block-list {
	padding-inline-start: 1.25rem;
}

.hbg-guide__column .hbg-product-row {
	grid-template-columns: 8.5rem minmax(0, 1fr);
}

.hbg-guide__column .hbg-product-row__meta {
	grid-column: 2;
}

.hbg-guides__list {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Same two-column rows as the division and range lists: title left, summary right. */
.wp-block-post-template.hbg-guide-rows {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--hbg-rule);
}

.hbg-guide-rows > li {
	display: grid;
	grid-template-columns: minmax(14rem, 1.1fr) 2fr;
	gap: 0.5rem 2rem;
	align-items: start;
	margin: 0;
	padding-block: 1.5rem;
	border-top: 1px solid var(--hbg-rule);
}

.hbg-guide-rows .hbg-guide-rows__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subheading);
}

.hbg-guide-rows .hbg-guide-rows__title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.hbg-guide-rows .hbg-guide-rows__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hbg-guide-rows .hbg-guide-rows__excerpt {
	margin: 0.2rem 0 0;
}

.hbg-guide-rows .hbg-guide-rows__excerpt p {
	margin: 0;
}

@media (max-width: 781px) {
	.hbg-guide-rows > li {
		grid-template-columns: 1fr;
	}
}

/* Thumbnails of scanned pages (portrait) are shown whole, not cropped to a square. */
.hbg-product__thumbs .hbg-thumb--page img {
	object-fit: contain;
	background: var(--wp--preset--color--paper);
}

/* ---------- Photos with captions, branch photos, Castrol awards ---------- */

.hbg-photo-row__item figcaption {
	color: var(--wp--preset--color--pvc);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.5rem;
}

/* Real photos are small: never show them wider than their own width. */
.hbg-photo-row__item img {
	max-width: 1008px;
}

.hbg-branch__head {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hbg-branch__photo {
	margin: 0 0 1rem;
	max-width: 340px;
}

.hbg-branch__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

/* In a group row the photo goes under the address, so the town and the companies start level. */
.hbg-branch--group .hbg-branch__photo {
	order: 1;
	margin: 1rem 0 0;
}

.hbg-branch--group:has(.hbg-branch__photo) {
	grid-template-columns: minmax(8rem, 17.5rem) 1fr;
}

@media (max-width: 899px) {
	.hbg-branch--group:has(.hbg-branch__photo) {
		grid-template-columns: 1fr;
	}
}

.hbg-awards__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.hbg-awards__item {
	margin: 0;
}

.hbg-awards__frame {
	display: block;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid var(--hbg-rule);
}

.hbg-awards__frame img {
	display: block;
	width: 100%;
	max-width: 590px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin-inline: auto;
}

.hbg-awards__item figcaption {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.hbg-awards__list {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-left: 1.25rem;
}

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

/* ---------- Sections made of core blocks ---------- */

/* Rows and lists built from group blocks: no flow-layout gaps between or inside them. */
.hbg-ledger__rows > *,
.hbg-ledger__row > *,
.hbg-divisions__rows > *,
.hbg-divisions__row > *,
.hbg-steps__rows > *,
.hbg-steps__row > *,
.hbg-rows > *,
.hbg-row > *,
.hbg-photo-row > *,
.hbg-awards__row > *,
.hbg-piping__gauges > *,
.hbg-brand > * {
	margin-block: 0;
}

.hbg-steps__rows {
	list-style: none;
	counter-reset: hbg-step;
}

/* Photos from the media library keep the frame and caption of the old markup. */
.hbg-awards__item img {
	box-sizing: content-box;
	display: block;
	width: calc(100% - 1.5rem - 2px);
	max-width: 590px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 0.75rem;
	background: #fff;
	border: 1px solid var(--hbg-rule);
}

.hbg-photo-row__item figcaption,
.hbg-awards__item .wp-element-caption {
	margin-bottom: 0;
}

.hbg-awards__item .wp-element-caption {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
}

.hbg-piping__mark.wp-block-image {
	margin: 0;
}

.hbg-piping__mark.wp-block-image img {
	display: block;
	width: 120px;
	height: auto;
}

.hbg-brand__name {
	margin: 0;
}

/* Footer text and the branch list block. */
.hbg-footer__tagline {
	margin-top: calc(var(--wp--preset--spacing--30) + 0.45rem);
}

/* Directions links under a branch address. */
.hbg-branch__directions {
	margin: 0.5rem 0 0;
}