/*
 * Belwood & Roe: site styles.
 * Colours, fonts and sizes come from theme.json presets (--wp--preset--*).
 */

/* ---------- Tokens ---------- */

:root {
	--br-navy: var(--wp--preset--color--navy, #1f2a40);
	--br-ink: var(--wp--preset--color--ink, #1f2a40);
	--br-muted: var(--wp--preset--color--muted, #4a5163);
	--br-brass: var(--wp--preset--color--brass, #7a5714);
	--br-brass-light: var(--wp--preset--color--brass-light, #d9b77a);
	--br-stone: var(--wp--preset--color--stone, #f7f4ee);
	--br-line: var(--wp--preset--color--line, #e4ded2);
	--br-white: #fff;
	--br-on-navy: #c9cdd6;
	/* One typeface site-wide, on a short scale: xs, sm, body, h3, then the
	   x-large (h2) and xx-large (h1) presets from theme.json. */
	--br-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--br-text-xs: 13px;
	--br-text-sm: 15px;
	--br-h3: 22px;
	--br-gutter: clamp(16px, 4vw, 32px);
	--br-section: clamp(40px, 5vw, 64px);
	--br-radius: 2px;
	--br-radius-btn: 4px; /* every button and filter chip */
	--br-radius-img: 10px;
	--br-wide: 1280px;
	--br-narrow: 760px;
}

/* ---------- Base ---------- */

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

body {
	margin: 0;
	background: var(--br-stone);
	color: var(--br-ink);
	font-family: var(--br-serif);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Photos get soft corners everywhere. :where() keeps the catch-all weak, so
   a page's own image styles (round swatches, logos) still win. */
:where(.br-content) img,
.br-content .wp-block-image img,
.br-content .wp-block-gallery img,
.br-card__img,
.br-single__image img {
	border-radius: var(--br-radius-img);
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--br-brass);
}

:focus-visible {
	outline: 2px solid var(--br-brass);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--br-serif);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

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

.br-skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	background: var(--br-white);
	color: var(--br-ink);
}

.br-wrap {
	width: 100%;
	max-width: calc(var(--br-wide) + 2 * var(--br-gutter));
	margin-inline: auto;
	padding-inline: var(--br-gutter);
}

.br-wrap--narrow {
	max-width: calc(var(--br-narrow) + 2 * var(--br-gutter));
}

.br-main {
	display: block;
	padding-bottom: var(--br-section);
}

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

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background: #2c3a57;
	color: var(--br-white);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--br-ink);
	border: 1px solid currentColor;
	padding: 13px 27px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--br-navy);
	color: var(--br-white);
	border-color: var(--br-navy);
}

/* One button shape across the site, whichever plugin prints the button:
   rectangular with small rounded corners. */
.wp-element-button,
.wp-block-button__link,
.button,
.search-submit,
.woocommerce-product-search button,
.br-chip,
input[type="submit"],
button[type="submit"] {
	border-radius: var(--br-radius-btn) !important;
}

.woocommerce-product-search button {
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	background: var(--br-navy);
	color: var(--br-white);
	cursor: pointer;
}

/* ---------- Top bar and header ---------- */

.br-topbar {
	padding: 8px var(--br-gutter);
	background: #8a6420; /* deep gold; white text passes AA contrast */
	color: var(--br-white);
	letter-spacing: 0.02em;
	font-size: var(--br-text-xs);
	text-align: center;
}

.br-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Still slightly see-through, but stays white over the navy footer. */
	background: rgb(255 255 255 / 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid rgb(228 222 210 / 0.8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.br-header {
		background: rgb(255 255 255 / 0.96);
	}
}

.admin-bar .br-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.br-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}

.br-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-decoration: none;
	margin-right: auto;
}

.br-brand {
	flex-shrink: 0;
}

.br-brand__name,
.br-brand__tagline {
	white-space: nowrap;
}

.br-brand__name {
	font-family: var(--br-serif);
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.br-brand__tagline {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--br-muted);
}

.br-brand__logo {
	display: block;
	width: auto;
	max-height: 56px;
}

.br-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.br-front {
	padding-bottom: 0;
}

.br-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.br-header__toggle,
.br-search__toggle,
.br-cart {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--br-ink);
	cursor: pointer;
	text-decoration: none;
}

.br-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--br-text-sm);
	white-space: nowrap;
}

.br-header__phone {
	margin-right: 12px;
}

/* Search: a <details> panel, so it works without JavaScript. */
.br-search {
	position: relative;
}

.br-search__toggle {
	list-style: none;
}

.br-search__toggle::-webkit-details-marker {
	display: none;
}

.br-search__panel {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	width: min(420px, calc(100vw - 2 * var(--br-gutter)));
	padding: 16px;
	background: var(--br-white);
	border: 1px solid var(--br-line);
	box-shadow: 0 12px 32px rgb(31 42 64 / 0.08);
}

.br-search__panel form,
.search-form,
.woocommerce-product-search {
	display: flex;
	gap: 8px;
}

.br-search__panel input[type="search"],
.search-form input[type="search"],
.woocommerce-product-search input[type="search"] {
	flex: 1;
	min-width: 0;
}

.br-cart {
	position: relative;
}

.br-cart__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--br-brass);
	color: var(--br-white);
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
}

.br-cart__count[hidden] {
	display: none;
}

/* Main navigation: desktop */
.br-nav__menu,
.br-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.br-nav__menu a {
	display: block;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	white-space: nowrap;
}

.br-nav__menu .current-menu-item > a,
.br-nav__menu .current-menu-ancestor > a {
	color: var(--br-brass);
}

.br-nav__phone {
	display: none;
}

@media (min-width: 1024px) {
	.br-header__toggle {
		display: none;
	}

	/* Brand left, menu centred, contact and basket right. */
	.br-header__inner {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	}

	.br-brand {
		margin-right: 0;
	}

	.br-header__actions {
		justify-self: end;
	}

	.br-nav__menu {
		display: flex;
		gap: 4px;
	}

	.br-nav__menu > li {
		position: relative;
	}

	.br-nav__menu > li > a {
		padding: 12px 10px;
	}

	.br-nav__menu .sub-menu a {
		white-space: normal;
	}

	.br-nav__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 260px;
		padding: 8px 0;
		background: var(--br-white);
		border: 1px solid var(--br-line);
		box-shadow: 0 12px 32px rgb(31 42 64 / 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}

	.br-nav__menu li:hover > .sub-menu,
	.br-nav__menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.br-nav__menu .sub-menu a {
		padding: 10px 20px;
		font-weight: 400;
	}
}

@media (max-width: 1279.98px) {
	.br-header__phone span {
		display: none;
	}

	.br-header__phone {
		width: 44px;
		height: 44px;
		justify-content: center;
		margin-right: 0;
	}
}

/* Main navigation: mobile drawer */
@media (max-width: 1023.98px) {
	.br-header__inner {
		gap: 8px;
		min-height: 64px;
	}

	.br-header__toggle {
		margin-left: -10px;
	}

	.br-header__phone {
		display: none;
	}

	/* Phones: keep the menu button, brand and basket on one line. */
	.br-brand {
		flex-shrink: 1;
		min-width: 0;
	}

	.br-nav {
		position: fixed;
		inset: var(--br-nav-top, 64px) 0 0;
		z-index: 99;
		overflow-y: auto;
		padding: 8px var(--br-gutter) 32px;
		background: var(--br-white);
		border-top: 1px solid var(--br-line);
	}

	.br-nav:not(.is-open) {
		display: none;
	}

	.br-nav__menu > li {
		border-bottom: 1px solid var(--br-line);
	}

	.br-nav__menu a {
		padding: 14px 0;
		font-size: 17px;
	}

	.br-nav__menu .sub-menu {
		padding: 0 0 12px 16px;
	}

	.br-nav__menu .sub-menu a {
		padding: 10px 0;
		font-size: var(--br-text-sm);
		font-weight: 400;
		color: var(--br-muted);
	}

	.br-nav__phone {
		display: inline-flex;
		margin-top: 24px;
	}

	body.br-nav-open {
		overflow: hidden;
	}

	/* The header's blur makes it the containing block for the fixed drawer,
	   which then shrinks to a thin strip. Drop the blur while the menu is open. */
	body.br-nav-open .br-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--br-white);
	}

	/* Search opens full width under the header, not off the left edge. */
	.br-search {
		position: static;
	}

	.br-search__panel {
		top: calc(100% + 8px);
		left: var(--br-gutter);
		right: var(--br-gutter);
		width: auto;
	}
}

/* ---------- Breadcrumbs ---------- */

.br-breadcrumbs {
	padding-top: 20px;
	font-size: var(--br-text-xs);
	color: var(--br-muted);
}

.br-breadcrumbs a {
	color: var(--br-muted);
}

.br-breadcrumbs p {
	margin: 0;
}

.br-breadcrumbs__sep,
.br-breadcrumbs .separator {
	margin: 0 6px;
}

/* ---------- Page headers and content ---------- */

.br-page-header {
	padding-top: clamp(24px, 4vw, 48px);
	padding-bottom: 8px;
}

.br-page-header--narrow {
	max-width: calc(var(--br-narrow) + 2 * var(--br-gutter));
}

/* Pages whose content brings its own H1 still need space under the crumbs. */
.br-page > .br-content:first-child {
	padding-top: clamp(24px, 4vw, 48px);
}

.br-page-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.br-page-intro {
	max-width: 70ch;
	color: var(--br-muted);
}

.br-page-header + .br-content {
	padding-top: clamp(16px, 2.5vw, 32px);
}

.br-content .wp-block-column > :first-child {
	margin-top: 0;
}

/* Block content: narrow by default, wide/full alignments break out. */
.br-content > * {
	max-width: calc(var(--br-narrow) + 2 * var(--br-gutter));
	margin-inline: auto;
	padding-inline: var(--br-gutter);
}

.br-content > .alignwide {
	max-width: calc(var(--br-wide) + 2 * var(--br-gutter));
}

.br-content > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.br-content > .alignfull:not(.br-section):not(.br-band) > * {
	max-width: calc(var(--br-wide) + 2 * var(--br-gutter));
	margin-inline: auto;
	padding-inline: var(--br-gutter);
}

.br-content > .woocommerce,
.br-content > .wp-block-woocommerce-cart,
.br-content > .wp-block-woocommerce-checkout {
	max-width: calc(var(--br-wide) + 2 * var(--br-gutter));
}

.br-content p,
.br-content li {
	color: var(--br-muted);
}

.br-content h2 {
	margin-top: 1.6em;
}

.br-single__image img {
	display: block;
	width: 100%;
	margin-block: 24px;
}

/* Post cards */
.br-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 40px 24px;
	margin-top: 32px;
}

.br-card__link {
	display: block;
	text-decoration: none;
}

.br-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--br-line);
}

.br-card__title {
	margin: 16px 0 4px;
	font-size: var(--br-h3);
}

.br-card__meta {
	margin: 0;
	font-size: var(--br-text-xs);
	color: var(--br-muted);
}

.br-card__excerpt p {
	margin: 8px 0 0;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.navigation.pagination {
	margin-top: 48px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--br-line);
	background: var(--br-white);
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--br-navy);
	border-color: var(--br-navy);
	color: var(--br-white);
}

.br-404 {
	padding-top: 64px;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="url"],
select,
textarea {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #c9c2b4;
	border-radius: var(--br-radius);
	background: var(--br-white);
	color: var(--br-ink);
	font: inherit;
	font-size: 16px; /* stops iOS zooming on focus */
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--br-navy);
	outline: 1px solid var(--br-navy);
	outline-offset: 0;
}

button,
input[type="submit"] {
	font: inherit;
}

.search-submit {
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--br-radius);
	background: var(--br-navy);
	color: var(--br-white);
	cursor: pointer;
}

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

.br-footer {
	background: var(--br-navy);
	color: var(--br-on-navy);
	font-size: var(--br-text-sm);
}

.br-footer a {
	color: var(--br-on-navy);
}

.br-footer a:hover {
	color: var(--br-brass-light);
}

.br-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 32px;
	padding-block: 56px;
}

.br-footer__col p {
	margin: 0 0 8px;
}

.br-footer__name {
	font-family: var(--br-serif);
	font-size: var(--br-h3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--br-stone);
}

.br-footer__heading {
	font-weight: 500;
	color: var(--br-stone);
}

.br-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.br-footer__menu a {
	display: inline-block;
	padding: 5px 0;
	text-decoration: none;
}

.br-footer .br-phone {
	margin-top: 8px;
	font-size: var(--br-text-sm);
}

.br-footer__email {
	text-decoration: none;
}

.br-social {
	display: flex;
	gap: 4px;
	margin-top: 12px !important;
}

.br-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -12px;
}

.br-social a + a {
	margin-left: 0;
}

.br-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-block: 20px;
	border-top: 1px solid rgb(255 255 255 / 0.12);
	font-size: var(--br-text-xs);
}

.br-footer__base p {
	margin: 0;
}

/* Legal details: their own full-width line under the copyright row. */
.br-footer__base .br-footer__company {
	flex-basis: 100%;
	opacity: 0.75;
}

/* ---------- Page sections (block patterns) ---------- */

.br-front .br-content > * {
	max-width: none;
	padding-inline: 0;
}

.br-section {
	padding-block: var(--br-section);
}

/* Two plain stone sections in a row share one gap, not two. */
.br-section:not(.br-steps):not(.br-faq) + .br-section:not(.br-steps):not(.br-faq) {
	padding-top: 0;
}

.br-section,
.br-band {
	padding-inline: var(--br-gutter) !important;
}

.br-section > *,
.br-band > * {
	max-width: var(--br-wide);
	margin-inline: auto !important;
}

.br-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.br-section__head > * {
	margin: 0;
}

.br-section h2 {
	margin: 0;
}

.br-eyebrow {
	margin: 0;
	font-size: var(--br-text-xs);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--br-brass) !important;
}

.br-lede {
	font-size: var(--wp--preset--font-size--large);
	max-width: 34em;
}

.br-note {
	font-size: var(--br-text-xs);
}

/* Hero */
.br-hero .wp-block-columns {
	align-items: center;
	gap: clamp(32px, 5vw, 56px);
	margin: 0 auto;
}

.br-hero h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
}

.br-hero .wp-block-column > * + * {
	margin-top: 24px;
}

.br-hero .wp-block-column > .br-cta {
	margin-top: 32px;
}

/* Buttons with the rating centred beneath them. */
.br-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: fit-content;
	max-width: 100%;
}

.br-cta > * {
	margin: 0 !important;
}

.br-rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: var(--br-text-sm);
	color: var(--br-ink) !important;
	text-align: center;
}

.br-rating__stars {
	font-size: 24px;
	letter-spacing: 0.12em;
	line-height: 1;
	color: var(--br-brass);
}

.br-hero .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Hero with a wide photo that fades in behind the text. On phones the photo
   sits on top and fades down into the heading. From 1024px it sits in the
   bottom right at its own shape, so the unit is never cropped or under the
   text, and fades out to the left (and at the top) into the background. */
.br-hero--photo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.br-hero--photo .wp-block-columns {
	flex-direction: column-reverse;
	gap: 0;
}

.br-hero--photo .wp-block-image {
	margin: calc(-1 * var(--br-section)) calc(-1 * var(--br-gutter)) 0;
}

.br-hero--photo .wp-block-image img {
	aspect-ratio: 16 / 10;
	object-position: 72% 50%;
	border-radius: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
	mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.br-hero--photo .wp-block-column:first-child {
	position: relative;
	margin-top: -24px;
}

@media (min-width: 1024px) {
	.br-hero--photo .wp-block-columns {
		flex-direction: row;
		min-height: clamp(460px, 40vw, 640px);
	}

	.br-hero--photo .wp-block-column:first-child {
		flex: 0 1 46%;
		max-width: 36rem;
		margin-top: 0;
	}

	.br-hero--photo .wp-block-column:last-child {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		width: 74%;
	}

	.br-hero--photo .wp-block-image {
		display: flex;
		align-items: flex-end;
		height: 100%;
		margin: 0;
	}

	.br-hero--photo .wp-block-image img {
		aspect-ratio: 1672 / 941;
		max-height: 100%;
		object-position: 100% 100%;
		-webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5) 14%, #000 30%), linear-gradient(to bottom, transparent, #000 16%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5) 14%, #000 30%), linear-gradient(to bottom, transparent, #000 16%);
		mask-composite: intersect;
	}
}

/* Grid sections: block gap margins would misalign the first item. */
.br-trust > *,
.br-styles > *,
.br-reviews > *,
.br-steps__list > * {
	margin: 0 !important;
}

/* Trust strip */
.br-band {
	background: var(--br-white);
	border-block: 1px solid var(--br-line);
}

.br-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 24px;
	padding-block: 28px;
}

.br-trust p {
	margin: 0;
}

.br-trust p:first-child {
	font-weight: 500;
	color: var(--br-ink);
}

.br-trust p + p {
	font-size: var(--br-text-sm);
}

/* Style cards and the cloakroom feature */
.br-styles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 24px;
}

.br-styles > .wp-block-group {
	position: relative;
}

.br-styles .wp-block-image {
	margin: 0 0 12px;
}

.br-styles .wp-block-image img,
.br-feature .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #d9d3c7;
}

.br-styles h3 {
	margin: 0;
	font-size: var(--br-h3);
}

.br-styles h3 a {
	text-decoration: none;
}

/* Whole card is clickable via the heading link. */
.br-styles h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.br-styles p {
	margin: 4px 0 0;
	font-size: var(--br-text-sm);
}

/* Phones: two style cards per row, like the product grids. */
@media (max-width: 600px) {
	.br-styles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 14px;
	}

	.br-styles h3 {
		font-size: 17px;
	}

	.br-styles p {
		font-size: var(--br-text-xs);
	}
}

.br-style-links {
	margin: 28px 0 0;
	text-align: center;
}

.br-feature {
	margin-top: 24px;
	overflow: hidden;
	background: var(--br-white);
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius-img);
}

.br-feature .wp-block-image img {
	border-radius: 0;
}

.br-feature.wp-block-columns {
	gap: 0;
	align-items: center;
}

.br-feature .wp-block-image {
	margin: 0;
}

/* Square, so the whole unit shows (the photos are square). */
.br-feature .wp-block-image img {
	aspect-ratio: 1 / 1;
}

@media (min-width: 782px) {
	.br-feature > .wp-block-column:first-child {
		flex: 0 0 40%;
	}
}

.br-feature .wp-block-column:last-child {
	align-self: center;
	padding: clamp(24px, 4vw, 40px);
}

.br-feature .wp-block-column:last-child > * {
	margin: 0;
}

.br-feature .wp-block-column:last-child > * + * {
	margin-top: 12px;
}

.br-feature h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Steps on navy */
.br-steps {
	background: var(--br-navy);
	color: var(--br-stone);
}

.br-steps h2 {
	color: var(--br-stone);
	margin-bottom: 28px;
}

.br-steps__list {
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 32px;
	margin: 0 auto;
	list-style: none;
	counter-reset: br-step;
}

.br-steps__list li {
	counter-increment: br-step;
	color: var(--br-on-navy) !important;
	font-size: var(--br-text-sm);
}

.br-steps__list li::before {
	content: counter(br-step);
	display: block;
	margin-bottom: 8px;
	font-family: var(--br-serif);
	font-size: 32px;
	line-height: 1;
	color: var(--br-brass-light);
}

.br-steps__list strong {
	display: block;
	margin-bottom: 4px;
	color: var(--br-stone);
	font-size: var(--wp--preset--font-size--medium);
}

/* Reviews */
.br-reviews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

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

.br-reviews .wp-block-quote {
	margin: 0;
	padding: 28px;
	border: 0;
	border-radius: var(--br-radius-img);
	background: var(--br-white);
}

.br-reviews .wp-block-quote::before {
	content: "★★★★★";
	display: block;
	margin-bottom: 16px;
	letter-spacing: 0.1em;
	color: var(--br-brass);
}

.br-reviews .wp-block-quote p {
	margin: 0;
	font-family: var(--br-serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--br-ink);
}

.br-reviews .wp-block-quote {
	display: flex;
	flex-direction: column;
}

.br-reviews .wp-block-quote cite {
	display: block;
	margin-top: auto;
	padding-top: 16px;
	font-size: var(--br-text-sm);
	font-style: normal;
	color: var(--br-muted);
}

.br-reviews__more {
	margin: 24px 0 0;
	text-align: center;
}

/* Phones: three reviews are enough before the link to the rest. */
@media (max-width: 600px) {
	.br-reviews {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.br-reviews > :nth-child(n + 4) {
		display: none;
	}

	.br-reviews .wp-block-quote {
		padding: 22px;
	}

	.br-reviews .wp-block-quote p {
		font-size: 17px;
	}
}

/* Workshop */
.br-split.wp-block-columns {
	align-items: center;
	gap: clamp(32px, 5vw, 56px);
}

.br-split .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.br-split .wp-block-column > * + * {
	margin-top: 20px;
}

/* FAQ */
.br-faq {
	background: var(--br-white);
	border-top: 1px solid var(--br-line);
}

.br-faq > * {
	max-width: 880px;
}

.br-faq h2 {
	margin-bottom: 16px;
}

.br-faq .wp-block-details {
	margin: 0 auto;
	padding-block: 18px;
	border-bottom: 1px solid var(--br-line);
}

.br-faq summary {
	font-weight: 500;
	cursor: pointer;
}

.br-faq .wp-block-details p {
	margin: 12px 0 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Enquiry forms ---------- */

/* After sending, the page comes back to the form (#br-form-contact and so
   on). Leave room for the sticky header, so the thank-you or error message
   isn't hidden behind it. */
.br-form {
	scroll-margin-top: 110px;
}

.admin-bar .br-form {
	scroll-margin-top: 142px;
}

.br-form form {
	display: grid;
	gap: 4px;
	max-width: 640px;
}

.br-form__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
}

.br-form__row label {
	font-weight: 500;
	color: var(--br-ink);
}

.br-form__req {
	color: var(--br-brass);
}

.br-form textarea {
	min-height: 144px;
	resize: vertical;
}

.br-form__small {
	margin: 0;
	font-size: var(--br-text-xs);
}

.br-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.br-form__notice {
	margin: 0 0 20px;
	padding: 16px;
	border-left: 3px solid var(--br-brass);
	background: var(--br-white);
	color: var(--br-ink) !important;
}

.br-form__notice--error {
	border-left-color: #a12b2b;
}

@media (max-width: 479.98px) {
	.br-brand__name {
		font-size: 18px;
		letter-spacing: 0.08em;
	}

	.br-brand__tagline {
		font-size: 9px;
		letter-spacing: 0.16em;
	}

	.br-header__actions {
		gap: 0;
	}
}

/* Order timeline: [br_order_timeline] on pages, and in the product summary */
.br-timeline {
	max-width: var(--br-narrow);
	margin-inline: auto;
}

.br-timeline__title {
	margin-bottom: 20px;
}

.br-timeline__list,
.br-timeline__list ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.br-timeline__list > li {
	position: relative;
	padding: 0 0 22px 32px;
	color: var(--br-muted);
	font-size: var(--br-text-sm);
}

.br-timeline__list > li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--br-brass);
}

.br-timeline__list > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 20px;
	bottom: 2px;
	width: 1px;
	background: var(--br-line);
}

.br-timeline__list strong {
	display: block;
	color: var(--br-navy);
	font-size: 17px;
	font-weight: 400;
}

.br-timeline__list em {
	font-style: normal;
	font-size: var(--br-text-sm);
	color: var(--br-brass);
	margin-left: 6px;
}

.br-timeline__group ol {
	display: grid;
	gap: 8px;
	margin-top: 10px;
	padding: 14px 16px;
	background: var(--br-stone);
	border-radius: var(--br-radius);
	counter-reset: br-tl;
}

.br-timeline__group ol li {
	counter-increment: br-tl;
	display: grid;
	grid-template-columns: 22px 1fr;
	column-gap: 6px;
}

.br-timeline__group ol li::before {
	content: counter(br-tl);
	grid-row: span 2;
	color: var(--br-brass);
	font-size: var(--br-text-sm);
}

.br-timeline__group ol strong {
	font-size: var(--br-text-sm);
}

.br-timeline__group ol li.br-timeline__week {
	display: block;
	counter-increment: none;
	color: var(--br-brass);
	font-size: var(--br-text-xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.br-timeline__group ol li.br-timeline__week:not(:first-child) {
	margin-top: 6px;
}

.br-timeline__group ol li.br-timeline__week::before {
	content: none;
}

.br-delivery {
	margin: 20px 0 0;
	border-top: 1px solid var(--br-line);
	border-bottom: 1px solid var(--br-line);
}

.br-delivery summary {
	cursor: pointer;
	padding: 14px 0;
	color: var(--br-navy);
	font-size: var(--br-text-sm);
}

.br-delivery summary span {
	display: block;
	color: var(--br-brass);
	font-size: var(--br-text-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.br-delivery[open] summary span {
	text-decoration: none;
}

.br-delivery .br-timeline {
	padding-bottom: 6px;
}

.br-delivery__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 12px 0 0;
	font-size: var(--br-text-xs);
}

.br-delivery__links a {
	color: var(--br-brass);
	text-underline-offset: 3px;
}

/* Customer bathrooms: [br_featured_bathroom], [br_customer_bathrooms], [br_bathroom_form] */
.br-featured {
	display: grid;
	gap: 24px 40px;
	align-items: start;
	max-width: var(--br-wide);
	margin: 0 auto var(--br-section);
}

@media (min-width: 900px) {
	.br-featured {
		grid-template-columns: 3fr 2fr;
	}
}

.br-featured img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--br-radius-img);
}

.br-featured__main {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.br-featured__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.br-featured__thumbs img {
	aspect-ratio: 1;
	object-fit: cover;
}

.br-featured__badge {
	margin: 0 0 8px;
	color: var(--br-brass);
	font-size: var(--br-text-xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.br-featured__body h2 {
	margin: 0 0 16px;
}

.br-featured__quote {
	margin: 0 0 20px;
	padding-left: 16px;
	border-left: 2px solid var(--br-brass-light);
	color: var(--br-ink);
	font-style: italic;
}

.br-featured__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 20px;
	font-size: var(--br-text-sm);
}

.br-featured__specs dt {
	color: var(--br-muted);
}

.br-featured__specs dd {
	margin: 0;
	color: var(--br-navy);
}

.br-featured__ig {
	color: var(--br-brass);
	text-underline-offset: 3px;
}

.br-bathrooms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	max-width: var(--br-wide);
	margin: 0 auto var(--br-section);
}

.br-bathrooms__item {
	margin: 0;
}

.br-bathrooms__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--br-radius-img);
}

.br-bathrooms__item figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	align-items: baseline;
	padding-top: 10px;
	color: var(--br-muted);
	font-size: var(--br-text-sm);
}

.br-bathrooms__item figcaption b {
	flex-basis: 100%;
	color: var(--br-navy);
	font-weight: 400;
}

.br-bathrooms__tag {
	flex-basis: 100%;
	color: var(--br-brass);
	font-size: var(--br-text-xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.br-form__agree label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--br-text-sm);
}

.br-form__agree input {
	margin-top: 5px;
}

.br-form__notice--ok {
	border-left-color: var(--br-brass);
}

.br-form__aside {
	margin-top: 12px;
	color: var(--br-muted);
}

/* Samples page: [br_samples] (inc/samples.php) */
.brs {
	--n: var(--br-navy,#1f2a40);
	--b: var(--br-brass,#7a5714);
	--s: var(--br-stone,#f7f4ee);
	--l: var(--br-line,#e4ded2);
	--m: var(--br-muted,#4a5163);
	color: var(--n);
	font-size: 17px;
	line-height: 1.6;
	max-width: 860px;
	margin-inline: auto;
}

.brs * {
	box-sizing: border-box;
}

.brs h1 {
	font-size: var(--wp--preset--font-size--xx-large,clamp(2.375rem,5vw,3.5rem));
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 14px;
	text-wrap: balance;
}

.brs h2 {
	font-size: var(--wp--preset--font-size--x-large,clamp(1.75rem,3vw,2.25rem));
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 8px;
	text-wrap: balance;
}

.brs p {
	color: var(--m);
	margin: 0 0 14px;
}

.brs strong {
	color: var(--n);
	font-weight: 600;
}

.brs a {
	color: var(--n);
	text-underline-offset: 3px;
}

.brs-eyebrow {
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--b)!important;
	margin: 0 0 10px!important;
}

.brs-lede {
	font-size: 20px;
	color: var(--n)!important;
}

.brs-sec {
	padding-top: 40px;
}

.brs-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
}

.brs-count {
	font-size: 15px;
	color: var(--b);
	font-variant-numeric: tabular-nums;
}

.brs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
	gap: 12px;
	margin: 16px 0 8px;
	padding: 0;
	border: 0;
}

.brs-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr);
	grid-template-rows: auto 1fr;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--l);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.brs-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.brs-chip {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: 6px;
	background: #ece8e0;
	box-shadow: inset 0 0 0 1px rgba(31,42,64,.12);
}

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

.brs-name {
	align-self: center;
	font-size: 15px;
	line-height: 1.3;
	padding-right: 28px;
	min-height: 20px;
}

.brs-name small {
	display: block;
	font-size: 13px;
	color: var(--m);
}

.brs-tick {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--n);
	border-radius: 4px;
	background: #fff;
}

.brs-card:has(input:checked) {
	border-color: var(--n);
	box-shadow: 0 0 0 1px var(--n);
}

.brs-card:has(input:checked) .brs-tick {
	background: var(--n);
}

.brs-card:has(input:checked) .brs-tick::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.brs-card:has(input:focus-visible) {
	outline: 2px solid var(--b);
	outline-offset: 2px;
}

.brs-card:has(input:disabled) {
	opacity: .45;
	cursor: not-allowed;
}

.brs-note {
	background: var(--s);
	border-left: 3px solid var(--b);
	padding: 14px 18px;
	margin: 12px 0;
	border-radius: 2px;
	font-size: 15px;
}

.brs-note p {
	margin: 0;
	font-size: 15px;
}

.brs-form {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 14px 16px;
	margin-top: 16px;
}

.brs-form label {
	display: grid;
	gap: 4px;
	font-size: 15px;
	color: var(--n);
}

.brs-form .full {
	grid-column: 1/-1;
}

.brs-form input[type=text],.brs-form input[type=email],.brs-form textarea {
	font: inherit;
	font-size: 16px;
	padding: 10px 12px;
	border: 1px solid #c9c3b6;
	border-radius: 4px;
	background: #fff;
	color: var(--n);
	width: 100%;
}

.brs-form textarea {
	min-height: 84px;
}

.brs-agree {
	display: flex!important;
	grid-template-columns: none!important;
	gap: 10px!important;
	align-items: flex-start;
}

.brs-agree input {
	margin-top: 5px;
}

.brs-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: 4px;
	background: var(--n);
	color: #fff;
	border: 0;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}

.brs-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.brs-summary {
	font-size: 15px;
	color: var(--m);
	margin: 12px 0;
}

.brs-msg {
	font-size: 15px;
	color: var(--b);
	min-height: 1.5em;
	margin: 6px 0 0;
}

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

/* Tables in page content, such as the Privacy Policy. WooCommerce tables keep their own styles. */
.br-content table:not(.shop_table):not(.variations) {
	width: 100%;
	margin-block: 24px;
	border-collapse: collapse;
	font-size: var(--br-text-sm);
}

.br-content table:not(.shop_table):not(.variations) :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--br-line);
	text-align: left;
	vertical-align: top;
}

.br-content table:not(.shop_table):not(.variations) th {
	border-bottom-width: 2px;
	color: var(--br-navy);
	font-weight: 600;
}

@media (max-width: 700px) {
	.br-content table:not(.shop_table):not(.variations) {
		display: block;
		overflow-x: auto;
	}
}

/* "Talk to us" button: WhatsApp and call, bottom right. On phones it would
   cover the Add to basket and checkout buttons, so it's left off product,
   basket and checkout pages there. */
.br-contact-button {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
}

.br-contact-button summary {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-left: auto;
	border-radius: 50%;
	background: var(--br-navy);
	color: #fff;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
	cursor: pointer;
	list-style: none;
}

.br-contact-button summary::-webkit-details-marker {
	display: none;
}

.br-contact-button summary:focus-visible {
	outline: 2px solid var(--br-brass);
	outline-offset: 3px;
}

.br-contact-button summary .br-icon,
.br-contact-button[open] .br-contact-button__open {
	display: none;
}

.br-contact-button[open] summary .br-icon {
	display: block;
}

.br-contact-button__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.75rem);
	width: max-content;
	min-width: 14rem;
	padding: 1rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
}

.br-contact-button__title {
	margin: 0 0 0.5rem;
	font-weight: 500;
	color: var(--br-navy);
}

.br-contact-button__link {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.55rem 0;
	color: var(--br-navy);
	text-decoration: none;
}

.br-contact-button__link:hover span {
	text-decoration: underline;
}

.br-contact-button__link + .br-contact-button__link {
	border-top: 1px solid rgb(31 42 64 / 0.1);
}

.br-contact-button__hours {
	margin: 0.5rem 0 0;
	font-size: var(--br-text-xs);
	color: rgb(31 42 64 / 0.7);
}

@media (max-width: 768px) {
	.single-product .br-contact-button,
	.woocommerce-cart .br-contact-button,
	.woocommerce-checkout .br-contact-button {
		display: none;
	}
}

@media print {
	.br-contact-button {
		display: none;
	}
}

/* Checkout: logo, "Secure checkout" and the phone number only. */
.br-header--checkout .br-header__inner {
	display: flex;
	justify-content: space-between;
}

.br-header__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 16px;
	color: var(--br-muted);
	font-size: var(--br-text-sm);
}

@media (max-width: 1023.98px) {
	.br-header--checkout .br-header__phone {
		display: inline-flex;
	}
}

/* Small phones: no room beside the logo, and the page already says Checkout. */
@media (max-width: 479.98px) {
	.br-header__secure {
		display: none;
	}
}

/* ==========================================================================
   Usability fixes (2 Nov 2026 study)
   ========================================================================== */

/* Drop-down questions ("Before you choose", "Read more", "Made to order"):
   a brass arrow on the right instead of the browser's black triangle. */
.br-main details > summary {
	position: relative;
	padding-right: 32px;
	list-style: none;
	cursor: pointer;
}

.br-main details > summary::-webkit-details-marker {
	display: none;
}

.br-main details > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--br-brass);
	border-bottom: 1.5px solid var(--br-brass);
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.2s ease;
}

.br-main details[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

/* Drop-down menus (Sort by, checkout county): the same box as the other
   fields, with a brass arrow. */
select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a5714' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

select[multiple] {
	padding-right: 14px;
	background-image: none;
}

/* Cookie settings: moved from a grey box under the footer into the footer's
   bottom row, next to the Privacy Policy (nav.js). */
.br-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
}

.br-footer__base .br-cookie-preferences-button {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: inherit !important;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.br-footer__base .br-cookie-preferences-button:hover {
	color: var(--br-white) !important;
}

/* Phones: room at the foot of the page so the chat button doesn't cover
   the last lines of the footer. */
@media (max-width: 768px) {
	.br-footer__base {
		padding-bottom: 88px;
	}
}