/*
 * Warm ground.
 *
 * The page sat on pure #ffffff, which reads cold and clinical next to a
 * chocolate-and-gold palette — white is a blue-ish neutral, and the eye
 * compares it against the warm browns beside it.
 *
 * The shift is deliberately small. A cream this close to white still reads as
 * "white page" rather than "beige page", but it stops fighting the product
 * photography. Anything stronger starts to look like aged paper.
 */

:root {
	--rb-cream: #f9f5ed;
	--rb-cream-deep: #f4ece1;
	--rb-gold: #d2ac67;
	--rb-cocoa: #2a1c0f;

	/*
	 * Woodmart paints the page with `body:not([class*="wrapper-boxed"])`, which
	 * outranks a plain `body` rule. Rebinding its own variable is what actually
	 * takes effect, and it carries the change to everything else the theme
	 * derives from the same value.
	 */
	--wd-main-bgcolor: #f9f5ed;
}

html {
	background-color: var(--rb-cream);
}

/*
 * Two very soft warm pools, one under the hero and one lower down, so the page
 * is not a single flat wash. Fixed attachment keeps them still while content
 * scrolls over them. Half strength was too far — the warmth vanished entirely — so these
 * sit at roughly three quarters, with a slightly deeper cream beneath them
 * carrying more of the weight.
 */
body {
	background-color: var(--rb-cream);
	background-image:
		radial-gradient(1100px 520px at 78% -8%, rgba(210, 172, 103, 0.10), transparent 62%),
		radial-gradient(900px 620px at 12% 34%, rgba(196, 150, 90, 0.058), transparent 66%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* The theme paints its own white over the body; let the warmth through. */
.wd-page-content,
.site-content,
.main-page-wrapper {
	background-color: transparent;
}

/*
 * A single Elementor section carries an explicit white. Matched to the cream
 * rather than made transparent, so it still reads as a distinct band.
 */
.home .elementor-element-e0e29f3 {
	background-color: var(--rb-cream) !important;
}

/*
 * Fine grain over the whole page. At 3% this is invisible as texture and only
 * registers as depth — it stops the large flat areas looking like empty canvas
 * and hides the banding that wide, shallow gradients cause on 8-bit displays.
 */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Content sits above the grain. */
.wd-page-content,
.rb-hero {
	position: relative;
	z-index: 1;
}

/*
 * The header needs to outrank the hero, not merely clear the grain: it holds
 * the language dropdown, and at an equal z-index the hero won on DOM order and
 * swallowed the menu.
 */
.whb-header {
	position: relative;
	z-index: 20;
}

/*
 * Product and category cards were white-on-white and had no edge. Against the
 * cream they need to stay white to lift off the page, with a warm hairline
 * rather than a grey one.
 */
.wd-product,
li.product,
.wd-cat.cat-design-alt,
.blog-post-loop {
	border-radius: 10px;
}

.wd-hover-base .product-element-top,
.wd-cat .wd-entities-title {
	border-radius: 8px;
}

/* Warm the horizontal rules the theme draws in cool grey. */
hr,
.wd-hr,
.elementor-divider-separator {
	border-color: rgba(122, 92, 54, 0.16);
}