/*
 * Belwood & Roe: WooCommerce styles.
 * Loaded after WooCommerce's own CSS, which is kept for forms, notices,
 * the cart table and checkout. This file restyles the parts customers see most.
 */

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--br-radius);
	background: var(--br-navy);
	color: var(--br-white);
	font-family: var(--br-serif);
	font-size: var(--br-text-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page .button:hover {
	background: #2c3a57;
	color: var(--br-white);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt.disabled {
	background: #8b91a0;
	color: var(--br-white);
	opacity: 1;
}

/* ---------- Notices ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--br-brass);
	background: var(--br-white);
	color: var(--br-ink);
}

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

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--br-brass);
}

/* ---------- Shop and category pages ---------- */

.br-shop .woocommerce-products-header,
.br-shop > .page-title {
	padding-top: clamp(24px, 4vw, 48px);
}

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

.br-shop .term-description {
	max-width: 70ch;
	color: var(--br-muted);
}

.br-shop .term-description p {
	margin: 12px 0 0;
}

.br-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 8px;
}

.br-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid #c9c2b4;
	border-radius: var(--br-radius-btn);
	background: var(--br-white);
	font-size: var(--br-text-sm);
	text-decoration: none;
}

.br-chip:hover {
	border-color: var(--br-navy);
	color: var(--br-ink);
}

.br-chip[aria-current="page"] {
	border-color: var(--br-navy);
	background: var(--br-navy);
	color: var(--br-white);
}

.br-shop .woocommerce-result-count,
.br-shop .woocommerce-ordering {
	margin: 24px 0 8px;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.br-shop .woocommerce-ordering select {
	min-height: 44px;
	font-size: var(--br-text-sm);
}

/* Product grid. Woo's float layout is replaced with CSS grid. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 40px 24px;
	margin: 24px 0 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: var(--br-ink);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0 0 8px;
	/* Square box to match the photos, and never crop: a 4:5 box with
	   cover cut the sides off every unit. */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--br-line);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	padding: 0;
	margin: 0;
	font-family: var(--br-serif);
	font-size: var(--br-h3);
	font-weight: 400;
	line-height: 1.25;
}

.woocommerce ul.products li.product .br-title-size,
.woocommerce div.product .product_title .br-title-size {
	display: block;
	margin-top: 4px;
	color: var(--br-muted);
	font-size: var(--br-text-sm);
	line-height: 1.4;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--br-ink);
	font-size: var(--br-text-sm);
	font-weight: 500;
}

.woocommerce ul.products li.product .price del {
	color: var(--br-muted);
	font-weight: 400;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0;
	font-size: var(--br-text-xs);
	color: var(--br-brass);
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: 12px;
	min-height: 44px;
	padding: 10px 18px;
	font-size: var(--br-text-sm);
}

/* Phones: two products per row, so a category can be scanned without a long
   scroll past one big photo at a time. */
@media (max-width: 600px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
	}

	.woocommerce ul.products li.product a img {
		margin-bottom: 4px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-category__title {
		font-size: 17px;
	}

	.woocommerce ul.products li.product .br-title-size {
		font-size: var(--br-text-xs);
	}

	.woocommerce ul.products li.product .price {
		font-size: var(--br-text-xs);
	}

	.woocommerce ul.products li.product .button {
		width: 100%;
		padding: 10px 12px;
		text-align: center;
	}
}

.woocommerce span.onsale {
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	border-radius: var(--br-radius);
	background: var(--br-brass);
	font-size: var(--br-text-xs);
	font-weight: 500;
	line-height: 1.4;
}

.woocommerce ul.products li.product .onsale {
	top: 12px;
	right: 12px;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 48px;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	padding: 12px 14px;
	border: 1px solid var(--br-line);
	background: var(--br-white);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--br-navy);
	border-color: var(--br-navy);
	color: var(--br-white);
}

/* ---------- Single product ---------- */

.single-product .br-shop {
	padding-top: 24px;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	column-gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.woocommerce div.product > * {
	grid-column: 1 / -1;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-tabs {
	float: none;
	width: auto;
	margin-bottom: 0;
}

.woocommerce div.product div.images {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce div.product div.summary {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1;
	grid-row: 2;
	margin-top: 48px;
}

.woocommerce div.product > .onsale {
	position: absolute;
}

@media (max-width: 899.98px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce div.product .woocommerce-tabs {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce div.product div.summary {
		margin-top: 32px;
	}
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce div.product .product_title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
	margin: 0;
	color: var(--br-brass);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--br-ink);
	font-size: var(--br-h3);
	font-weight: 500;
}

.br-price-from {
	font-size: 0.75em;
	font-weight: 400;
	color: var(--br-muted);
}

.br-price-tax {
	font-size: var(--br-text-xs);
	font-weight: 400;
	color: var(--br-muted);
	white-space: nowrap;
}

.br-price-note {
	margin: 4px 0 16px;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--br-muted);
}

.woocommerce div.product form.cart {
	margin-top: 24px;
}

.woocommerce .quantity .qty {
	width: 4.5em;
	min-height: 48px;
}

.woocommerce div.product .br-product-code {
	margin: 24px 0 0;
	font-size: var(--br-text-xs);
	color: var(--br-muted);
}

.br-enquiry {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var(--br-line);
	background: var(--br-white);
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.br-enquiry a {
	display: inline-block;
	margin-top: 4px;
	font-weight: 500;
	color: var(--br-ink);
}

/* Tabs become simple stacked sections: easier to read and to scan on mobile. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--br-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0;
	color: var(--br-muted);
	font-weight: 500;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	box-shadow: inset 0 -2px 0 var(--br-navy);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--br-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	color: var(--br-muted);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-size: var(--br-h3);
	color: var(--br-ink);
}

.woocommerce table.shop_attributes {
	border-top: 1px solid var(--br-line);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--br-line);
	font-style: normal;
	background: transparent !important;
}

.woocommerce table.shop_attributes td p {
	padding: 0;
}

.woocommerce .related,
.woocommerce .upsells {
	margin-top: var(--br-section);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border-color: var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-white);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--br-brass);
}

/* ---------- Configurator (WooCommerce Composite Products) ----------
 * Each component is shown as a numbered step with clear option buttons.
 * Selectors cover CP's single-page layout; check them against the live markup
 * whenever CP is updated.
 */

.woocommerce div.product .composite_form {
	margin-top: 24px;
}

.composite_form .composite_component {
	padding: 20px 0;
	border-top: 1px solid var(--br-line);
}

.composite_form .composite_component .component_title,
.composite_form .composite_component .step_title_wrapper {
	margin: 0 0 12px;
	font-family: var(--br-serif);
	font-size: var(--br-h3);
	font-weight: 500;
	color: var(--br-ink);
}

.composite_form .component_description {
	margin-bottom: 12px;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.composite_form .component_option_thumbnails_container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.composite_form .component_option_thumbnails_container::before,
.composite_form .component_option_thumbnails_container::after {
	display: none;
}

/* CP floats these into fixed-width columns (and its stylesheet loads after
   this one); the grid above replaces that. */
.composite_form .composite_component .component_option_thumbnails ul.component_option_thumbnails_container li.component_option_thumbnail_container {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.composite_form .component_option_thumbnail_container.hidden {
	display: none;
}

/* When a saved design is put back, CP moves the chosen option's details
   (for example the own paint colour box) into the tile list, after the row
   it would have in its own 3-column layout. In this grid that made it one
   narrow tile wide. Give it a whole row, and let the tiles after it fill
   the gaps above, so it sits under the row with the chosen tile. */
.composite_form .component_option_thumbnails_container {
	grid-auto-flow: row dense;
}

.composite_form .composite_component .component_option_thumbnails ul.component_option_thumbnails_container li.component_option_content_container {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.composite_form .component_option_thumbnail {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	border: 1px solid #c9c2b4;
	border-radius: var(--br-radius);
	background: var(--br-white);
	padding: 10px;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.composite_form .component_option_thumbnail:hover {
	border-color: var(--br-navy);
}

.composite_form .component_option_thumbnail.selected {
	border-color: var(--br-navy);
	box-shadow: 0 0 0 1px var(--br-navy);
}

.composite_form .component_option_thumbnail .thumbnail_title {
	margin: 8px 0 0;
	font-family: var(--br-serif);
	font-size: var(--br-text-sm);
	font-weight: 500;
}

.composite_form .component_option_thumbnail .thumbnail_price {
	font-size: var(--br-text-xs);
	color: var(--br-muted);
}

.composite_form .component_option_thumbnail .thumbnail_image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 2px;
}

.composite_form .component_option_thumbnail .thumbnail_image {
	padding: 0;
}

.composite_form .component_option_thumbnail .thumbnail_description {
	flex: 1;
	padding: 0;
}

.composite_form .component_option_thumbnail .thumbnail_buttons {
	margin-top: 8px;
	padding: 0;
}

.composite_form .component_option_thumbnail .thumbnail_buttons .button {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	font-size: var(--br-text-sm);
	border: 1px solid var(--br-navy);
	background: transparent;
	color: var(--br-navy);
}

.composite_form .component_option_thumbnail.selected .thumbnail_buttons .button,
.composite_form .component_option_thumbnail.selected .thumbnail_buttons .button.disabled,
.composite_form .component_option_thumbnail.selected .thumbnail_buttons .button:disabled,
.composite_form .component_option_thumbnail .thumbnail_buttons .button:hover {
	background: var(--br-navy);
	color: var(--br-white);
}

.composite_form .component_option_radio_buttons_fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.composite_form .component_option_radio_buttons .select_label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.composite_form .component_option_radio_buttons_container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}

.composite_form .component_option_radio_buttons_container::before,
.composite_form .component_option_radio_buttons_container::after {
	display: none;
}

.composite_form .component_option_radio_button_container {
	margin: 0;
	padding: 0;
}

.composite_form .component_option_radio_button_container.hidden {
	display: none;
}

/* CP lays a transparent label over each option as the click target, so the
   whole option card is styled here and the label is left alone. */
.composite_form .component_option_radio_buttons .component_option_radio_button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #c9c2b4;
	border-radius: var(--br-radius);
	background: var(--br-white);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.composite_form .component_option_radio_buttons .component_option_radio_button:hover {
	border-color: var(--br-navy);
}

.composite_form .component_option_radio_buttons .component_option_radio_button.selected {
	border-color: var(--br-navy);
	box-shadow: 0 0 0 1px var(--br-navy);
}

.composite_form .component_option_radio_buttons .radio_button_input {
	flex-shrink: 0;
}

.composite_form .component_option_radio_buttons .radio_button_title {
	display: block;
	font-weight: 500;
}

.composite_form .component_option_radio_buttons .radio_button_price {
	display: block;
	font-size: var(--br-text-xs);
	color: var(--br-muted);
}

/* "Your selections" overview: one even card per step. */
.composite_form .composite_summary ul.summary_elements {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

.composite_form .composite_summary ul.summary_elements::before,
.composite_form .composite_summary ul.summary_elements::after {
	display: none;
}

.composite_form .composite_summary ul.summary_elements li.summary_element {
	display: flex;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* CP sets an inline height on the wrapper, so stretch with flex instead of
   height: 100%. Every card then fills its row and the buttons line up. */
.composite_form .composite_summary .summary_element_wrapper_outer {
	display: flex;
	flex: 1;
	min-width: 0;
	padding: 0;
}

.composite_form .composite_summary .summary_element_wrapper {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.composite_form .summary_element_wrapper_inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius);
	text-align: center;
}

.composite_form .summary_element_wrapper.configured .summary_element_wrapper_inner {
	border-color: var(--br-navy);
}

.composite_form .summary_element_image {
	aspect-ratio: 4 / 3;
	margin: 8px 0;
}

.composite_form .summary_element_image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.composite_form .summary_element_title .title {
	margin: 0;
	font-family: var(--br-serif);
	font-size: var(--br-text-sm);
	font-weight: 500;
}

.composite_form .summary_element_selection {
	font-size: var(--br-text-sm);
}

.composite_form .composite_summary .summary_element_wrapper_inner > .summary_element_button {
	margin-top: auto;
	padding-top: 10px;
}

.composite_form .summary_element_button .button {
	float: none;
	width: 100%;
}

.composite_form select.component_options_select {
	width: 100%;
}

.composite_form .composite_summary,
.composite_form .composite_wrap {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--br-line);
	background: var(--br-white);
}

/* Phones: two steps per row, so the overview isn't a long single column. */
@media (max-width: 599.98px) {
	.composite_form .composite_summary,
	.composite_form .composite_wrap {
		padding: 14px;
	}

	.composite_form .composite_summary ul.summary_elements {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.composite_form .summary_element_wrapper_inner {
		padding: 10px;
	}

	.composite_form .summary_element_image {
		width: 100%;
		max-width: 72px;
		aspect-ratio: 1;
		margin: 6px auto;
	}

	.composite_form .summary_element_button .button {
		min-height: 40px;
		padding-inline: 8px;
		font-size: var(--br-text-sm);
	}
}

/* Total box: the labelled price and "× quantity" centred on one line, then
   a full-width Add to basket. The button wrapper is flattened so the
   quantity can sit in the price row. */
.composite_form .composite_wrap {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
	align-items: end;
	gap: 20px 14px;
}

.composite_form .composite_wrap > * {
	grid-column: 1 / -1;
}

.composite_form .composite_wrap > .composite_price {
	grid-row: 1;
	grid-column: 2;
	text-align: center;
}

.woocommerce div.product .composite_form .composite_price .price {
	margin: 0;
	font-size: var(--br-h3);
	line-height: 40px; /* the height of the quantity box, so the two line up */
}

.composite_form .composite_price .price::before {
	content: "Configured price";
	display: block;
	margin-bottom: 2px;
	line-height: 1.4;
	font-size: var(--br-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--br-muted);
}

.composite_form .composite_price .price::after {
	content: " inc VAT";
	font-size: var(--br-text-sm);
	color: var(--br-muted);
}

.composite_form .composite_wrap > .composite_button {
	display: contents;
}

.composite_form .composite_button .quantity {
	grid-row: 1;
	grid-column: 3;
	display: flex;
	align-items: center;
	gap: 14px;
	float: none;
	margin: 0;
}

.composite_form .composite_button .quantity::before {
	content: "\00d7";
	font-size: 24px;
	line-height: 1;
	color: var(--br-muted);
}

.composite_form .composite_button .quantity .qty {
	width: 3.5em;
	height: 40px;
	min-height: 40px;
	text-align: center;
}

.composite_form .composite_button .single_add_to_cart_button {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	min-height: 52px;
	margin: 0;
}

/* ---------- Basket and checkout ---------- */

.woocommerce table.shop_table {
	border-color: var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-white);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--br-line);
}

/* A configured unit's parts, listed under its name (one row per unit). */
.woocommerce td.product-name dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 2px 12px;
	margin: 10px 0 0;
	font-size: var(--br-text-sm);
	line-height: 1.45;
}

.woocommerce td.product-name dl.variation dt {
	margin: 0;
	color: var(--br-muted);
	font-weight: 400;
}

.woocommerce td.product-name dl.variation dd {
	margin: 0;
	color: var(--br-ink);
}

.woocommerce td.product-name dl.variation dd p {
	margin: 0;
}

.woocommerce td.product-name .br-part-cost {
	margin-left: 4px;
	color: var(--br-muted);
	white-space: nowrap;
}

/* Narrow spaces (phones, the checkout summary): "Size: 1200mm +£50.00" runs
   on as one line per part instead of two columns. */
.woocommerce-checkout-review-order-table td.product-name dl.variation {
	display: block;
}

.woocommerce-checkout-review-order-table td.product-name dl.variation :is(dt, dd, dd p) {
	display: inline;
}

.woocommerce-checkout-review-order-table td.product-name dl.variation dt {
	margin-right: 4px;
}

.woocommerce-checkout-review-order-table td.product-name dl.variation dd::after {
	content: "";
	display: block;
	margin-bottom: 3px;
}

@media (max-width: 480px) {
	.woocommerce td.product-name dl.variation {
		display: block;
		clear: both;
		padding-top: 8px;
		text-align: left;
	}

	.woocommerce td.product-name dl.variation :is(dt, dd, dd p) {
		display: inline;
	}

	.woocommerce td.product-name dl.variation dt {
		margin-right: 4px;
	}

	.woocommerce td.product-name dl.variation dd::after {
		content: "";
		display: block;
		margin-bottom: 3px;
	}
}

/* Order summary: one flexible line per row, so part names and the delivery
   options get the room and prices sit on the right. */
.woocommerce table.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
	display: block;
}

.woocommerce-checkout-review-order-table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--br-line);
}

.woocommerce-checkout-review-order-table thead tr {
	border-top: 0;
}

.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td {
	display: block;
	border: 0;
}

.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table tfoot th {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td {
	flex: 0 1 auto;
	text-align: right;
}

.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	flex-basis: 65%;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--br-h3);
}

/* Basket totals sit just under the items, with a full-width checkout button. */
.woocommerce-cart .woocommerce-cart-form table.shop_table {
	margin-bottom: 16px;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin-top: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-bottom: 16px;
}

/* Edit link for configured units, under the unit's name. */
.woocommerce-cart-form .product-name .edit_in_cart_text {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-top: 4px;
	color: var(--br-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-cart-form .product-name .edit_in_cart_text small {
	font-size: var(--br-text-sm);
}

/* Unfinished steps, listed above Add to basket in place of Composite
   Products' plain-text message (it shows that with an inline style). */
.composite_form .br-has-finish-check > .composite_message {
	display: none !important;
}

.composite_form .br-finish-check--ask {
	outline: 2px solid var(--br-brass);
	outline-offset: 2px;
}

.composite_form .br-finish-check {
	padding: 14px 18px;
	border-left: 3px solid var(--br-brass);
	background: var(--br-stone);
	font-size: var(--br-text-sm);
}

.composite_form .br-finish-check p {
	margin: 0 0 8px;
	color: var(--br-ink);
}

.composite_form .br-finish-check ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.composite_form .br-finish-check button {
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--br-navy);
	border-radius: var(--br-radius-btn);
	background: var(--br-white);
	color: var(--br-ink);
	font: inherit;
	cursor: pointer;
}

.composite_form .br-finish-check button:hover {
	background: var(--br-navy);
	color: #fff;
}

/* One step at a time (steps.js): "Next: …" at the foot of each step, and
   room for the sticky header when a step scrolls into view. */
.composite_form .composite_component {
	scroll-margin-top: 110px;
}

.admin-bar .composite_form .composite_component {
	scroll-margin-top: 142px;
}

.composite_form .br-step-next {
	display: flex;
	justify-content: flex-end;
	margin: 24px 0 0;
}

.composite_form .br-step-next[hidden] {
	display: none;
}

.composite_form .br-step-next .button {
	min-height: 48px;
	padding: 0 28px;
}

/* The colour step already links to the colour pairings page and samples, so
   the extra colour guide box from Code Snippets #43 is left off product pages
   (the snippet's category page guidance stays). */
.single-product .br-colour-product-help {
	display: none !important;
}

/* Standard options show no price; extras read "+£x" (steps.js marks the
   zero prices). */
.composite_form .br-price-zero {
	display: none !important;
}

.composite_form .br-price-included > * {
	display: none !important;
}

.composite_form .br-price-included::after {
	content: "Included";
	color: rgb(31 42 64 / 0.7);
}

.composite_form .thumbnail_price > .amount::before,
.composite_form .summary_element_price .price > .amount::before,
.composite_form .radio_button_price > .amount:first-child::before,
.composite_form .radio_button_price > .relative-price-prefix:empty + .amount::before {
	content: "+";
}

.woocommerce-checkout #payment {
	border-radius: var(--br-radius);
	background: var(--br-white);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--br-stone);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--br-stone);
}

/* Checkout: the form on the left, the order summary and payment beside it. */
.woocommerce-checkout #order_review {
	padding: 20px 24px 24px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius-img);
	background: var(--br-white);
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
}

.woocommerce-checkout #payment {
	margin-top: 16px;
}

.woocommerce-checkout #payment #place_order {
	width: 100%;
	min-height: 56px;
	font-size: 17px;
}

@media (min-width: 900px) {
	.woocommerce form.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(32px, 4vw, 56px);
		align-items: start;
	}

	.woocommerce form.woocommerce-checkout > * {
		grid-column: 1;
	}

	.woocommerce form.woocommerce-checkout > #customer_details {
		grid-row: 2 / span 2;
	}

	.woocommerce form.woocommerce-checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		margin: 0 0 12px;
	}

	.woocommerce form.woocommerce-checkout > #order_review {
		grid-column: 2;
		grid-row: 2 / span 2;
	}

	/* Billing and delivery addresses stack in the narrower column. */
	.woocommerce-checkout #customer_details.col2-set .col-1,
	.woocommerce-checkout #customer_details.col2-set .col-2 {
		float: none;
		width: 100%;
	}
}

.woocommerce form .form-row label {
	font-size: var(--br-text-sm);
	font-weight: 500;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid var(--br-line);
	text-decoration: none;
}

/* ---------- Rounded photos ---------- */

.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.composite_form .component_option_thumbnail .thumbnail_image img,
.woocommerce-cart-form .product-thumbnail img {
	border-radius: var(--br-radius-img);
}

/* ---------- Order reassurance panel (Code Snippets #9) ---------- */
/* The snippet prints its own Mulish/Merriweather styles; bring it into line. */

.single-product .broe-order-confidence {
	border: 1px solid var(--br-line);
	border-left: 4px solid var(--br-brass);
	border-radius: var(--br-radius-img);
	background: var(--br-stone);
	color: var(--br-muted);
	font-family: var(--br-serif);
}

.single-product .broe-order-confidence h3 {
	color: var(--br-ink);
	font-family: var(--br-serif);
	font-size: var(--br-h3);
	font-weight: 500;
}

.single-product .broe-order-confidence__intro,
.single-product .broe-order-confidence__points {
	font-size: var(--br-text-sm);
}

.single-product .broe-order-confidence__points span::before {
	color: var(--br-brass);
}

@media (max-width: 600px) {
	.single-product .broe-order-confidence__points {
		grid-template-columns: 1fr;
	}
}

/* ---------- Basin layout (double units) ---------- */

.composite_form .br-qty-auto .component_wrap .quantity {
	display: none;
}

.br-basin-note {
	display: grid;
	gap: 6px;
	max-width: 520px;
	margin: 0 0 20px;
}

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

.br-basin-note label {
	color: var(--br-ink);
	font-size: var(--br-text-sm);
}

.br-basin-note textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-white);
	font: inherit;
}

/* Own paint colour: a small field just under the "My own colour" picture,
   folded to one line once answered. */
.br-own-colour {
	display: grid;
	gap: 5px;
	max-width: 300px;
	margin: 10px 0 0;
	font-size: var(--br-text-xs);
	text-align: left;
}

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

.br-own-colour > label:first-child {
	color: var(--br-ink);
	font-size: var(--br-text-sm);
}

.br-own-colour input[type="text"] {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-white);
	font: inherit;
	font-size: var(--br-text-sm);
}

.br-own-colour--later input[type="text"] {
	color: var(--br-muted);
	background: transparent;
}

.br-own-colour small {
	color: var(--br-muted);
	font-size: var(--br-text-xs);
}

.br-own-colour__later {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--br-ink);
	cursor: pointer;
}

.br-own-colour__later input {
	margin: 2px 0 0;
	accent-color: var(--br-navy);
}

.br-own-colour__done {
	display: none;
	margin: 0;
	color: var(--br-ink);
	font-size: var(--br-text-sm);
}

.br-own-colour__done strong {
	font-weight: 600;
}

.br-own-colour__change {
	padding: 0;
	border: 0;
	background: none;
	color: var(--br-ink);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.br-own-colour--done > :not(.br-own-colour__done) {
	display: none;
}

.br-own-colour--done .br-own-colour__done {
	display: block;
}

.br-own-colour--ask input[type="text"] {
	border-color: var(--br-brass);
	box-shadow: 0 0 0 1px var(--br-brass);
}

/* Under the chosen option in a step (when it has no picture). */
.component_summary > .br-own-colour {
	clear: both;
}

.component_summary > .br-handle-details,
.component_summary > .br-basin-note {
	clear: both;
	margin-top: 16px;
}

/* Own handles: details asked for at the top of the Handles step */
.br-handle-details {
	display: grid;
	gap: 10px;
	max-width: 520px;
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-stone);
}

.br-handle-details[hidden],
.br-handle-details [hidden] {
	display: none;
}

.br-handle-details legend {
	float: left;
	width: 100%;
	margin-bottom: 4px;
	padding: 0;
	color: var(--br-ink);
	font-size: var(--wp--preset--font-size--medium, 17px);
}

.br-handle-details--ask {
	border-color: var(--br-brass);
}

.br-handle-choice {
	display: flex;
	gap: 8px;
	align-items: baseline;
	color: var(--br-ink);
	font-size: var(--br-text-sm);
	cursor: pointer;
}

.br-handle-centres,
.br-handle-note {
	display: grid;
	gap: 4px;
	margin: 0 0 0 24px;
	font-size: var(--br-text-sm);
}

.br-handle-note {
	margin-left: 0;
}

.br-handle-centres input {
	max-width: 140px;
}

.br-handle-centres input,
.br-handle-note textarea {
	padding: 8px 10px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-radius);
	background: var(--br-white);
	font: inherit;
}

.br-handle-centres small {
	color: var(--br-muted);
	font-size: var(--br-text-xs);
}

/* ---------- Save or share a design ---------- */

.br-design-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px solid var(--br-brass);
	background: var(--br-white);
}

.br-design-resume p {
	margin: 0;
}

.br-design-resume__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.br-design-resume__discard {
	padding: 0;
	border: 0;
	background: none;
	color: var(--br-muted);
	text-decoration: underline;
	cursor: pointer;
}

/* While a saved design loads, steps flick past; keep hands off until done. */
.composite_form.br-restoring {
	opacity: 0.5;
	pointer-events: none;
}

.br-design {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--br-line);
	background: var(--br-white);
}

.br-design__title {
	margin: 0 0 8px;
	font-size: var(--br-h3);
}

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

.br-design__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.br-design__status:empty {
	display: none;
}

.br-design__status {
	margin: 12px 0 0;
	font-size: var(--br-text-sm);
	overflow-wrap: anywhere;
}

.br-design__form {
	max-width: 520px;
	margin-top: 16px;
}

.br-design__check label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400;
}

@media (max-width: 599.98px) {
	.br-design {
		padding: 14px;
	}

	.br-design__actions .wp-element-button {
		width: 100%;
	}
}

/* Checkout: Country hidden when the shop only sells to the UK. */
.woocommerce form .form-row.br-hidden-row {
	display: none;
}

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

/* Product grid: names can run to two or three lines, so the size line and
   price sit at the foot of each card and line up across the row. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	flex: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title .br-title-size {
	margin-top: auto;
	padding-top: 4px;
}

/* "From" in front of prices: the small text size, not 11px. */
.br-price-from {
	font-size: var(--br-text-xs);
}

/* Configurator: the plugin's "Available options:" line adds nothing (the
   step heading says what to choose); kept for screen readers only. */
.composite_form .select_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Boxed choices (sizes, tap position): every box in a row the same height,
   with the tick circle centred on the text. */
.composite_form .component_option_radio_button_container {
	display: flex;
}

.composite_form .component_option_radio_buttons .component_option_radio_button {
	flex: 1;
	min-height: 64px;
}

/* Option tiles: a long name splits into the name and a smaller finish line
   (steps.js). */
.composite_form .component_option_thumbnail .br-tile-detail {
	display: block;
	margin-top: 2px;
	color: var(--br-muted);
	font-size: var(--br-text-xs);
	font-weight: 400;
}

/* "See all your choices" stays on one line on phones. */
.composite_form .composite_navigation .page_button {
	white-space: nowrap;
}

/* Basket: photos big enough to tell the units apart. */
.woocommerce-cart table.cart td.product-thumbnail {
	width: 112px;
}

.woocommerce-cart table.cart td.product-thumbnail img {
	width: 96px;
	height: 96px;
	max-width: none;
	object-fit: cover;
}

/* "Edit this design" reads as a button, so customers see they can change a
   unit in the basket without starting again. */
.woocommerce-cart-form .product-name .edit_in_cart_text {
	min-height: 36px;
	margin-top: 8px;
	padding: 4px 14px;
	border: 1px solid var(--br-navy);
	border-radius: var(--br-radius-btn);
	color: var(--br-navy);
	text-decoration: none;
}

.woocommerce-cart-form .product-name .edit_in_cart_text:hover,
.woocommerce-cart-form .product-name .edit_in_cart_text:focus-visible {
	background: var(--br-navy);
	color: var(--br-white);
}

/* Delivery choices, in the basket totals and the checkout summary: a heading
   on its own line, then each choice left-aligned with its radio button. */
.woocommerce ul#shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
	text-align: left;
}

.woocommerce ul#shipping_method li input {
	flex-shrink: 0;
	margin: 0;
}

.woocommerce ul#shipping_method li label {
	margin: 0;
}

.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
	flex-wrap: wrap;
}

.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	flex-basis: 100%;
	text-align: left;
}

.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
	padding-bottom: 0;
}

/* Phones: each unit in the basket as a card (photo beside the name and
   choices, then quantity, total and Remove), not a stack of label rows. */
@media (max-width: 768px) {
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 14px;
		padding: 16px 14px;
		border-top: 1px solid var(--br-line);
	}

	.woocommerce-cart table.cart tr.cart_item:first-child {
		border-top: 0;
	}

	.woocommerce-cart table.cart tr.cart_item td {
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		text-align: left !important;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
		display: block !important;
		grid-column: 1;
		grid-row: 1 / span 4;
		width: auto;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
		width: 72px;
		height: 72px;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-thumbnail::before,
	.woocommerce-cart table.cart tr.cart_item td.product-name::before,
	.woocommerce-cart table.cart tr.cart_item td.product-remove::before {
		display: none;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-name {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-price {
		display: none !important;
	}

	.woocommerce-cart table.cart tr.cart_item :is(td.product-quantity, td.product-subtotal) {
		display: flex !important;
		grid-column: 2;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 12px;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-quantity {
		grid-row: 2;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-subtotal {
		grid-row: 3;
		font-weight: 500;
	}

	.woocommerce-cart table.cart tr.cart_item :is(td.product-quantity, td.product-subtotal)::before {
		float: none;
		color: var(--br-muted);
		font-weight: 400;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-remove {
		grid-column: 2;
		grid-row: 4;
		margin-top: 10px;
	}

	/* The red "×" on its own line becomes a plain "Remove" link. */
	.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
		display: inline-flex;
		align-items: center;
		width: auto;
		height: auto;
		min-height: 32px;
		border-radius: 0;
		background: none !important;
		color: var(--br-muted) !important;
		font-size: 0;
		line-height: 1;
	}

	.woocommerce-cart table.cart tr.cart_item td.product-remove a.remove::after {
		content: "Remove";
		font-size: var(--br-text-sm);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
		text-align: left !important;
	}

	.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td::before {
		display: block;
		float: none;
		margin-bottom: 8px;
	}
}