/* LumGem base: reset, design tokens, header/footer. Loaded on every page. */

:root {
	--lumgem-color-ink: #171c19;
	--lumgem-color-body: #4a4c48;
	--lumgem-color-muted: #77766f;
	--lumgem-color-line: #ded8ce;
	--lumgem-color-surface: #ffffff;
	--lumgem-color-surface-alt: #f7f4ee;
	--lumgem-color-accent: #b18a4a;
	--lumgem-color-accent-dark: #0c3b2e;
	--lumgem-color-success: #0c3b2e;
	--lumgem-color-danger: #a5433a;

	--lumgem-font-display: Georgia, 'Times New Roman', serif;
	--lumgem-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--lumgem-space-1: 4px;
	--lumgem-space-2: 8px;
	--lumgem-space-3: 12px;
	--lumgem-space-4: 16px;
	--lumgem-space-5: 24px;
	--lumgem-space-6: 32px;
	--lumgem-space-7: 48px;

	--lumgem-radius: 3px;
	--lumgem-container-max: 1280px;

	/* Breakpoints (documented; enforced via media queries below, not vars) */
	--bp-mobile-max: 599px;
	--bp-tablet-max: 1023px;
	--bp-desktop-min: 1024px;
}

.lumgem-scope,
.lumgem-scope * ,
.lumgem-scope *::before,
.lumgem-scope *::after {
	box-sizing: border-box;
}

.lumgem-scope {
	margin: 0;
	font-family: var(--lumgem-font-body);
	color: var(--lumgem-color-body);
	background: var(--lumgem-color-surface);
	overflow-x: hidden;
}

.lumgem-scope img {
	max-width: 100%;
	height: auto;
	display: block;
}

.lumgem-scope table {
	max-width: 100%;
}

.lumgem-scope a {
	color: inherit;
}

.lumgem-scope h1,
.lumgem-scope h2,
.lumgem-scope h3 {
	font-family: var(--lumgem-font-display);
	color: var(--lumgem-color-ink);
	font-weight: 400;
	margin: 0 0 var(--lumgem-space-4);
}

.lumgem-container {
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	padding: 0 var(--lumgem-space-5);
}

/* Announcement bar (sitewide, above header) */
.lumgem-announcement-bar {
	background: var(--lumgem-color-ink);
	color: #fff;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.02em;
	overflow: hidden;
}

.lumgem-announcement-bar__list {
	list-style: none;
	margin: 0;
	padding: var(--lumgem-space-2) var(--lumgem-space-4);
	display: flex;
	justify-content: center;
	gap: 0;
}

.lumgem-announcement-bar__item {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lumgem-announcement-bar__item + .lumgem-announcement-bar__item::before { content: '·'; padding: 0 12px; color: #d1b77d; }

/* Header — mobile and desktop use deliberately DIFFERENT layouts.
   Mobile (default, mobile-first): hamburger+search (left) / centered logo /
   account+cart (right), nav lives in the hamburger drawer.
   Desktop (>=1024px, see override at bottom of this section): logo + inline
   nav on the left, search/account/cart icons on the right — no hamburger,
   nav always visible. Do NOT make these look the same. */
.lumgem-header {
	border-bottom: 1px solid var(--lumgem-color-line);
	background: var(--lumgem-color-surface);
}

.lumgem-header__inner {
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	padding: var(--lumgem-space-3) var(--lumgem-space-5);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--lumgem-space-4);
}

.lumgem-header__mobile-left {
	display: flex;
	align-items: center;
	gap: var(--lumgem-space-3);
	justify-self: start;
}

.lumgem-header__brand-group {
	justify-self: center;
	display: flex;
	align-items: center;
	gap: var(--lumgem-space-6);
}

.lumgem-header__right {
	display: flex;
	align-items: center;
	gap: var(--lumgem-space-3);
	justify-self: end;
}

.lumgem-header__nav-desktop {
	display: none;
}

/* 3-class compound selector (.lumgem-scope + 2 element classes) so this
   reliably beats .lumgem-header__icon-btn's own `display: inline-flex`
   regardless of source order — that base rule was bumped to
   `.lumgem-scope .lumgem-header__icon-btn` (2 classes) to fix a black-square
   button-reset bug, which in turn meant this rule's OLD 2-class compound
   selector merely tied it (source order then let the base rule win again),
   re-introducing the exact mobile-header overflow this rule was originally
   written to fix — this button was silently visible on mobile again,
   contributing 44px + a gap to the header's width. */
.lumgem-scope .lumgem-header__icon-btn.lumgem-header__search-toggle--desktop {
	display: none;
}

.lumgem-header__logo {
	font-family: var(--lumgem-font-display);
	font-size: 22px;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--lumgem-color-ink);
	white-space: nowrap;
}

/* .lumgem-scope prefix (2 classes) beats components.css's generic
   `.lumgem-scope button` reset (1 class + 1 element, specificity (0,0,1,1))
   — without it, the hamburger/search <button>s (menu-toggle and both
   search-toggle instances) silently got that reset's dark
   background/border + white icon color instead of this rule's `background:
   none`, rendering as solid black squares. The <a>-based icon buttons
   (account/wishlist/cart) were never affected, since that reset only
   targets <button> elements — which is exactly why only 2 of the 5 icons
   showed the bug. Same root cause/fix pattern as the accordion-toggle and
   search-toggle--desktop specificity fixes elsewhere in this project. */
.lumgem-scope .lumgem-header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* >=44px tap target on touch devices, per mobile accessibility bar. */
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	padding: 0;
	color: var(--lumgem-color-ink);
	text-decoration: none;
}

/* One shared inline-SVG icon set (see lumgem_icon_svg() in
   inc/template-tags.php) replaces what used to be five separate CSS-shape
   constructions (border-circles, ::before/::after bars) — flagged by a
   design audit as inconsistent proportions/line-weight and not a real icon
   system ("空心圆、U形购物袋" etc.). Every icon now shares one stroke-width
   (set on the SVG itself) and one wrapper size here, so they read as one
   consistent set regardless of which glyph is used. */
.lumgem-icon-hamburger,
.lumgem-icon-search,
.lumgem-icon-account,
.lumgem-icon-wishlist,
.lumgem-icon-cart,
.lumgem-icon-globe {
	display: block;
	width: 19px;
	height: 19px;
}

.lumgem-icon-hamburger svg,
.lumgem-icon-search svg,
.lumgem-icon-account svg,
.lumgem-icon-wishlist svg,
.lumgem-icon-cart svg,
.lumgem-icon-globe svg {
	width: 100%;
	height: 100%;
}

/* Wishlist heart — desktop header only (see the media query below); a
   lightweight client-side (localStorage) toggle, not a full account-linked
   wishlist system, which remains backlog per docs/prompt.md.
   `.lumgem-scope .lumgem-header__icon-btn.lumgem-header__wishlist` (3
   classes) — needed since this element also carries `.lumgem-header__icon-btn`,
   whose own base rule is now `.lumgem-scope .lumgem-header__icon-btn` (2
   classes, bumped to fix the black-square button-reset bug); a plain
   1-class `.lumgem-header__wishlist{display:none}` would no longer
   reliably beat that 2-class base, which is exactly what silently showed
   the wishlist icon on mobile again after that fix. */
.lumgem-scope .lumgem-header__icon-btn.lumgem-header__wishlist {
	display: none;
}

@media (min-width: 1024px) {
	.lumgem-scope .lumgem-header__icon-btn.lumgem-header__wishlist {
		display: inline-flex;
	}
}

/* Filled heart once saved — the SAME outline path, just with its fill
   switched on (see the matching rule for the inline buy-box toggle in
   single-product.css), rather than swapping in a second icon. */
.lumgem-header__wishlist.is-active .lumgem-icon-wishlist svg {
	fill: currentColor;
}

.lumgem-header__wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--lumgem-color-accent);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.lumgem-header__wishlist-count:empty,
.lumgem-header__wishlist-count[data-count="0"] {
	display: none;
}

/* Globe/language icon — desktop only, decorative placeholder for now
   (no multilingual/multicurrency switcher built yet, see docs/CLAUDE_REDEVELOPMENT_PLAN.md §"后台中文，前台可以多语言+币种").
   3-class selector — same reason as .lumgem-header__wishlist above. */
.lumgem-scope .lumgem-header__icon-btn.lumgem-header__locale {
	display: none;
	cursor: default;
}

@media (min-width: 1024px) {
	.lumgem-scope .lumgem-header__icon-btn.lumgem-header__locale {
		display: inline-flex;
		gap: 2px;
	}
}

/* Small chevron paired with the globe glyph so this reads as a
   region/language switcher entry point rather than a bare unexplained
   globe — still visual-only until the switcher itself is built. */
.lumgem-header__locale-chevron {
	display: block;
	width: 9px;
	height: 9px;
	color: var(--lumgem-color-muted);
}

.lumgem-header__locale-chevron svg {
	width: 100%;
	height: 100%;
}

.lumgem-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--lumgem-color-accent);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

/* Mobile header — fits within a narrow viewport without clipping the cart
   icon. The grid's flanking columns default to `1fr` with an implicit
   min-width of `auto` (their content's natural size), NOT 0 — so two 44px
   icon buttons + their gap on each side, plus the centered logo's own
   intrinsic width, plus padding/column-gaps, could add up to MORE than a
   390px viewport and overflow rather than shrink. minmax(0, 1fr) lets the
   flanking columns actually shrink to fit; the padding/gap reductions below
   additionally free up real room for the logo so it doesn't have to. Tap
   targets stay 44px (accessibility floor, never reduced) — only the
   spacing AROUND them is tightened. This is a sitewide header fix, not
   product-page-specific, since header.php/base.css load on every page. */
@media (max-width: 1023px) {
	.lumgem-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: var(--lumgem-space-2);
		padding-left: var(--lumgem-space-4);
		padding-right: var(--lumgem-space-4);
	}

	.lumgem-header__mobile-left,
	.lumgem-header__right {
		gap: var(--lumgem-space-2);
	}
}

/* Gift Finder — a wide-desktop-only entry point (>=1200px, a full step
   above the general >=1024px desktop breakpoint everything else in this
   header uses) so it never competes for space with the nav/icons at
   1024-1199px or affects the mobile header at all. Sits before the Search
   icon in .lumgem-header__right (see header.php); reference sizing only
   (~100-112px wide, 44px tall — within the requested 42-46px range), not
   Jeulia's actual asset — icon is LumGem's own inline SVG. */
.lumgem-header__gift-finder {
	display: none;
}

@media (min-width: 1200px) {
	.lumgem-header__gift-finder {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 44px;
		min-width: 100px;
		max-width: 112px;
		box-sizing: border-box;
		padding: 0 10px;
		border: 1px solid var(--lumgem-color-ink);
		border-radius: 999px;
		background: #fff;
		color: var(--lumgem-color-ink);
		text-decoration: none;
	}

	.lumgem-header__gift-finder:hover {
		border-color: var(--lumgem-color-accent-dark);
		color: var(--lumgem-color-accent-dark);
	}

	.lumgem-header__gift-finder:focus-visible {
		outline: 2px solid var(--lumgem-color-accent);
		outline-offset: 2px;
	}

	.lumgem-header__gift-finder-icon {
		display: inline-flex;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	.lumgem-header__gift-finder-icon svg {
		width: 100%;
		height: 100%;
	}

	.lumgem-header__gift-finder-text {
		display: flex;
		flex-direction: column;
		line-height: 1.15;
		font-size: 11px;
		font-weight: 600;
		white-space: nowrap;
	}
}

/* Desktop header override — deliberately a different layout than mobile:
   logo + inline nav on the left, icons on the right, no hamburger. */
@media (min-width: 1024px) {
	.lumgem-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lumgem-header__mobile-left {
		display: none;
	}

	.lumgem-header__brand-group {
		justify-self: auto;
	}

	.lumgem-header__nav-desktop {
		display: block;
	}

	.lumgem-header__nav-desktop ul {
		display: flex;
		align-items: center;
		gap: var(--lumgem-space-5);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.lumgem-header__nav-desktop a {
		text-decoration: none;
		font-size: 14px;
		color: var(--lumgem-color-ink);
	}

	.lumgem-scope .lumgem-header__icon-btn.lumgem-header__search-toggle--desktop {
		display: inline-flex;
	}

	.lumgem-mobile-nav,
	.lumgem-mobile-nav-overlay {
		display: none !important;
	}
}

/* Background-scroll lock while the mobile category drawer or search panel
   is open — header.js adds/removes this class (never both open at once,
   they're mutually exclusive by design). Plain `overflow:hidden` rather
   than the position:fixed-body trick: already verified elsewhere in this
   project (the Add-to-Cart success modal uses the same pattern) not to
   reset or otherwise disturb the page's own scroll position. */
.lumgem-scroll-locked {
	overflow: hidden;
}

/*
 * Mobile category drawer (hamburger-triggered, mobile/tablet only — hidden
 * on desktop by the override above). `top` is set as an inline style by
 * header.js at open time, to the real Header's current bottom edge
 * (getBoundingClientRect().bottom) — NOT a hardcoded pixel value, and not
 * `inset:0` — so the drawer genuinely starts below the sticky
 * announcement+header stack instead of covering it (the header, and its
 * own hamburger button, stay visible/clickable the whole time the drawer
 * is open, satisfying "clicking the hamburger again closes it"). A
 * semi-transparent backdrop (.lumgem-mobile-nav-overlay, same `top`
 * treatment) fills the remaining width so there's a genuine "click outside
 * to close" target, not just a z-index trick.
 */
.lumgem-mobile-nav-overlay {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 94;
	background: rgba(0, 0, 0, 0.4);
}

.lumgem-mobile-nav-overlay[hidden] {
	display: none;
}

.lumgem-mobile-nav {
	position: fixed;
	left: 0;
	bottom: 0;
	top: 0;
	z-index: 95;
	width: 85%;
	max-width: 360px;
	background: var(--lumgem-color-surface);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.lumgem-mobile-nav[hidden] {
	display: none;
}

.lumgem-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: var(--lumgem-space-4) var(--lumgem-space-5);
	border-bottom: 1px solid var(--lumgem-color-line);
	flex-shrink: 0;
}

.lumgem-mobile-nav__logo {
	font-family: var(--lumgem-font-display);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.lumgem-mobile-nav__close {
	position: absolute;
	right: var(--lumgem-space-2);
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: var(--lumgem-color-ink);
	cursor: pointer;
}

.lumgem-mobile-nav__body {
	padding: var(--lumgem-space-5);
	overflow-y: auto;
	flex: 1 1 auto;
}

.lumgem-mobile-nav__categories {
	display: flex;
	flex-direction: column;
	gap: var(--lumgem-space-1);
	flex: 0 0 40%;
	border-right: 1px solid var(--lumgem-color-line);
	padding-right: var(--lumgem-space-3);
}

.lumgem-mobile-nav__category {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--lumgem-space-2) var(--lumgem-space-2);
	background: none;
	border: none;
	border-radius: var(--lumgem-radius);
	text-align: left;
	text-decoration: none;
	font-size: 14px;
	color: var(--lumgem-color-muted);
	cursor: pointer;
}

.lumgem-mobile-nav__category.is-active {
	background: var(--lumgem-color-surface-alt);
	color: var(--lumgem-color-ink);
	font-weight: 600;
}

.lumgem-mobile-nav__category--all {
	margin-top: var(--lumgem-space-2);
	border-top: 1px solid var(--lumgem-color-line);
	padding-top: var(--lumgem-space-3);
}

/* categories-row is the 2-column flex layout (categories 40% + panels 60%);
   .lumgem-mobile-nav__body itself stays normal block flow so
   .lumgem-mobile-nav__menu (the wp_nav_menu fallback) simply stacks full-width
   below it, rather than becoming a third row-flex item. */
.lumgem-mobile-nav__categories-row {
	display: flex;
	gap: var(--lumgem-space-3);
}

.lumgem-mobile-nav__panels {
	flex: 1 1 60%;
	min-width: 0;
}

.lumgem-mobile-nav__panel {
	display: flex;
	flex-direction: column;
	gap: var(--lumgem-space-2);
	text-decoration: none;
	color: var(--lumgem-color-ink);
}

/* The [hidden] attribute's built-in UA-stylesheet `display:none` is
   otherwise overridden by the `display:flex` above (an explicit `display`
   declaration always beats the UA default for the SAME element, hidden
   attribute or not) — without this, every non-active category panel
   rendered anyway, stacked, instead of only the active one showing. */
.lumgem-mobile-nav__panel[hidden] {
	display: none;
}

.lumgem-mobile-nav__panel-image {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--lumgem-radius);
	overflow: hidden;
	background: var(--lumgem-color-surface-alt);
}

.lumgem-mobile-nav__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lumgem-mobile-nav__panel-label {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.lumgem-mobile-nav__utility-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--lumgem-space-3);
	color: var(--lumgem-color-ink);
	font-size: 14px;
	text-decoration: none;
}

.lumgem-mobile-nav__menu {
	margin-top: var(--lumgem-space-5);
	padding-top: var(--lumgem-space-4);
	border-top: 1px solid var(--lumgem-color-line);
}

.lumgem-mobile-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lumgem-space-4);
}

.lumgem-mobile-nav__menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	font-size: 16px;
}

.lumgem-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--lumgem-color-surface);
	border-bottom: 1px solid var(--lumgem-color-line);
	padding: var(--lumgem-space-4) var(--lumgem-space-5);
}

.lumgem-search-panel[hidden] {
	display: none;
}

.lumgem-search-panel input[type="search"] {
	width: 100%;
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	display: block;
	padding: 10px 12px;
	border: 1px solid var(--lumgem-color-line);
	border-radius: var(--lumgem-radius);
}

/* Footer */
.lumgem-footer {
	border-top: 1px solid var(--lumgem-color-line);
	background: var(--lumgem-color-surface-alt);
	margin-top: var(--lumgem-space-7);
}

.lumgem-footer__inner {
	max-width: var(--lumgem-container-max);
	margin: 0 auto;
	padding: var(--lumgem-space-6) var(--lumgem-space-5);
	font-size: 13px;
	color: var(--lumgem-color-muted);
}

.lumgem-footer__nav ul {
	display: flex;
	gap: var(--lumgem-space-4);
	list-style: none;
	margin: var(--lumgem-space-4) 0;
	padding: 0;
	flex-wrap: wrap;
}

.lumgem-footer__nav a {
	text-decoration: none;
}

/* Phase-one storefront shell: centered brand row plus a dedicated desktop
   category row. The existing accessible markup remains shared with mobile. */
.lumgem-announcement-bar {
	background: #063c2f;
	letter-spacing: .08em;
}

@media (min-width: 1024px) {
	.lumgem-header {
		position: relative;
		padding-bottom: 47px;
	}

	.lumgem-header__inner {
		position: relative;
		min-height: 72px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.lumgem-header__brand-group {
		flex: 1 1 auto;
		justify-content: center;
	}

	.lumgem-header__logo {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		transform: translate(-50%, -50%);
		font-size: 34px;
		letter-spacing: .16em;
	}

	.lumgem-header__nav-desktop {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 48px;
		border-top: 1px solid var(--lumgem-color-line);
		background: #fff;
		z-index: 5;
	}

	.lumgem-header__nav-desktop ul {
		height: 100%;
		justify-content: center;
		gap: clamp(24px, 3vw, 42px);
		padding: 0 18px;
		white-space: nowrap;
	}

	.lumgem-header__nav-desktop a {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 2px;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .055em;
		text-transform: uppercase;
	}

	.lumgem-header__nav-desktop a::after {
		content: '';
		position: absolute;
		left: 2px;
		right: 2px;
		bottom: 7px;
		height: 1px;
		background: var(--lumgem-color-accent-dark);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform .2s ease;
	}

	.lumgem-header__nav-desktop a:hover::after,
	.lumgem-header__nav-desktop a:focus-visible::after {
		transform: scaleX(1);
	}

	.lumgem-scope .lumgem-header__icon-btn.lumgem-header__search-toggle--desktop {
		display: inline-flex;
		position: absolute;
		left: 20px;
	}

	.lumgem-header__gift-finder,
	.lumgem-scope .lumgem-header__icon-btn.lumgem-header__locale {
		display: none;
	}
}

/* Knowledge strip, newsletter and footer are sitewide so their styling lives
   in base.css rather than the front-page-only stylesheet. */
.lumgem-footer-knowledge {
	background: linear-gradient(120deg, #063b2e, #07513d);
	color: #fff;
	padding: 46px 0;
	overflow-x: hidden;
}

.lumgem-footer-knowledge__grid {
	display: grid;
	grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr);
	gap: 42px;
	align-items: center;
}

.lumgem-footer-knowledge__intro h2,
.lumgem-footer-knowledge__intro a {
	color: #fff;
}

.lumgem-footer-knowledge__intro h2 {
	font-size: 28px;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.lumgem-footer-knowledge__intro p {
	max-width: 280px;
	font-size: 14px;
	line-height: 1.6;
}

.lumgem-footer-knowledge__intro a {
	display: inline-block;
	margin-top: 13px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-decoration: none;
}

.lumgem-footer-knowledge__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.lumgem-footer-knowledge-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	color: var(--lumgem-color-ink);
	text-decoration: none;
	border-radius: var(--lumgem-radius);
	overflow: hidden;
}

.lumgem-footer-knowledge-card__image {
	aspect-ratio: 1.9;
	overflow: hidden;
}

.lumgem-footer-knowledge-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.lumgem-footer-knowledge-card:hover img { transform: scale(1.03); }
.lumgem-footer-knowledge-card strong { padding: 12px 13px 4px; font-family: var(--lumgem-font-display); font-weight: 400; }
.lumgem-footer-knowledge-card > span:last-child { padding: 0 13px 14px; font-size: 11px; line-height: 1.45; color: var(--lumgem-color-body); }

.lumgem-footer-newsletter {
	background: #f8f5ee;
	border-bottom: 1px solid var(--lumgem-color-line);
}

.lumgem-footer-newsletter__inner {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(360px, .9fr);
	gap: 38px;
	align-items: center;
	min-height: 92px;
}

.lumgem-footer-newsletter__copy { display: flex; align-items: center; gap: 16px; }
.lumgem-footer-newsletter__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--lumgem-color-accent); border-radius: 50%; color: var(--lumgem-color-accent); font-size: 19px; }
.lumgem-footer-newsletter h2 { margin: 0 0 3px; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.lumgem-footer-newsletter p { margin: 0; font-size: 12px; color: var(--lumgem-color-muted); }
.lumgem-home-newsletter__form { display: flex; margin: 0; }
.lumgem-home-newsletter__form input { min-width: 0; flex: 1; height: 42px; padding: 0 14px; border: 1px solid var(--lumgem-color-line); background: #fff; }
.lumgem-home-newsletter__form button { min-width: 126px; border: 0; background: #063c2f; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; }

.lumgem-footer {
	margin-top: 0;
	border: 0;
	background: #063c2f;
	color: rgba(255,255,255,.78);
}

.lumgem-footer__inner {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(48px, 7vw, 100px);
	padding: 50px var(--lumgem-space-5) 38px;
	font-size: 13px;
	color: inherit;
}

.lumgem-footer__logo { display: inline-block; color: #fff; font-family: var(--lumgem-font-display); font-size: 26px; letter-spacing: .12em; text-decoration: none; }
.lumgem-footer__brand p { max-width: 220px; line-height: 1.55; }
.lumgem-footer__socials { display: flex; gap: 10px; min-height: 28px; margin-top: 20px; }
.lumgem-footer__socials a { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; text-decoration: none; font-size: 11px; }
.lumgem-footer__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.lumgem-footer-group { margin: 0; }
.lumgem-footer-group summary { list-style: none; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: default; }
.lumgem-footer-group summary::-webkit-details-marker { display: none; }
.lumgem-footer-group__links { display: block !important; margin: 16px 0 0 !important; }
.lumgem-footer-group__links li { margin: 0 0 9px; }
.lumgem-footer__nav a { color: rgba(255,255,255,.76); font-size: 12px; }
.lumgem-footer__nav a:hover { color: #fff; }
.lumgem-footer__bottom { border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; padding-bottom: 20px; text-align: center; font-size: 11px; color: rgba(255,255,255,.62); }
.lumgem-footer__bottom p { margin: 0; }

/* Unified branded placeholder and Journal shell. */
.lumgem-placeholder,
.lumgem-journal {
	padding: clamp(72px, 10vw, 140px) 0;
	background: linear-gradient(150deg, #f7f4ee 0%, #fff 52%, #edf3ef 100%);
}
.lumgem-placeholder__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.lumgem-placeholder__eyebrow { color: var(--lumgem-color-accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.lumgem-placeholder h1, .lumgem-journal h1 { font-size: clamp(38px, 5vw, 68px); }
.lumgem-placeholder__copy { font-size: 17px; line-height: 1.7; }
.lumgem-placeholder__actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.lumgem-journal__hero { margin-bottom: 48px; text-align: center; }
.lumgem-journal__hero > p:last-child { max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.65; }
.lumgem-journal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.lumgem-journal-card { display: block; padding: 24px; border: 1px solid var(--lumgem-color-line); background: #fff; text-decoration: none; }
.lumgem-journal-card h2 { font-size: 24px; }
.lumgem-journal-card p { margin-bottom: 0; color: var(--lumgem-color-muted); font-size: 14px; line-height: 1.6; }
.lumgem-journal-entry { padding: clamp(64px, 9vw, 120px) 0; }
.lumgem-journal-entry__inner { max-width: 820px; }
.lumgem-journal-entry__inner h1 { font-size: clamp(38px, 5vw, 62px); }
.lumgem-journal-entry__content { font-size: 17px; line-height: 1.8; }

@media (max-width: 1023px) {
	.lumgem-footer-knowledge__grid { grid-template-columns: 1fr; gap: 28px; }
	.lumgem-footer-knowledge__intro { text-align: center; }
	.lumgem-footer-knowledge__intro p { margin-left: auto; margin-right: auto; }
	.lumgem-footer-newsletter__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
	.lumgem-footer__inner { grid-template-columns: 1fr; gap: 30px; }
	.lumgem-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.lumgem-announcement-bar__item:first-child { display: none; }
	.lumgem-announcement-bar__item:nth-child(2)::before { display: none; }
	.lumgem-announcement-bar__list { font-size: 9px; letter-spacing: .03em; }
	.lumgem-container { padding-left: 18px; padding-right: 18px; }
	.lumgem-footer-knowledge { padding: 38px 0; }
	.lumgem-footer-knowledge__intro { text-align: left; }
	.lumgem-footer-knowledge__intro p { margin-left: 0; }
	.lumgem-footer-knowledge__cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: 0; padding-right: 0; }
	.lumgem-footer-knowledge__cards::-webkit-scrollbar { display: none; }
	.lumgem-footer-knowledge-card { flex: 0 0 100%; scroll-snap-align: start; }
	.lumgem-footer-newsletter__inner { display: block; }
	.lumgem-footer-newsletter__copy { margin-bottom: 18px; }
	.lumgem-footer-newsletter__copy h2 { font-size: 15px; }
	.lumgem-home-newsletter__form { display: grid; grid-template-columns: 1fr 90px; }
	.lumgem-home-newsletter__form button { min-width: 0; }
	.lumgem-footer__inner { padding-top: 38px; padding-bottom: 20px; }
	.lumgem-footer__brand { text-align: center; }
	.lumgem-footer__brand p { margin-left: auto; margin-right: auto; }
	.lumgem-footer__socials { justify-content: center; }
	.lumgem-footer__nav { display: block; }
	.lumgem-footer-group { border-top: 1px solid rgba(255,255,255,.2); }
	.lumgem-footer-group:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
	.lumgem-footer-group summary { position: relative; padding: 16px 30px 16px 0; cursor: pointer; }
	.lumgem-footer-group summary::after { content: '+'; position: absolute; right: 2px; top: 11px; color: #fff; font-size: 20px; font-weight: 300; }
	.lumgem-footer-group[open] summary::after { content: '−'; }
	.lumgem-footer-group__links { display: none !important; margin: 0 0 16px !important; }
	.lumgem-footer-group[open] .lumgem-footer-group__links { display: block !important; }
	.lumgem-placeholder__actions { flex-direction: column; align-items: stretch; }
	.lumgem-journal__grid { grid-template-columns: 1fr; }
}