/* ==========================================================================
   Certified Bling — Liquid Glass (Phase 1)

   An interaction-surface language, not a page skin. Use ONLY for content that
   genuinely floats above other content:
     header/navigation · mobile menu & drawers · filter bar (mobile) ·
     configurator controls · AI Concierge trigger + conversation surface ·
     modals · sticky mobile actions (e.g. "Build Yours")

   Do NOT wrap: product grids, ordinary content sections, cards, footer
   columns. A product card or a homepage section is never glass.
   ========================================================================== */

.cb-glass {
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, var(--glass-shadow);
	color: var(--cb-white);
}

.cb-glass--strong { background: var(--glass-bg-strong); }

/* Flat variant for a bar spanning full width (header) — no radius, glass
   only on the bottom edge. */
.cb-glass--bar {
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--glass-border);
	box-shadow: none;
}

/* Fallback for browsers without backdrop-filter, and the explicit
   prefers-reduced-transparency case — a solid surface, never invisible. */
@supports not (backdrop-filter: blur(1px)) {
	.cb-glass { background: color-mix(in srgb, var(--cb-ink) 92%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
	.cb-glass, .cb-glass--bar {
		background: var(--cb-ink);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* ---- Glass scrim — the dimming layer behind a drawer/modal ----------- */
.cb-glass-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--cb-z-overlay);
	background: color-mix(in srgb, var(--cb-black) 55%, transparent);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cb-transition);
}
.cb-glass-scrim.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .cb-glass-scrim { transition: none; } }

/* ---- Modal / drawer / bottom-sheet shell ----------------------------- */
.cb-glass-panel {
	background: var(--glass-bg-strong);
	backdrop-filter: blur(24px) saturate(150%);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	color: var(--cb-white);
}
.cb-glass-panel--sheet { border-radius: var(--glass-radius) var(--glass-radius) 0 0; }
.cb-glass-panel--drawer { border-radius: 0; border-right: 0; border-top: 0; border-bottom: 0; }
.cb-glass-panel--modal { border-radius: var(--glass-radius); }

/* ---- AI Concierge floating trigger ------------------------------------ */
.cb-concierge-trigger {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: clamp(1rem, 2vw, 2rem);
	z-index: var(--cb-z-concierge);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.2rem;
	/* Suisse Int'l per the Phase 1 typography lock — this trigger is a
	   clickable action (opens the AI Concierge), not a passive label. */
	font-family: var(--cb-font-body);
	font-weight: 500;
	font-size: var(--cb-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cb-concierge-trigger:hover { background: var(--glass-bg-strong); text-decoration: none; }
.cb-concierge-trigger__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--cb-gold);
	box-shadow: 0 0 8px var(--cb-gold);
}
@media (prefers-reduced-motion: reduce) { .cb-concierge-trigger { transition: none; } }