/* Page background — matches the homepage sections (#fcf7f3) on every page.
   TheGem paints white on body/#page/#main; override the base layers only so
   cards, product tiles and feature sections keep their own backgrounds. */

:root {
	--thsc-page-bg: #fcf7f3;
}

html,
body,
body #page,
body #main,
body #main-content,
body .site-main,
body .block-content,
body .page-title-block:not(.has-background-image) {
	background-color: var(--thsc-page-bg) !important;
}

/* The cream override above leaves TheGem's white title text and breadcrumbs
   unreadable on pages whose title block has no background image (e.g.
   Testimonials). Darken them to match the site's ink colours. The inline
   style on the h1 requires !important. */
body .page-title-block:not(.has-background-image) h1,
body .page-title-block:not(.has-background-image) .title-rich-content,
body .page-title-block:not(.has-background-image) .page-title-excerpt {
	color: #1c1916 !important;
}

body .page-title-block:not(.has-background-image) .breadcrumbs,
body .page-title-block:not(.has-background-image) .breadcrumbs a,
body .page-title-block:not(.has-background-image) .breadcrumbs span,
body .page-title-block:not(.has-background-image) .breadcrumbs .current {
	color: #3a342e !important;
}

body .page-title-block:not(.has-background-image) .breadcrumbs a:hover {
	color: #c4783a !important;
}

body .page-title-block:not(.has-background-image) .breadcrumbs .bc-devider:before {
	color: #8a827b !important;
}

body .page-title-block:not(.has-background-image) .breadcrumbs .current {
	border-bottom-color: #c4783a !important;
}

/* Single product pages: TheGem paints a grey-blue band (#F4F6F7, set inline from
   the product-page options) behind the gallery. Switch it to the page cream so
   it matches the homepage. The white details card on the right is left alone. */
body .product-page__wrapper .single-product-content__overlay {
	background-color: var(--thsc-page-bg) !important;
}