/**
 * GenChem storefront skin — dark, patterned, blue-lettered.
 *
 * Loaded only on a GenChem hostname, after components.css, so everything here
 * is an override rather than a fork: both storefronts share one component layer
 * and diverge on colour alone. See docs/multi-brand-storefronts.md.
 *
 * Scoped entirely to `.gc-brand-genchem`, which only a non-default brand gets,
 * so nothing here can reach the Gencore site even if the file is loaded.
 *
 * The look is lifted from the Revyve and Revytalize pages: the seamless
 * chemistry pattern over near-black, with headings in the palette's blue. The
 * pattern ships in the theme rather than being referenced from the media
 * library, because upload URLs and attachment IDs differ between staging and
 * production -- a hardcoded uploads path renders on one and 404s on the other.
 *
 * The tile is Revyve-seemless.png, the DARK pattern those pages band with --
 * an opaque #010101 ground carrying #12212C glyphs. There is a light sibling
 * in the media library, Gencore-seamless-pattern-blue-faded.png, which is the
 * main site's tile: opaque white with pale blue glyphs. Shipping that one is
 * what made this skin render light, because an opaque tile hides whatever
 * background-color sits under it -- the near-black was there all along and
 * never showed. If this page ever looks white again, check the tile first.
 *
 * WHAT THIS FILE CANNOT DO. Anything Elementor renders takes its colour from
 * the Elementor kit, one shared record, so a page built there looks the same on
 * both brands regardless. That is why GenChem has its own copy of the home page
 * rather than a recolour of the shared one.
 *
 * Deliberately NOT overridden: --gc-white. It reads as "the light one" and is
 * used 60 times as a text colour against 26 as a background, so flipping it
 * turns five dozen labels dark-on-dark. On a dark ground it is already correct.
 */

.gc-brand-genchem {
	/* Blue carries the brand; the theme's orange accent is retired here, which
	   is the whole of "black and blue" as a palette instruction. */
	--gc-accent: var(--gc-blue);
	--gc-warm-bg: rgba(91, 167, 219, 0.12);
	--gc-warm-text: var(--gc-blue);

	/* Inverted ground. --gc-ink is the text token (36 uses as a colour against
	   2 as a background), so on a dark page it has to become the light one. */
	--gc-ink: #E8F1F8;
	--gc-text-color: #D6E4EF;
	--gc-heading-color: var(--gc-blue);
	--gc-muted: #9FB4C2;
	--gc-line: #22475C;

	--gc-bg: transparent;
	--gc-blue-light: rgba(91, 167, 219, 0.10);
	--gc-blue-lighter: rgba(91, 167, 219, 0.06);

	--gc-shadow-card: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
	--gc-shadow-card-hover: 0 18px 40px -10px rgba(0, 0, 0, 0.7);
	--gc-shadow-pill: 0 2px 10px -3px rgba(0, 0, 0, 0.5);

	/* Surface for anything that needs to sit above the pattern and still be
	   readable. Used by the overrides below rather than by flipping a token. */
	--gc-surface: #16242F;
	--gc-surface-2: #1B2C38;
}

/* The pattern rides on the html element so it covers the full scroll height
   including any overscroll, and is not cut off by a short body. */
html:has(body.gc-brand-genchem),
body.gc-brand-genchem {
	background-color: #010101;
	background-image: url("../images/genchem-pattern-dark.png");
	background-repeat: repeat;
	background-position: top center;
}

body.gc-brand-genchem {
	color: var(--gc-text-color);
}

/* Let the pattern through. The theme and Elementor both paint opaque section
   grounds by default, which would tile the pattern only in the gaps between
   them -- the request was for one continuous background. */
.gc-brand-genchem #primary,
.gc-brand-genchem .site-main,
.gc-brand-genchem .woocommerce-page-wrap,
.gc-brand-genchem .e-con,
.gc-brand-genchem .e-con-inner,
.gc-brand-genchem .elementor-section,
.gc-brand-genchem .elementor-widget-wrap {
	background-color: transparent;
}

.gc-brand-genchem h1,
.gc-brand-genchem h2,
.gc-brand-genchem h3,
.gc-brand-genchem .elementor-heading-title {
	color: var(--gc-heading-color);
}

/* Cards keep a surface of their own so text stays legible over the pattern,
   but it is a dark one rather than the light card the main site uses. */
.gc-brand-genchem .gc-card,
.gc-brand-genchem .card,
.gc-brand-genchem .gc-product-card,
.gc-brand-genchem .gc-review-card,
.gc-brand-genchem ul.products li.product {
	background: var(--gc-surface);
	border-color: var(--gc-line);
	color: var(--gc-text-color);
}

/* The bar is a blur over the page, not a lid on it -- the same treatment the
   Gencore header gets, so the two storefronts read as one family.
 *
 * Both backgrounds are pinned transparent so the shared blur is the only thing
 * the bar contributes. The visible background comes from .site-header::before,
 * which sits above the element's own background, so the element alone is not
 * enough -- whichever one keeps a colour is the one that shows.
 *
 * ::before is pinned rather than left to inherit because the shared rule fills
 * it with WHITE at --gc-header-fade-opacity. That slider reads 0 on both brands
 * today, which is why Gencore's bar is already clear; but it is a slider, and
 * raising it would wash this dark skin's bar white and strand the light nav
 * labels on it. Transparent here is correct at any setting.
 *
 * The blur itself (--gc-header-blur, 30px) and the bottom feather come from the
 * shared rule untouched, so the bar blurs exactly as Gencore's does.
 */
.gc-brand-genchem .site-header::before {
	background: transparent;
}

.gc-brand-genchem .site-header {
	background: transparent;
	color: var(--gc-white);
}

/* Header ink. Everything clickable in this bar sits on a pill -- the nav split
 * at rgba(255,255,255,.68), the icon buttons at .45 -- and those pills are light
 * on BOTH brands, because they are frosted glass over whatever scrolls beneath,
 * not a brand surface. So the ink on them is dark here exactly as it is on
 * Gencore.
 *
 * White made sense only while this skin painted the bar itself navy. Once the
 * bar went transparent in 1.0.107 the labels were white-on-light-grey, and on
 * mobile -- where the nav collapses and only the icon buttons remain -- it was
 * white icons on a light disc.
 *
 * .icon-pill needs its own rule for two reasons: it takes its colour from
 * --gc-ink, which this skin inverts, so it does not simply follow the link
 * colour; and .gc-brand-genchem .site-header a out-specifies a bare
 * .gc-brand-genchem .icon-pill, so the fix has to be qualified by the header to
 * win. */
.gc-brand-genchem .site-header a,
.gc-brand-genchem .primary-navigation a {
	color: var(--gc-nav-text);
}

.gc-brand-genchem .site-header .icon-pill {
	color: #14212B;
}

.gc-brand-genchem .site-header .nav-pill {
	background: rgba(255, 255, 255, 0.06);
}

/* The wordmark is carried by the logo image alone here -- the site name is
   still set, because the browser tab and order emails need it, but it is not
   repeated beside the mark. */
.gc-brand-genchem .site-branding .site-title-line,
.gc-brand-genchem .gc-navsplit__logo .site-title-line {
	display: none;
}

/* Dropdown panels come from the shared component layer with a light surface,
   so a light label on them is the same unreadable pairing as the bar was. */
.gc-brand-genchem .site-header .sub-menu {
	background: var(--gc-surface);
	border-color: var(--gc-line);
}

.gc-brand-genchem .site-header .sub-menu a {
	color: var(--gc-text-color);
}

.gc-brand-genchem .site-header .sub-menu a:hover,
.gc-brand-genchem .site-header .sub-menu a:focus {
	color: var(--gc-blue);
	background: rgba(91, 167, 219, 0.10);
}

/* -------------------------------------------------------------------------
 * Shop and WooCommerce
 *
 * The shop templates paint their own opaque grounds -- a white page background
 * from --gc-woo-bg, a pale tab strip, a light radial behind every product
 * image -- so without these the pattern stops at the shop's edge and the page
 * reverts to the main site's palette halfway down.
 * ---------------------------------------------------------------------- */

.gc-brand-genchem {
	--gc-woo-bg: transparent;
	--gc-card: var(--gc-surface);
	/* The eyebrow rule and sale badge are drawn in the orange accent, which is
	   the one colour this brand does not use. */
	--gc-orange: var(--gc-blue);
	--gc-blue-soft: var(--gc-blue-dark);
}

.gc-brand-genchem .gc-shop,
.gc-brand-genchem .gc-shop-fade,
.gc-brand-genchem .gc-shop--board,
.gc-brand-genchem .gc-shop__inner {
	background: transparent;
}

.gc-brand-genchem .gc-shop__tabs {
	background: rgba(255, 255, 255, 0.06);
}

.gc-brand-genchem .gc-shop__tab {
	color: var(--gc-text-color);
}

.gc-brand-genchem .gc-shop__card {
	background: var(--gc-surface);
	border-color: var(--gc-line);
}

/* Product shots are cut out on white, so the tile behind them stays light --
   a dark one would ring every product with a halo. It is pulled towards the
   brand's blue rather than left as the main site's near-white. */
.gc-brand-genchem .gc-shop__media {
	background: radial-gradient(120% 120% at 50% 0, #EAF3FA, #D8E7F3);
}

.gc-brand-genchem .gc-shop__title,
.gc-brand-genchem .gc-shop__subtitle {
	color: var(--gc-heading-color);
}

.gc-brand-genchem .gc-shop__subnote,
.gc-brand-genchem .gc-shop__lead {
	color: var(--gc-muted);
}

/* -------------------------------------------------------------------------
 * Out-specifying the generated WooCommerce background
 *
 * The shop background is emitted as `body.woocommerce{...}` from a theme
 * setting, carrying the LIGHT pattern under a white wash. That selector has
 * exactly the same specificity as `body.gc-brand-genchem`, so which one wins
 * comes down to source order -- and being generated into the head, it wins.
 * Qualifying with html raises specificity enough to settle it outright rather
 * than depending on load order.
 * ---------------------------------------------------------------------- */

html body.gc-brand-genchem,
html body.gc-brand-genchem.woocommerce,
html body.gc-brand-genchem.woocommerce-page {
	background-color: #010101;
	background-image: url("../images/genchem-pattern-dark.png");
	background-size: auto;
	background-position: top center;
	background-repeat: repeat;
	background-attachment: scroll;
}

/* Clearance under the sticky header, put back where removing the hero took it
   away. gc-shop-archive.css zeroes this because the hero normally supplies it. */
.gc-shop-nohero .woocommerce-page-wrap--shop {
	padding-top: var(--gc-woo-top-pad, 145px);
}

@media (max-width: 640px) {
	.gc-shop-nohero .woocommerce-page-wrap--shop {
		padding-top: calc(var(--gc-woo-top-pad, 145px) - 24px);
	}
}

/* -------------------------------------------------------------------------
 * The About page
 *
 * /about-us/ is ONE Elementor post serving both hostnames -- post 1437 on
 * staging, 13211 on production, but the same single post per environment for
 * both brands. Its top-level container paints Main_Pattern.webp, the light
 * tile, as a background IMAGE. That covers this skin's dark ground, and then
 * every token tuned for a dark page lands on a light one: --gc-ink is near
 * white here, gc-timeline.css reads it as --gc-tl-ink, and the timeline's
 * markers (background: currentColor) turn white-on-white and vanish.
 *
 * This cannot be fixed in Elementor. The page is shared, so darkening that
 * container there would drag the Gencore About page dark with it. The brand
 * skin is the only layer that can tell the two hostnames apart.
 *
 * Scoped to .e-parent, Elementor's own class for a top-level container. The
 * page has exactly one, and it is the one carrying the tile -- so the page
 * background clears while the blue gradient on a nested .e-child survives.
 * No element or post id appears here: both differ between staging and
 * production, and a rule naming them would work on one and quietly no-op on
 * the other. `gc-about` is the theme's own body class, set by detecting the
 * founder-letters widget in the page's Elementor data, so it lands on the
 * right page in both environments.
 *
 * !important because Elementor's generated selector carries four classes and
 * is emitted per-post; out-specifying it by hand would be a guess about load
 * order that a plugin update could flip.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem.gc-about .e-con.e-parent {
	background-image: none !important;
}

/* -------------------------------------------------------------------------
 * Components that source their surface and their ink separately
 *
 * Two opposite failures, both falling out of one decision at the top of this
 * file: the skin inverts --gc-ink to a light value but deliberately leaves
 * --gc-white alone, because --gc-white is read as "the light one" far more
 * often than it is used as a surface.
 *
 * So a component that takes its INK from --gc-ink and its SURFACE from
 * --gc-white lands light-on-light. Three do it on the About page:
 *
 *   .gc-tl  card and date stamp  (--gc-tl-card-bg / --gc-tl-stamp-bg)
 *   .gc-fl  letter panel         (--gc-fl-surface)
 *   .gc-sl  staff card           (a bare background: var(--gc-white))
 *
 * They get the dark surface, which is what their already-light ink was
 * waiting for. .gc-amb is the same pairing and is included so the next page
 * carrying it does not report the same bug.
 *
 * The opposite case is a component that HARDCODES a dark ink instead of
 * deriving it, so nothing about this skin ever reached it. .gc-hb3 pins
 * --gc-hb3-ink to #14212B, which was invisible from the moment the page
 * ground went near-black -- its heading only escaped because the h1 rule
 * above recolours it. That one takes the brand's text colour.
 *
 * Every override lands on the COMPONENT ROOT, never on body. Each component
 * declares these tokens on its own root element, and a custom property
 * declared there beats one inherited from an ancestor however specific the
 * ancestor's selector is -- setting them on .gc-brand-genchem would do
 * nothing at all.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem .gc-tl {
	--gc-tl-card-bg: var(--gc-surface);
	--gc-tl-stamp-bg: var(--gc-surface);
}

.gc-brand-genchem .gc-fl {
	--gc-fl-surface: var(--gc-surface);
}

.gc-brand-genchem .gc-amb {
	--gc-amb-card-bg: var(--gc-surface);
}

/* No token to reach for -- the staff card paints --gc-white directly. */
.gc-brand-genchem .gc-sl-card {
	background: var(--gc-surface);
}

/* The hero carousel's product card -- the same pairing again, on
 * /revytalize/ and /revyve/ (15 cards each, the only two pages carrying it).
 *
 * --gc-hcar-card-bg is var(--gc-white) and --gc-hcar-card-title is var(--gc-ink),
 * so the card stayed white while its title went light: 1.14:1 measured live.
 * The price is worse in kind rather than degree -- it reads --gc-blue-dark,
 * which the WooCommerce block below deliberately lightens to #8CC6EA, landing
 * at 1.85:1 on the same white.
 *
 * The surface moves, not the ink, per the doctrine above. The alternative --
 * keeping the white card and pinning the ink dark, as .gc-rstar does -- was
 * measured too and is strictly worse: it tops out at 4.16:1 for the price and
 * the "Learn more" button, because both are drawn in #3D82B3, a blue chosen
 * for a light card and already borderline on the Gencore storefront. Moving
 * the card instead takes the title to 13.84:1 and the price to 8.57:1.
 *
 * --gc-rstar's exception does not apply here: its surface is a photograph, and
 * this one is a panel under the photograph, not the photograph itself.
 *
 * The photo tile is pinned back to a light literal. It reads --gc-blue-light,
 * which this skin turns translucent, so it was only light because the white
 * card showed through it; with a dark card behind it, it would go dark and
 * ring every cut-out-on-white product shot with a halo -- the same reason
 * .gc-shop__media above keeps a light radial. #EAF3FA is the component's own
 * fallback, which is what the translucent blue was composing to anyway.
 *
 * "Learn more" is the one thing the surface change would otherwise worsen:
 * it borrows the buy button's end stop (#3D82B3) for its outline and label,
 * which is 4.16:1 on white and 3.80:1 on the card. It gets the light blue the
 * price already uses, taking it to 8.57:1. Only the outline button is touched
 * -- the buy button's gradient is left exactly as it is on both brands.
 */
.gc-brand-genchem .gc-hcar {
	--gc-hcar-card-bg: var(--gc-surface);
	--gc-hcar-card-media-bg: #EAF3FA;
}

.gc-brand-genchem .gc-hcar-card-actions .gc-hcar-card-btn--info {
	color: #8CC6EA;
	border-color: #8CC6EA;
}

/* The stacked hero's light half.
 *
 * Under 900px gc-home-carousel.css stops cutting the two bands along a seam and
 * stacks them instead: band A becomes the top of the stage, band B the bottom.
 * On /revyve/ and /revytalize/ band A carries Gencore-seamless-pattern-blue-faded.png
 * -- the LIGHT tile -- so on a phone the hero arrives as a light slab sitting on
 * a dark one, on a skin whose whole premise is one continuous dark ground. Side
 * by side on desktop that split is the design; stacked, it reads as the page
 * having failed to paint the top of itself.
 *
 * Each of those pages is ONE Elementor post serving both hostnames (102 and 105
 * on staging), exactly like /about-us/ above, so darkening band A in Elementor
 * would drag the Gencore hero dark with it. The brand skin is the only layer
 * that can tell the two storefronts apart.
 *
 * Band B is stretched over the whole stage rather than band A being repainted,
 * because the dark tile is band B's own: restating it here would freeze a
 * media-library URL into the stylesheet, and both bands' images are per-slide
 * picks that an editor is expected to change.
 *
 * Qualified with `body` because this skin is enqueued BEFORE gc-home-carousel.css
 * -- both depend on gencore-components and neither depends on the other -- so a
 * rule that merely matched the stacking rules' specificity would lose on source
 * order.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	body.gc-brand-genchem .gc-hcar-band--a {
		display: none;
	}

	body.gc-brand-genchem .gc-hcar-band--b {
		top: -4%;
	}

	/* The seam's shadow strip has nothing left to divide. */
	body.gc-brand-genchem .gc-hcar-bands::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Why the ink overrides carry !important
 *
 * Every token below belongs to an Elementor COLOUR CONTROL whose widget
 * declares a hardcoded dark literal as its `default` -- `'--gc-hb3-ink',
 * '#14212B'` and its twenty-odd siblings in inc/class-gc-*-widget.php.
 *
 * Elementor renders a control's default as if it were a saved value, into the
 * per-post stylesheet, against its own four-class selector:
 *
 *   .elementor-1437 .elementor-element.elementor-element-8e86f40 .gc-hb3
 *     { --gc-hb3-ink:#14212B; }
 *
 * That is 0,4,0 against this file's 0,2,0, so the token override loses on
 * every Elementor-built page -- which is all of them. The declarations read
 * correctly and did nothing; the About page's lead copy sat at 1.27:1 with
 * this rule already live and shipped.
 *
 * The page cannot be corrected in Elementor instead. /about-us/ is ONE post
 * (1437 on staging, 13211 on production) served to both hostnames, so a light
 * ink set on the widget would blank the same copy on the Gencore site.
 *
 * !important rather than a longer selector, for the reason given for
 * .e-con.e-parent above: out-specifying a generated four-class selector by
 * hand is a guess about Elementor's emitted shape that a plugin update can
 * flip. Nothing is lost by pinning these -- a shared post cannot carry a
 * per-brand colour in the first place.
 *
 * Tokens NOT backed by a colour control are left plain: the surfaces above,
 * .gc-cn, .gc-pf and the --gc-woo-* palette are declared only in stylesheets,
 * where 0,2,0 already wins. Grep a token in inc/ before adding it here.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem .gc-hb3 {
	--gc-hb3-ink: var(--gc-text-color) !important;
}

/* Missed by the sweep below: the card grid's heading token is spelled --cg-*,
   not --gc-cg1-*, so a search for the usual prefix never reached it. */
.gc-brand-genchem .gc-cg1 {
	--cg-heading: var(--gc-heading-color) !important;
}

/* The staff card's name and bio -- !important, but NOT for the reason above.
 *
 * These are not tokens and there is no baked control default behind them.
 * gencore_text_style_controls() in functions.php gives every text role a
 * plain `Colour` control with NO default, so Elementor emits nothing until
 * somebody picks a colour -- and on /careers/ somebody did. post-108.css
 * carries, as a SAVED value:
 *
 *   .elementor-108 .elementor-element.elementor-element-6e7aa7e2 .gc-sl-name
 *     { color:#111111; }
 *
 * and the same for .gc-sl-bio. That is 0,4,0, so it buries both the component
 * stylesheet's `color: var(--gc-ink, #14212B)` and this file's h3 rule, and
 * near-black landed on the dark surface .gc-sl-card is given above: 1.19:1,
 * measured on the live page. /about-us/ renders correctly only because its
 * copy of the widget has those controls left empty, so nothing is emitted and
 * the inherited light ink stands -- which is why the two pages disagree.
 *
 * A saved colour cannot be honoured here. /careers/ and /about-us/ are single
 * Elementor posts served to both hostnames, over a white .gc-sl-card on
 * Gencore and a #16242F one here, so no one literal is right for both. That
 * is the same argument the About block above makes, and it is why pinning per
 * brand rather than editing the page is the only move available.
 *
 * The name takes --gc-heading-color, not --gc-ink. .gc-sl-name is an h3, so
 * the heading rule at the top of this file already says what colour it should
 * be; the saved value is the only thing that stopped it applying, and pinning
 * to the heading colour just makes that intent stick. It also leaves
 * /about-us/ byte-identical -- its names already compute to #5BA7DB -- so the
 * page that was correct is not restyled in the course of fixing the one that
 * was not. --gc-ink would have worked on contrast alone (13.84:1) and turned
 * every About name from blue to near-white for no reason.
 *
 * Measured after: /careers/ 6.02:1 name, 7.37:1 bio; /about-us/ unchanged.
 *
 * .gc-sl-role is deliberately absent: it is drawn in the widget's own accent
 * and already measures 6.02:1 on both pages. */
.gc-brand-genchem .gc-sl-name {
	color: var(--gc-heading-color) !important;
}

.gc-brand-genchem .gc-sl-bio {
	color: var(--gc-muted) !important;
}

/* -------------------------------------------------------------------------
 * The rest of the hardcoded dark inks
 *
 * .gc-hb3 above was not alone. Sweeping the component stylesheets for text
 * tokens that default to a dark literal turns up 28 of them, and every one is
 * invisible the moment the page ground goes near-black. They were only ever
 * going to surface one screenshot at a time, so the sweep is done here in full
 * rather than waiting for each to be reported.
 *
 * Scoped to the component root, per the rule above: these are per-component
 * token names and several collide in spirit (-title, -muted, -text), so
 * putting them on body would have one component's value leak into another's.
 *
 * Tokens paired with a light surface of their own are deliberately absent.
 * --gc-pd-badge-text sits on --gc-pd-badge-bg, --gc-cb-p-text on --gc-cb-p-bg,
 * --gc-pf-btn-text on a gradient button, --gc-cf1-field-text inside a white
 * input. Those are dark-on-light by design; flipping them breaks what works.
 * The test applied was whether the token has a background token beside it.
 * ---------------------------------------------------------------------- */

.gc-brand-genchem .gc-at {
	--gc-at-heading-color: var(--gc-heading-color) !important;
	--gc-at-muted-color: var(--gc-muted) !important;
}

.gc-brand-genchem .gc-cn {
	--gc-cn-text: var(--gc-text-color);
	--gc-cn-muted: var(--gc-muted);
	--gc-cn-core-ink: var(--gc-text-color);
}

.gc-brand-genchem .gc-fb {
	--gc-fb-heading-color: var(--gc-heading-color) !important;
	--gc-fb-muted-color: var(--gc-muted) !important;
}

/* --gc-ingx-name is deliberately absent, and was removed from this sweep.
 *
 * It fails the test stated above: --gc-ingx-panel-bg sits beside it and is
 * #FFFFFF, which this skin does not remap. The ingredient name is drawn inside
 * that white panel, so lightening it was painting light ink onto a light card
 * whatever the page ground did -- the same call made for the gallery rating
 * chip. On Gencore the same element computes #14212B and reads at 16:1, which
 * is the evidence that the skin is what broke it.
 *
 * --gc-ingx-title stays: that is the section heading, which sits on the page
 * ground rather than on the panel. */
.gc-brand-genchem .gc-ingx {
	--gc-ingx-title: var(--gc-heading-color) !important;
}

/* Removing the token above is necessary and not sufficient: .gc-ingx__name is
 * an h3, so the blanket heading rule at the top of this file (0,1,1) outranks
 * the component's own `color: var(--gc-ingx-name)` (0,1,0) and painted it
 * #5BA7DB regardless -- 2.63:1 on the white panel, measured on
 * /topical-ghk-cu/. Handing the element back to its own token at 0,2,0 is the
 * narrow fix; widening the exception to the heading rule itself would have to
 * enumerate every component that draws a heading inside a light card. */
.gc-brand-genchem .gc-ingx__name {
	color: var(--gc-ingx-name);
}

.gc-brand-genchem .gc-pd {
	--gc-pd-title: var(--gc-heading-color) !important;
	--gc-pd-price: var(--gc-text-color) !important;
	--gc-pd-pop-title: var(--gc-text-color) !important;
	--gc-pd-pop-text: var(--gc-muted) !important;
}

.gc-brand-genchem .gc-pf {
	--gc-pf-heading: var(--gc-heading-color);
}

.gc-brand-genchem .gc-qc {
	--gc-qc-heading: var(--gc-heading-color) !important;
	--gc-qc-ink: var(--gc-text-color) !important;
}

/* .gc-rf is deliberately NOT in this sweep, and was removed from it.
 *
 * It had all four of its ink tokens lightened here on the assumption every
 * GenChem page is dark. /refund-policy/ is not. An Elementor container on that
 * page paints the light Gencore pattern tile over this skin's ground, and the
 * widget sits straight on it -- so the lightened ink landed on white at
 * 1.30:1 for the "we can refund it if" column and 2.15:1 for the "cannot"
 * one. Without the override those same items compute #14212B and #5A6B75 and
 * measure 16.4:1 and 5.5:1. The override was the entire bug: it was strictly
 * worse than not being here.
 *
 * Dropped rather than repinned to dark literals, because the tokens this file
 * never touched are the evidence. --gc-rf-head and --gc-rf-col-head were left
 * out of the original sweep, kept the widget's own light-ground defaults, and
 * render correctly on that page today (5.53:1 for the column headings). The
 * consistent state for this component on this brand is "not inverted at all",
 * not "inverted to a different set of darks".
 *
 * Nothing else on the site can regress from removing them. Crawling every
 * internal link on staging finds .gc-rf on exactly one page, /refund-policy/,
 * with exactly one instance, and without gc-rf--has-bg -- the class the widget
 * adds when its own full-bleed band is switched on. So it is transparent
 * everywhere it appears and always inherits that light ground. (/privacy-policy/
 * does not carry this widget at all, despite being reported alongside it.)
 *
 * The quote pair goes for a second, independent reason: --gc-rf-quote-bg is
 * #FFFFFF and this skin does not remap it, so lightening --gc-rf-quote-text
 * and --gc-rf-quote-name was painting light ink onto a white panel whatever
 * the page behind it was doing. That quote block is not rendered on
 * /refund-policy/, so it was never seen -- it would simply have arrived later.
 *
 * If that page's background is ever made dark -- another workstream owns it --
 * this widget's inks will need inverting again, and so will --gc-rf-head and
 * --gc-rf-col-head with them. That is a change to make when the ground moves
 * and can be measured, not one to leave standing while it is wrong.
 */

.gc-brand-genchem .gc-sc {
	--gc-sc-heading: var(--gc-heading-color) !important;
	--gc-sc-body: var(--gc-muted) !important;
	--gc-sc-item-text: var(--gc-muted) !important;
}

/* The label sits on the page; the field text is inside a white input and stays
   dark, which is why only one of the pair moves. */
.gc-brand-genchem .gc-cf1 {
	--gc-cf1-label: var(--gc-text-color) !important;
}

/* WooCommerce single/product copy, consumed from the wrap. */
.gc-brand-genchem .woocommerce-page-wrap {
	--gc-woo-heading: var(--gc-heading-color);
	--gc-woo-price: var(--gc-text-color);
	--gc-woo-text: var(--gc-muted);
}

/* gc-shop-archive.css declares its own --gc-ink and --gc-muted on .gc-shop,
   which shadows the brand's values for everything inside the shop. A component
   that scopes private copies of global token names can only be reached by
   restating them at the same depth. */
.gc-brand-genchem .gc-shop {
	--gc-ink: var(--gc-text-color);
	--gc-muted: #9FB4C2;
}

/* The quantity stepper on a product card.
 *
 * Its pill names --gc-white directly for the background, which this skin
 * deliberately leaves alone (see the top of the file), so it stayed a white
 * blob on the dark card. The ink is the worse half: the number inside is
 * drawn in --gc-ink, which the rule above correctly inverts to the light one
 * for everything in the shop, leaving #D6E4EF on #FFFFFF at 1.2:1 -- a
 * stepper whose count cannot be read at all. Measured on the live page; the
 * pairing has to move together, the same call made for --gc-woo-card.
 *
 * --gc-surface-2 rather than --gc-surface, so an inset control still reads as
 * a control against the card it sits on.
 *
 * --gc-line is restated on the pill itself rather than up on .gc-shop, even
 * though .gc-shop is where gc-shop-archive.css shadows it. That token also
 * draws every card's border, and moving it there would ring the whole grid in
 * a colour nobody asked for. A custom property declared on the element that
 * consumes it resolves for that element's own border and reaches nothing
 * else, which is exactly the blast radius this needs. */
.gc-brand-genchem .gc-shop__buy-form .quantity {
	--gc-line: #22475C;
	background: var(--gc-surface-2);
}

/* -------------------------------------------------------------------------
 * The WooCommerce palette
 *
 * --gc-woo-* is a COMPLETE light-page palette, emitted on :root by the
 * Customizer: #14212B headings, #5A6B75 body text, #14212B prices, #FFFFFF
 * cards, #F4F8FB surfaces, #E1E9EE lines. Until now this skin remapped
 * exactly one member of it, --gc-woo-bg, and left the other nine alone.
 *
 * So every WooCommerce surface kept the light palette while the page under it
 * went near-black, and the two failure directions from the block above both
 * appeared at once on the product page: the tab headings, spec terms and
 * price are drawn in --gc-woo-heading / --gc-woo-price and disappeared INTO
 * the page, while the review cards, the rating prompt and the quantity and
 * promo inputs are drawn on --gc-woo-card / --gc-woo-surface and turned into
 * white panels carrying this skin's light ink.
 *
 * Remapping the family rather than the selectors is what makes this small:
 * the theme pairs these tokens consistently -- a --gc-woo-card background is
 * always given --gc-woo-heading or --gc-woo-text on top of it -- so moving
 * both ends together keeps every pairing legible. An audit of woocommerce.css
 * turned up exactly one hardcoded colour in the whole file
 * (.gc-gallery__counter, white on a dark image overlay), which is why there
 * is almost nothing else to patch by hand.
 *
 * These are declared on :root and this rule sits on body, a descendant, so
 * the whole family is reachable from here.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem {
	--gc-woo-heading: var(--gc-ink);
	--gc-woo-text: var(--gc-text-color);
	--gc-woo-price: var(--gc-ink);

	--gc-woo-card: var(--gc-surface);
	--gc-woo-card-alt: var(--gc-surface-2);
	--gc-woo-surface: var(--gc-surface);
	--gc-woo-summary-bg: var(--gc-surface);
	--gc-woo-border: var(--gc-line);

	/* Used 31 times as a text colour against 4 as a gradient stop, so on a
	   dark ground it has to become the light one -- the same call --gc-ink
	   gets at the top of this file. It reads as "the deep blue for text on a
	   light card", and there are no light cards here any more. The four
	   gradients are small decorative chips (avatar circles, a progress fill),
	   none of them on a shop page; they stay blue, just lighter at the far
	   end. */
	--gc-blue-dark: #8CC6EA;
}

/* Surfaces that name --gc-white directly, so the remap above cannot reach
   them. --gc-white is deliberately left alone by this skin (see the top of
   the file), which is exactly why these need saying one at a time.
 *
 * The floating review cards are the product page's; the cookie banner is on
 * every page of both storefronts; the rest are the cart, checkout and account
 * pages, which carry the same pairing and would have arrived as the next
 * report.
 *
 * The banner is worth a word. Its buttons were already fixed by the remap
 * above -- the ghost button pairs --gc-woo-surface with --gc-ink, so both
 * ends moved together -- which left a white panel carrying invisible copy
 * with perfectly legible buttons sitting on it. Rendering the page is what
 * caught that; the token audit could not, because the panel is the one part
 * of the banner naming --gc-white, and it is emitted inline from
 * inc/site-options.php rather than from any stylesheet a CSS sweep reads. */
.gc-brand-genchem .gc-consent,
.gc-brand-genchem .gc-floatrev__card,
.gc-brand-genchem .woocommerce-checkout #payment div.payment_box,
body.gc-brand-genchem.woocommerce-account .gc-acct-tab.is-active,
body.gc-brand-genchem.woocommerce-account input.woocommerce-Input,
body.gc-brand-genchem.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.gc-brand-genchem.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--gc-surface);
}

/* The account inputs need their ink moved in the same breath as their surface.
 * Unlike every other element in the rule above, an input does not inherit the
 * page's colour: the UA sheet gives it its own `color: -internal-light-dark`,
 * which resolves to black here. Darkening the field alone took what the user
 * types from black-on-white to black on #16242F, 1.33:1 -- caught by typing
 * into the rendered field, not by reading the cascade. */
body.gc-brand-genchem.woocommerce-account input.woocommerce-Input {
	color: var(--gc-ink);
}

/* The four account selectors above are written as ONE compound body selector,
 * not as a descendant of .gc-brand-genchem, and that is load-bearing.
 *
 * WooCommerce puts `woocommerce-account` on the body element, and this skin's
 * `gc-brand-genchem` lands on the body element too. So the obvious
 * `.gc-brand-genchem .woocommerce-account ...` asks for an account element
 * INSIDE the brand element, and there is never one: querying that selector on
 * the live /my-account/ page returns 0 nodes, against 2 for the body-compound
 * form. All four shipped and none of them has ever matched anything. It is
 * the same trap woocommerce.css calls out where it builds the login card --
 * worth restating here, because this file cannot see that comment.
 *
 * .woocommerce-checkout above is genuinely a descendant selector and is left
 * alone: that class is on the checkout FORM as well as on body, so it matches.
 */

/* The logged-out login card.
 *
 * woocommerce.css gives the logged-out account wrapper `background:
 * var(--gc-white)` to make it a 400px card. --gc-white is left alone by this
 * skin, so the card stayed white while everything written on it went light:
 * the "Login" heading and the field labels at 1.14:1, "Remember me" at 2.15:1
 * and "Lost your password?" at 1.85:1. The whole form was unreadable.
 *
 * All three selectors are needed because the account page may render through
 * .entry-content, through an Elementor widget container, or as a direct child
 * of body depending on the page template -- woocommerce.css hedges the same
 * three ways for the same reason, and this has to match its shape to reach it.
 *
 * Measured after: 13.84:1 heading and labels, 8.57:1 the lost-password link,
 * 7.37:1 remember-me.
 */
body.gc-brand-genchem.woocommerce-account:not(.logged-in) .entry-content > .woocommerce,
body.gc-brand-genchem.woocommerce-account:not(.logged-in) .elementor-widget-container > .woocommerce,
body.gc-brand-genchem.woocommerce-account:not(.logged-in) > .woocommerce {
	background: var(--gc-surface);
}

/* The empty half of a star rating.
 *
 * These read var(--gc-woo-border), which is the one place that token is not
 * being used as a border: on a white card a pale line colour doubles nicely as
 * an unfilled star. Remapping --gc-woo-border to --gc-line above is right for
 * every actual border and wrong for exactly this, and it makes the unfilled
 * state WORSE than it was -- #E1E9EE on near-black was at least visible, and
 * #22475C is 1.6:1 against the card. A three-of-five rating would show three
 * stars floating with no "of five" behind them.
 *
 * #55707F is the lowest value clearing 3:1 -- the non-text contrast threshold
 * -- against both the card (3.0:1) and the page (4.0:1). Taking the minimum
 * keeps the state recessive, which is the point of an empty star: the filled
 * one is still twice as light, so the two never read as the same mark.
 *
 * The trailing-star rules carry three classes, so the overrides have to match
 * their shape rather than just naming the element.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem .gc-star.is-off,
.gc-brand-genchem .gc-floatrev__pip.is-off,
.gc-brand-genchem .gc-rprompt__star,
.gc-brand-genchem .gc-rprompt__star:hover ~ .gc-rprompt__star,
.gc-brand-genchem .gc-rprompt__star:focus-visible ~ .gc-rprompt__star {
	color: #55707F;
}

/* The rating chip on the gallery, and its hover panel.
 *
 * This one inverts the other way. --gc-rstar-bg is rgba(255,255,255,.94) and
 * stays that way on purpose: the chip floats over the product photograph, not
 * over the page, and product shots are cut out on white in both storefronts.
 * So the surface is correctly light here and it is the INK that has to go
 * back -- --gc-rstar-ink follows --gc-ink, which this skin inverted, leaving
 * a near-white "5.0" on a near-white chip at 1.1:1.
 *
 * Pinned to the same #14212B the Gencore storefront computes, so the chip is
 * identical on both brands, which is the right answer for a badge whose
 * background is a photograph rather than the theme.
 *
 * Only rendering the page found this: it is the one element whose correct
 * surface is neither the page nor a card, so no amount of reasoning about
 * page-ground tokens would have flagged it.
 * ---------------------------------------------------------------------- */
.gc-brand-genchem .gc-rstar {
	--gc-rstar-ink: #14212B;
}