/**
 * Celsyn 360 Liquid — header.
 * Transparent over the hero at the top of the page; once scrolling begins,
 * JS (header-scroll.js) adds .is-condensed to #celsyn-header, which is the
 * ONLY thing that triggers the glass surface + condensed height here — pure
 * CSS transition, no JS-driven animation loop.
 */

/* 2026-10-04 desktop redesign: the glass surface (background/border/
   shadow/blur) now lives on #celsyn-header itself — a flat, full-width
   strip — instead of on .celsyn-header__bar, which used to carry its own
   inset max-width AND border-radius: var(--radius-pill), rendering as a
   large floating rounded capsule inset from both edges — heavier/more
   "UI-capsule" than the mature/premium direction wanted. .celsyn-header__
   bar is now purely a layout row (flex + max-width centering for the
   logo/nav/actions content), no surface styling of its own — "contained
   max-width inner layout, flat outer shell" falls out of that for free,
   and mobile (which already wants an edge-to-edge flat header — the same
   shape this now is everywhere by default) no longer needs its own
   separate flattening rules, just its safe-area inset and nav/actions
   hiding, below. */
#celsyn-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: var( --z-header );
	background: transparent;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background-color var( --dur-mid ) var( --ease-glass ),
	            border-color var( --dur-mid ) var( --ease-glass ),
	            box-shadow var( --dur-mid ) var( --ease-glass ),
	            backdrop-filter var( --dur-mid ) var( --ease-glass );
}
/* Top-of-page state assumes a dark hero behind it — paper logo/text. Pages
   with no dark hero (most inner pages) start already-condensed via
   .celsyn-header--no-hero on the body, so text is never unreadable. */
#celsyn-header { color: var( --celsyn-paper ); }
body.celsyn-header--no-hero #celsyn-header,
#celsyn-header.is-condensed {
	background: var( --glass-bg-strong );
	border-bottom-color: var( --glass-border );
	box-shadow: var( --glass-shadow-sm );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.7 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.7 );
	color: var( --glass-text );
}
#celsyn-header .celsyn-header__bar {
	max-width: var( --container-xl );
	margin-inline: auto;
	padding-inline: var( --space-5 );
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-4 );
	transition: height var( --dur-mid ) var( --ease-glass );
}
body.celsyn-header--no-hero #celsyn-header .celsyn-header__bar,
#celsyn-header.is-condensed .celsyn-header__bar {
	height: 56px;
}

#celsyn-header .celsyn-header__logo {
	display: flex;
	align-items: center;
	height: 100%;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: var( --text-md );
	letter-spacing: -0.01em;
	text-decoration: none;
	color: inherit;
}
#celsyn-header .celsyn-header__logo span { color: var( --celsyn-cyan ); margin-left: 0.3em; }
#celsyn-header.is-condensed .celsyn-header__logo span,
body.celsyn-header--no-hero #celsyn-header .celsyn-header__logo span { color: var( --celsyn-blue ); }

#celsyn-header .celsyn-header__nav {
	display: flex;
	align-items: center;
	gap: var( --space-6 );
	list-style: none;
	margin: 0;
	padding: 0;
}
#celsyn-header .celsyn-header__nav a {
	text-decoration: none;
	font-size: var( --text-sm );
	font-weight: 500;
	color: inherit;
	opacity: 0.86;
	transition: opacity var( --dur-fast ) var( --ease-standard );
}
#celsyn-header .celsyn-header__nav a:hover { opacity: 1; }

#celsyn-header .celsyn-header__actions {
	display: flex;
	align-items: center;
	gap: var( --space-3 );
}
#celsyn-header .celsyn-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
	transition: background-color var( --dur-fast ) var( --ease-standard );
}
#celsyn-header .celsyn-header__icon-btn:hover { background: rgb( 128 128 128 / 0.14 ); }
#celsyn-header .celsyn-header__icon-btn svg { width: 20px; height: 20px; }
#celsyn-header .celsyn-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding-inline: 3px;
	border-radius: var( --radius-pill );
	background: var( --celsyn-blue );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Push page content below the fixed header on pages that start condensed
   (no transparent-hero overlap). Hero pages intentionally let the header
   float over the hero image instead.
   2026-10-04 fix: was scoped to #celsyn-smart-content, a wrapper only this
   theme's own custom page-*.php templates render (Research, FAQ, Lab
   Results, Contact) — Shop, every PDP, My Account, and the Skincare System
   archive all use Blocksy's/WooCommerce's own native templates and never
   had that element at all, so the padding silently never applied there and
   their heading sat right under the fixed header. body.celsyn-header--
   no-hero is present on every one of those pages regardless of template,
   so padding the body itself fixes all of them in one place — fixed-
   position children (the header) ignore body padding, so it only pushes
   down normal page content, same visual result as before on the pages
   that already worked. */
body.celsyn-header--no-hero { padding-top: 88px; }

@media ( max-width: 780px ) {
	#celsyn-header .celsyn-header__nav { display: none; }
	/* 2026-10-04: collapsed to ONE rule on the whole .celsyn-header__actions
	   wrapper (search + account + cart together) instead of three separate
	   ID/class selectors — Home/Shop/Verify/Cart/Account all live in the
	   bottom nav on mobile, so none of these three belong in the top bar
	   there at all. Hiding the wrapper itself, not each child individually,
	   removes every one of them (and any future icon added inside it) from
	   layout in a single place, so there's exactly one rule to verify
	   instead of three that all have to stay in sync. */
	#celsyn-header .celsyn-header__actions { display: none; }
	#celsyn-header .celsyn-header__bar { position: relative; justify-content: center; }
	#celsyn-header .celsyn-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate( -50%, -50% );
	}

	/* Mobile: the bar's own inline margin/max-width (desktop's "contained
	   max-width inner row" inside the flat full-width header) isn't right
	   on a phone — flush to both edges instead, with a safe-area-aware top
	   inset. The desktop pill/radius this used to also correct for is gone
	   at the source now (#celsyn-header never sets a border-radius), so
	   mobile no longer needs its own override for that. */
	#celsyn-header { padding-top: env( safe-area-inset-top, 0px ); }
	#celsyn-header .celsyn-header__bar {
		max-width: none;
		margin-inline: 0;
		padding-inline: var( --space-4 );
		height: 56px;
	}
	body.celsyn-header--no-hero #celsyn-header,
	#celsyn-header.is-condensed {
		border-bottom: 1px solid rgb( var( --celsyn-ink-rgb ) / 0.08 );
		box-shadow: none;
	}
	/* Content clearance below the now safe-area-aware mobile header. */
	body.celsyn-header--no-hero { padding-top: calc( 56px + env( safe-area-inset-top, 0px ) + 8px ); }
}