/**
 * 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);
}

.gc-brand-genchem .site-header a,
.gc-brand-genchem .primary-navigation a {
	color: var(--gc-white);
}

.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);
	}
}