/* =========================================================
   Cream page background (owner request 2026-11-09).
   Gold and black stay the theme: the header, footer, black cards, category cards,
   question pills and gold buttons keep their look. Only the page behind them turns
   cream white, with brown text.
   Active when <body> has the class cm-cream (see functions.php).
   ========================================================= */

body.cm-cream {
	--cm-cream: #FBF7EF;
	--cm-cream-2: #F4ECDD;
	--cm-brown: #4A3426;
	--cm-brown-deep: #3B2A1E;
	--cm-ink: #15100A;
	background-color: var(--cm-cream) !important;
}

/* Page content: same palette names, light values. Everything that reads these turns cream and brown. */
body.cm-cream main {
	--wp--preset--color--base: var(--cm-cream);
	--wp--preset--color--base-2: var(--cm-cream-2);
	--wp--preset--color--contrast: var(--cm-brown);
	--wp--preset--color--contrast-2: var(--cm-cream-2);
	--wp--preset--color--muted: #7B6753;
	--wp--preset--color--hairline: #E2D5BF;
	--wp--preset--color--accent: #86621F; /* antique gold: readable on cream even at small sizes */
	--wp--preset--color--accent-dark: #6E4F17;
	--wc-form-color-background: #FFFDF8;
	--wc-form-color-text: var(--cm-brown);
	--wc-form-border-color: #DCCDB4;
	--cm-soft-shadow: 0 14px 34px rgba(74, 52, 38, .16), 0 2px 6px rgba(74, 52, 38, .08), inset 0 1px 0 rgba(255, 240, 210, .07);
	--cm-soft-shadow-hover: 0 22px 46px rgba(74, 52, 38, .22), 0 3px 8px rgba(74, 52, 38, .1), inset 0 1px 0 rgba(255, 240, 210, .1), 0 0 0 1px rgba(218, 182, 104, .45);
	color: var(--cm-brown);
}
body.cm-cream main :where(h1, h2, h3, h4, h5, h6) { color: var(--cm-brown-deep); }

/* Dark islands: black cards and pills keep the original palette inside them. */
body.cm-cream main :is(.cm-soft, .cm-card, .cm-faq details, .cm-auth, .cm-hero2__badge, .woocommerce-MyAccount-navigation) {
	--wp--preset--color--base: #15100A;
	--wp--preset--color--base-2: #1F1810;
	--wp--preset--color--contrast: #F3EDDF;
	--wp--preset--color--contrast-2: #0E0A06;
	--wp--preset--color--muted: #B9AE9A;
	--wp--preset--color--hairline: #4A3C22;
	--wp--preset--color--accent: #DAB668;
	--wp--preset--color--accent-dark: #D0A23F;
	--wc-form-color-background: #15100A;
	--wc-form-color-text: #F3EDDF;
	--wc-form-border-color: #4A3C22;
	color: #F3EDDF;
}
body.cm-cream main :is(.cm-soft, .cm-card, .cm-faq details, .cm-auth, .cm-hero2__badge, .woocommerce-MyAccount-navigation) :where(h1, h2, h3, h4, h5, h6) { color: #F3EDDF; }
body.cm-cream main .cm-faq summary { color: #F3EDDF; }

/* Text sitting on gold stays near black. */
body.cm-cream main :is(
	.cm-pill-btn.is-gold, .cm-pill-btn.is-gold:hover,
	.cm-pill[aria-checked="true"],
	.wp-block-query-pagination .page-numbers.current,
	.wc-block-components-product-sale-badge, .wc-block-components-product-badge, .onsale,
	.cm-ask:hover, .cm-ask:focus-visible,
	.cm-check input::after
) { color: var(--cm-ink) !important; }
body.cm-cream main .cm-check input::after { border-color: var(--cm-ink); }
body.cm-cream main :is(
	.cm-pill[aria-checked="true"],
	.wp-block-query-pagination .page-numbers.current,
	.wc-block-components-product-sale-badge, .wc-block-components-product-badge, .onsale
) { background-color: #DAB668 !important; border-color: #C29A47 !important; }
body.cm-cream main .cm-check input:checked { background: #DAB668; border-color: #C29A47; }

/* Gold buttons keep the bright gold, not the deeper text gold. */
body.cm-cream main :is(.wp-element-button, .wp-block-button__link, .single_add_to_cart_button, .wc-block-components-button:not(.is-link), button.button, a.button):not(.is-style-outline *):not(.cm-pill-btn) {
	background-color: #DAB668;
	border-color: #DAB668;
	color: var(--cm-ink);
}
body.cm-cream main :is(.wp-element-button, .wp-block-button__link, .single_add_to_cart_button, .wc-block-components-button:not(.is-link), button.button, a.button):not(.is-style-outline *):not(.cm-pill-btn):is(:hover, :focus-visible) {
	background-color: #D0A23F;
	border-color: #D0A23F;
	color: var(--cm-ink);
}
body.cm-cream main :is(.cm-pill-btn.is-gold, .cm-perk__icon, .cm-hero2__chip svg, .cm-auth__perks svg) { color: var(--cm-ink); }

/* Plain pill buttons (View all products, Source an item): raised cream instead of dark. */
body.cm-cream main .cm-pill-btn:not(.is-gold) {
	color: var(--cm-brown-deep);
	background: linear-gradient(180deg, #FFFDF8 0%, #F1E7D6 100%);
	box-shadow: 0 8px 20px rgba(74, 52, 38, .12), inset 0 1px 0 #fff, 0 0 0 1px rgba(134, 98, 31, .35);
}
body.cm-cream main .cm-pill-btn:not(.is-gold):hover { color: var(--cm-ink); box-shadow: 0 12px 28px rgba(74, 52, 38, .18), inset 0 1px 0 #fff, 0 0 0 1px rgba(134, 98, 31, .6); }

/* Hero: cream with a soft gold glow instead of the dark espresso wash. */
body.cm-cream main .cm-hero2 { background: radial-gradient(120% 90% at 85% 10%, #F3E3C3 0%, var(--cm-cream) 58%); }
body.cm-cream main .cm-hero2__lead { color: #5E4636; }
body.cm-cream main .cm-hero2__glow { background: radial-gradient(circle, rgba(218, 182, 104, .3) 0%, rgba(218, 182, 104, 0) 65%); }

/* Form fields (checkout, enquiry, sourcing): a touch whiter than the page, with a border you can see. */
body.cm-cream main :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea, select,
	.wc-block-components-text-input input, .wc-blocks-components-select__select, .wc-block-components-combobox .wc-block-components-combobox-control input,
	.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea
):not(.cm-auth *):not(.cm-soft *):not(.cm-src-card *) {
	background-color: #FFFDF8 !important;
	border-color: #D3C2A5 !important;
	color: var(--cm-brown) !important;
}
body.cm-cream main :is(input, textarea, select):not(.cm-auth *):not(.cm-soft *):not(.cm-src-card *):focus { border-color: #B8893A !important; }

/* Product pages and shop grid. */
body.cm-cream main .cm-source-note { background: var(--cm-cream-2); }
body.cm-cream main .woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.cm-cream main .woocommerce-MyAccount-navigation a:hover { background-color: rgba(243, 237, 223, .06); }
body.cm-cream main .woocommerce form .show-password-input { filter: none; }

/* The carousel arrows and question pills on cream: gentler shadows. */
body.cm-cream main .cm-faq details { box-shadow: 0 10px 26px rgba(74, 52, 38, .14), inset 0 1px 0 rgba(255, 240, 210, .07); }
body.cm-cream main .cm-faq details[open] { box-shadow: var(--cm-soft-shadow-hover); }

/* Cart count bubble in the header: dark number on gold (cream on gold could not be read). */
.cm-header .wc-block-mini-cart__badge { color: #15100A !important; }

/* ---------------------------------------------------------
   Heavier text on cream (2026-11-09). The light 300 weight looked fine as cream
   text on black, but brown text that thin on cream reads faint.
   --------------------------------------------------------- */
body.cm-cream main,
body.cm-cream .wc-block-mini-cart__drawer { font-weight: 400; }
body.cm-cream main :is(.cm-soft, .cm-card, .cm-faq details, .cm-auth, .cm-hero2__badge, .woocommerce-MyAccount-navigation) { font-weight: 300; }

/* Cart, checkout and order pages: darker brown, product names stand out. */
body.cm-cream main :is(.shop_table, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-order, .woocommerce-table, .woocommerce-customer-details) {
	color: var(--cm-brown-deep);
}
body.cm-cream main :is(.shop_table .product-name, .shop_table .product-name a, .woocommerce-table .product-name a) {
	color: var(--cm-brown-deep);
	font-weight: 500;
}
body.cm-cream main .shop_table .product-name a:hover { color: #86621F; }
body.cm-cream main :is(.cart_totals h2, .woocommerce-order-details__title, .woocommerce-column__title) {
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}
body.cm-cream main :is(.woocommerce-checkout-review-order-table, .cart_totals) :is(.order-total, .order-total td, .order-total th) { color: var(--cm-brown-deep); }

/* Disabled buttons (Update cart before anything changes): muted but still readable. */
body.cm-cream main :is(button, .button):is(:disabled, [disabled], .disabled) {
	opacity: 1 !important;
	background-color: #EFE3C8 !important;
	border-color: #E2D2B0 !important;
	color: #6B5847 !important;
}

/* Payment box at checkout: cream instead of WooCommerce's grey and lilac. */
body.cm-cream main #payment { background: var(--cm-cream-2); }
body.cm-cream main #payment ul.payment_methods { border-bottom-color: #E2D5BF; }
body.cm-cream main #payment div.payment_box { background: #FFFDF8; color: var(--cm-brown); border: 1px solid #E2D5BF; }
body.cm-cream main #payment div.payment_box::before { border-bottom-color: #FFFDF8; }
body.cm-cream main #payment :is(label, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text) { color: var(--cm-brown-deep); }

/* Checkout and order received use WooCommerce's small top bar, which has no background of its own.
   Give it the same black as the main header so its cream text shows. */
body.cm-cream.woocommerce-checkout .wp-site-blocks > header.wp-block-template-part {
	background-color: #15100A;
	border-bottom: 1px solid #4A3C22;
}
body.cm-cream.woocommerce-checkout .wp-site-blocks > header.wp-block-template-part :is(.wp-block-site-title a, a) { color: #F3EDDF; }
body.cm-cream.woocommerce-checkout .wp-site-blocks > header.wp-block-template-part .wc-block-mini-cart__button { color: #DAB668; }

/* Source it for me (cm-site plugin, assets/sourcing.css).
   Its colours are worked out once on .cm-src, so they are set again here. */
body.cm-cream main :is(.cm-src, .cm-src-account) {
	--src-gold: #86621F;
	--src-line: #E2D5BF;
	--src-text: var(--cm-brown);
	--src-muted: #7B6753;
	--src-base: var(--cm-cream);
}
/* The tray around the two pass cards: a cream panel instead of see-through black (it looked muddy grey). */
body.cm-cream main .cm-src-passes { background: var(--cm-cream-2); border-color: #E2D5BF; }
body.cm-cream main .cm-src-error { color: #8A2E1F; background: rgba(176, 70, 52, .08); }
/* The request form card and the pass cards stay black and gold. */
body.cm-cream main :is(.cm-src-card, .cm-src-pass) {
	--wp--preset--color--base: #15100A;
	--wp--preset--color--base-2: #1F1810;
	--wp--preset--color--contrast: #F3EDDF;
	--wp--preset--color--contrast-2: #0E0A06;
	--wp--preset--color--muted: #B9AE9A;
	--wp--preset--color--hairline: #4A3C22;
	--wp--preset--color--accent: #DAB668;
	--wp--preset--color--accent-dark: #D0A23F;
	--src-gold: #DAB668;
	--src-line: #4A3C22;
	--src-text: #F3EDDF;
	--src-muted: #B9AE9A;
	--src-base: #15100A;
	color: #F3EDDF;
	font-weight: 300;
}
body.cm-cream main :is(.cm-src-card, .cm-src-pass) :where(h1, h2, h3, h4, h5, h6) { color: #F3EDDF; }
body.cm-cream main :is(.cm-src-card, .cm-src-pass) :is(.cm-src-intro, .cm-src-hint, .cm-src-passname, .cm-src-progress, .cm-src-muted, dt) { color: #B9AE9A; }
body.cm-cream main :is(.cm-src-card, .cm-src-pass) :is(.cm-eyebrow, .cm-src-req, .cm-src-edit) { color: #DAB668; }
body.cm-cream main :is(.cm-src-card, .cm-src-pass) :is(.cm-src-save, .cm-src-chip[aria-checked="true"]) { color: #15100A; }
body.cm-cream main .cm-src-card .cm-src-error { color: #F1C4B8; background: rgba(176, 70, 52, .14); }

/* Slide-out cart drawer: lives outside the page content, so it gets the cream palette here. */
body.cm-cream .wc-block-mini-cart__drawer {
	--wp--preset--color--base: var(--cm-cream);
	--wp--preset--color--base-2: var(--cm-cream-2);
	--wp--preset--color--contrast: var(--cm-brown);
	--wp--preset--color--contrast-2: var(--cm-cream-2);
	--wp--preset--color--muted: #7B6753;
	--wp--preset--color--hairline: #E2D5BF;
	--wp--preset--color--accent: #86621F;
	--wp--preset--color--accent-dark: #6E4F17;
	color: var(--cm-brown);
}
body.cm-cream .wc-block-mini-cart__drawer :is(.components-modal__frame, .wp-block-woocommerce-mini-cart-contents, .wc-block-mini-cart__title) { background-color: var(--cm-cream); }
body.cm-cream .wc-block-mini-cart__drawer :is(h1, h2, h3, .wc-block-mini-cart__title, .wc-block-components-product-name, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value) { color: var(--cm-brown-deep); }
body.cm-cream .wc-block-mini-cart__drawer .wc-block-components-product-name { font-weight: 500; }
body.cm-cream .wc-block-mini-cart__drawer :is(.wc-block-components-product-metadata, .wc-block-components-product-details, .wc-block-cart-item__prices, .wc-block-components-product-price) { color: var(--cm-brown); }
body.cm-cream .wc-block-mini-cart__drawer :is(.wc-block-components-quantity-selector, .wc-block-components-quantity-selector input, .wc-block-components-quantity-selector button) { color: var(--cm-brown-deep); border-color: #D3C2A5; }
body.cm-cream .wc-block-mini-cart__drawer :is(.wc-block-cart-item__remove-link, .wc-block-components-drawer__close) { color: var(--cm-brown); }
body.cm-cream .wc-block-mini-cart__drawer :is(.wc-block-components-product-badge, .wc-block-components-sale-badge) { color: var(--cm-ink) !important; background-color: #DAB668 !important; border-color: #C29A47 !important; }
body.cm-cream .wc-block-mini-cart__drawer .wc-block-mini-cart__footer { border-top-color: #E2D5BF; }
body.cm-cream .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
body.cm-cream .wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button { background-color: #DAB668 !important; border-color: #DAB668 !important; color: var(--cm-ink) !important; }
body.cm-cream .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart { color: var(--cm-brown-deep) !important; border-color: #86621F !important; background: transparent !important; }
body.cm-cream .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover { background: rgba(134, 98, 31, .08) !important; }