/**
 * Envelope-switch banner (#192) — a sticky "design in hand" bar shown on
 * shop / product pages while switch mode is active. Theme tokens; the darker
 * teal keeps white text legible (the base primary is only ~2.9:1).
 */

/* Clears the fixed WordPress admin bar via the theme's --lj-admin-bar-h,
 * which carries core's --wp-admin--admin-bar--height and is 0px whenever no
 * bar is on screen. That replaced this file's own 32px/46px pair (#832): the
 * hardcoded 46px kept applying at or below 600px, where core drops the bar to
 * position:absolute and it scrolls away — leaving the banner floating 46px
 * clear of the viewport top for the whole scroll. */
.lje-switch-banner {
	position: sticky;
	top: var(--lj-admin-bar-h, var(--wp-admin--admin-bar--height, 0px));
	z-index: 9999;
	background: var(--lj-color-primary-active, #00747e);
	color: var(--lj-color-text-inverse, #fff);
}

.lje-switch-banner__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--lj-container-max, 1280px);
	margin: 0 auto;
	padding: 14px clamp(1rem, 3vw, 2rem);
}

.lje-switch-banner__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 48px;
	object-fit: contain;
	background: var(--lj-color-bg, #fff);
	border-radius: 4px;
}

.lje-switch-banner__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
}

.lje-switch-banner__label {
	font-size: var(--lj-text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.lje-switch-banner__envelope {
	font-weight: var(--lj-font-weight-bold, 700);
	font-size: var(--lj-text-md, 1.0625rem);
	/* Long product names stay on one tidy line. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lje-switch-banner__hint {
	font-size: var(--lj-text-sm, 0.875rem);
	opacity: 0.92;
}

.lje-switch-banner__cancel {
	flex: 0 0 auto;
	align-self: center;
	font: inherit;
	color: var(--lj-color-text-inverse, #fff);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--lj-radius-sm, 4px);
	padding: 8px 16px;
	cursor: pointer;
}

.lje-switch-banner__cancel:hover { background: rgba(255, 255, 255, 0.3); }
.lje-switch-banner__cancel:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Compact on small screens: drop the hint line, shrink the thumb. */
@media (max-width: 600px) {
	.lje-switch-banner__inner { gap: 12px; padding: 10px 1rem; }
	.lje-switch-banner__thumb { width: 48px; height: 36px; }
	.lje-switch-banner__hint { display: none; }
}