/*!
 * Show Builder Integration 2.2 — Connected Shopping Experience
 */
.sbi22-root {
	--sbi22-bg: rgba(10, 14, 22, 0.96);
	--sbi22-card: #121826;
	--sbi22-line: rgba(255, 255, 255, 0.14);
	--sbi22-gold: #ffc437;
	--sbi22-red: #c8102e;
	--sbi22-text: #f4f7fb;
	--sbi22-muted: rgba(244, 247, 251, 0.72);
	--sbi22-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
	pointer-events: none;
}

.sbi22-root > * {
	pointer-events: auto;
}

.sbi22-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sbi22-indicator {
	position: fixed;
	right: max(1rem, calc((100vw - min(100vw - 2rem, var(--dxp-container-max, 1400px))) / 2 + 0.5rem));
	bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 196, 55, 0.4);
	background: var(--sbi22-bg);
	color: var(--sbi22-text);
	box-shadow: var(--sbi22-shadow);
	backdrop-filter: blur(12px);
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.sbi22-indicator-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.7rem;
	min-height: 1.7rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: linear-gradient(180deg, #ff4d3a, var(--sbi22-red));
	color: #fff;
	font-size: 0.85rem;
}

.sbi22-indicator:focus-visible,
.sbi22-btn:focus-visible,
.sbi22-icon-close:focus-visible,
.sbi22-chooser-item:focus-visible {
	outline: 2px solid var(--sbi22-gold);
	outline-offset: 2px;
}

.sbi22-toast {
	position: fixed;
	top: 5.5rem;
	right: 1rem;
	z-index: 110;
	width: min(22.5rem, calc(100vw - 1.5rem));
}

.sbi22-toast-card,
.sbi22-modal-card,
.sbi22-drawer-card {
	position: relative;
	border-radius: 1rem;
	border: 1px solid var(--sbi22-line);
	background: var(--sbi22-card);
	color: var(--sbi22-text);
	box-shadow: var(--sbi22-shadow);
	padding: 1rem 1.05rem 1.1rem;
}

.sbi22-toast-kicker {
	margin: 0 1.5rem 0.35rem 0;
	font-weight: 800;
	color: var(--sbi22-gold);
}

.sbi22-toast-body,
.sbi22-toast-note,
.sbi22-modal-note {
	margin: 0 0 0.45rem;
	color: var(--sbi22-muted);
	line-height: 1.4;
}

.sbi22-toast-show {
	margin: 0 0 0.55rem;
	font-size: 1.05rem;
	font-weight: 800;
}

.sbi22-toast-actions,
.sbi22-modal-actions,
.sbi22-drawer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

.sbi22-modal-actions--stack {
	flex-direction: column;
}

.sbi22-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 0.9rem;
	border-radius: 0.7rem;
	border: 1px solid var(--sbi22-line);
	background: transparent;
	color: var(--sbi22-text);
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.sbi22-btn-primary {
	background: linear-gradient(180deg, #ff4d3a, var(--sbi22-red));
	border-color: rgba(255, 196, 55, 0.35);
}

.sbi22-btn-secondary {
	background: rgba(255, 255, 255, 0.08);
}

.sbi22-btn-ghost {
	background: transparent;
}

.sbi22-btn-sm {
	min-height: 40px;
	padding: 0.35rem 0.65rem;
	font-size: 0.85rem;
}

.sbi22-icon-close {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sbi22-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.sbi22-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(4, 8, 14, 0.55);
}

.sbi22-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.sbi22-modal[hidden],
.sbi22-toast[hidden],
.sbi22-drawer[hidden],
.sbi22-overlay[hidden] {
	display: none !important;
}

.sbi22-modal-card {
	width: min(26rem, 100%);
}

.sbi22-modal-card h2,
.sbi22-drawer-head h2 {
	margin: 0 2rem 0.65rem 0;
	font-size: 1.2rem;
}

.sbi22-chooser-list {
	display: grid;
	gap: 0.45rem;
	max-height: 14rem;
	overflow: auto;
}

.sbi22-chooser-item {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border-radius: 0.75rem;
	border: 1px solid var(--sbi22-line);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.sbi22-chooser-item:hover,
.sbi22-chooser-item:focus-visible {
	border-color: rgba(255, 196, 55, 0.55);
}

.sbi22-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 115;
	width: min(24rem, 100vw);
	height: 100%;
	padding: 0.85rem;
	display: flex;
	align-items: stretch;
}

.sbi22-drawer-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.sbi22-drawer-head {
	position: relative;
	padding-right: 2.5rem;
}

.sbi22-drawer-show {
	display: grid;
	gap: 0.15rem;
	margin: 0 0 0.85rem;
	color: var(--sbi22-muted);
}

.sbi22-drawer-show strong {
	color: var(--sbi22-text);
	font-size: 1.05rem;
}

.sbi22-drawer-meta {
	list-style: none;
	margin: 0 0 0.85rem;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.sbi22-drawer-meta li {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.92rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 0.35rem;
}

.sbi22-drawer-meta span {
	color: var(--sbi22-muted);
}

.sbi22-drawer-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.45rem;
	flex: 1;
}

.sbi22-drawer-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.65rem;
	border-radius: 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.sbi22-drawer-item span {
	display: block;
	color: var(--sbi22-muted);
	font-size: 0.82rem;
}

.sbi22-drawer-empty {
	color: var(--sbi22-muted);
	padding: 0.75rem 0;
}

html.sbi22-modal-open {
	overflow: hidden;
}

/* Tablet: slide-up */
@media (max-width: 1024px) {
	.sbi22-drawer {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		max-height: min(78vh, 40rem);
		padding: 0;
	}

	.sbi22-drawer-card {
		border-radius: 1.1rem 1.1rem 0 0;
		max-height: min(78vh, 40rem);
	}

	.sbi22-toast {
		top: auto;
		bottom: 5.5rem;
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
	}
}

/* Mobile: bottom sheet confirmation + indicator clearance */
@media (max-width: 781px) {
	.sbi22-indicator {
		right: 0.75rem;
		bottom: 5.25rem;
	}

	.sbi22-modal {
		align-items: end;
		padding: 0;
	}

	.sbi22-modal-card {
		width: 100%;
		border-radius: 1.1rem 1.1rem 0 0;
	}

	.sbi22-toast {
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
	}

	.sbi22-toast-card {
		border-radius: 1.1rem 1.1rem 0 0;
	}
}

@media (prefers-reduced-motion: reduce),
html.sbi22-reduce-motion {
	.sbi22-toast,
	.sbi22-drawer,
	.sbi22-modal,
	.sbi22-overlay,
	.sbi22-indicator {
		transition: none !important;
		animation: none !important;
	}
}