/**
 * Celsyn 360 Liquid — edge-to-edge mobile bottom navigation.
 * 2026-10-04 redesign: a clean, full-width, opaque white bar — explicitly
 * NOT the floating glass pill/capsule this replaces, and no oversized
 * circular active state. Fixed, light-mode colors regardless of which
 * [data-celsyn-env] section is scrolled behind it — this bar is always
 * white, by design, unlike the adaptive glass header.
 */

#celsyn-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: var( --z-mobile-dock );
	background: var( --celsyn-paper );
	border-top: 1px solid rgb( var( --celsyn-ink-rgb ) / 0.08 );
	box-shadow: 0 -2px 16px rgb( var( --celsyn-ink-rgb ) / 0.06 );
	padding-bottom: env( safe-area-inset-bottom, 0px );
	display: none;
}
@media ( max-width: 780px ) {
	#celsyn-dock { display: block; }
}

#celsyn-dock .celsyn-dock__bar {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
}

#celsyn-dock .celsyn-dock__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 58px;
	text-decoration: none;
	color: var( --celsyn-warm-grey );
	-webkit-tap-highlight-color: transparent;
}
#celsyn-dock .celsyn-dock__item:active { opacity: 0.6; }
#celsyn-dock .celsyn-dock__item svg { width: 22px; height: 22px; }
#celsyn-dock .celsyn-dock__item-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Active state — restrained: blue icon/label + a thin top indicator bar,
   never a filled circle/pill. */
#celsyn-dock .celsyn-dock__item[aria-current="page"] { color: var( --celsyn-blue ); }
#celsyn-dock .celsyn-dock__item[aria-current="page"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var( --celsyn-blue );
}

#celsyn-dock .celsyn-dock__cart-count {
	position: absolute;
	top: 2px;
	right: calc( 50% - 22px );
	min-width: 15px;
	height: 15px;
	padding-inline: 3px;
	border-radius: var( --radius-pill );
	background: var( --celsyn-blue );
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

/* Global clearance so the fixed bar never covers page content (footer,
   forms, Add to Cart, Track Order, Account, Lab Results controls). */
@media ( max-width: 780px ) {
	body { padding-bottom: calc( 58px + env( safe-area-inset-bottom, 0px ) ); }
	/* Product pages can also show the sticky purchase bar above this nav —
	   reserve its height too so related products / tabs / footer are never
	   hidden under either fixed surface. */
	body.single-product { padding-bottom: calc( 58px + 64px + env( safe-area-inset-bottom, 0px ) ); }
}

@media ( prefers-reduced-motion: reduce ) {
	#celsyn-dock .celsyn-dock__item:active { opacity: 1; }
}