/* Mobile Bottom Navigation V3 — split capsule dock + center shop orb */

.mobile-bottom-nav.mbnav-v3 {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
	pointer-events: none;
	padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--sc-mobile-bottom-nav-v3-mbnav-v3-bg, transparent);
	box-shadow: none;
	border: none;
}

.mbnav-v3__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	pointer-events: auto;
}

.mbnav-v3__cluster {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border-radius: 999px;
	background: var(--sc-mobile-bottom-nav-v3-mbnav-v3-cluster-bg, color-mix(in srgb, var(--primary-background-color) 88%, transparent));
	border: 1px solid var(--sc-mobile-bottom-nav-v3-mbnav-v3-cluster-border, color-mix(in srgb, var(--primary-brand-color) 22%, transparent));
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.mbnav-v3__cluster--start {
	justify-self: start;
}

.mbnav-v3__cluster--end {
	justify-self: end;
}

.mbnav-v3__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	color: var(--sc-mobile-bottom-nav-v3-mbnav-v3-chip-text, color-mix(in srgb, var(--primary-text-color) 72%, var(--primary-brand-color)));
	text-decoration: none;
	background: var(--sc-mobile-bottom-nav-v3-mbnav-v3-chip-bg, transparent);
	border: none;
	transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}

.mbnav-v3__chip:hover,
.mbnav-v3__chip:active,
.mbnav-v3__chip.is-active {
	color: var(--sc-mobile-bottom-nav-v3-mbnav-v3-chip-hover-text, var(--primary-brand-color));
	background: var(--sc-mobile-bottom-nav-v3-mbnav-v3-chip-hover-bg, color-mix(in srgb, var(--primary-brand-color) 12%, transparent));
}

.mbnav-v3__chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	font-size: 17px;
	line-height: 1;
	transition: transform 0.22s ease, background 0.22s ease;
}

.mbnav-v3__chip.is-active .mbnav-v3__chip-icon {
	background: var(--sc-mobile-bottom-nav-v3-mbnav-v3-chip-icon-bg, color-mix(in srgb, var(--primary-brand-color) 16%, transparent));
	transform: scale(1.05);
}

.mbnav-v3__core {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 4px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--sc-mobile-bottom-nav-v3-mbnav-v3-core-text, var(--primary-button-text-color));
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--primary-brand-color) 92%, #fff 8%),
		color-mix(in srgb, var(--secondary-brand-color) 88%, #000 12%)
	);
	box-shadow:
		0 14px 30px color-mix(in srgb, var(--primary-brand-color) 42%, transparent),
		0 0 0 4px color-mix(in srgb, var(--primary-background-color) 92%, transparent);
	transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.mbnav-v3__core:hover,
.mbnav-v3__core:active,
.mbnav-v3__core.is-active {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 18px 34px color-mix(in srgb, var(--primary-brand-color) 48%, transparent),
		0 0 0 4px color-mix(in srgb, var(--primary-background-color) 92%, transparent);
}

.mbnav-v3__core-ring {
	position: absolute;
	inset: -6px;
	border-radius: inherit;
	border: 1px dashed var(--sc-mobile-bottom-nav-v3-mbnav-v3-core-ring-border, color-mix(in srgb, var(--primary-button-text-color) 36%, transparent));
	animation: mbnav-v3-orbit 8s linear infinite;
	pointer-events: none;
}

.mbnav-v3__core-icon {
	position: relative;
	z-index: 1;
	font-size: 24px;
	line-height: 1;
}

.mbnav-v3__chip .mobile-cart-count,
.mbnav-v3__chip .mobile-favorite-count {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	inset-inline-start: auto;
	right: auto;
	left: auto;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--sc-mobile-bottom-nav-v3-mobile-cart-count-border, var(--primary-background-color));
	z-index: 2;
	width: auto;
}

.mbnav-v3__chip .mobile-cart-count {
	background: var(--sc-mobile-bottom-nav-v3-mobile-cart-count-bg, var(--primary-brand-color));
	color: var(--sc-mobile-bottom-nav-v3-mobile-cart-count-text, var(--primary-button-text-color));
}

.mbnav-v3__chip .mobile-favorite-count {
	background: var(--sc-mobile-bottom-nav-v3-mobile-favorite-count-bg, var(--heart-icon-filled-color));
	color: var(--sc-mobile-bottom-nav-v3-mobile-favorite-count-text, var(--primary-button-text-color));
}

.mobile-bottom-nav.mbnav-v3.hide-when-fixed-bar-hidden {
	display: none;
}

.mobile-bottom-nav.mbnav-v3.show-with-fixed-bar {
	display: block;
}

@media (max-width: 768px) {
	.mobile-bottom-nav.mbnav-v3 {
		display: block;
	}

	.mobile-bottom-nav.mbnav-v3.hide-when-fixed-bar-hidden {
		display: none;
	}

	.mobile-bottom-nav.mbnav-v3.show-with-fixed-bar {
		display: block;
	}
}

@media (max-width: 380px) {
	.mbnav-v3__stage {
		gap: 6px;
		padding-inline: 0;
	}

	.mbnav-v3__chip {
		width: 40px;
		height: 40px;
	}

	.mbnav-v3__chip-icon {
		font-size: 16px;
	}

	.mbnav-v3__core {
		width: 54px;
		height: 54px;
	}

	.mbnav-v3__core-icon {
		font-size: 22px;
	}
}

@keyframes mbnav-v3-orbit {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

[dir='rtl'] .mbnav-v3__chip .mobile-cart-count,
[dir='rtl'] .mbnav-v3__chip .mobile-favorite-count {
	inset-inline-end: auto;
	inset-inline-start: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mbnav-v3__core-ring {
		animation: none;
	}

	.mbnav-v3__chip,
	.mbnav-v3__core,
	.mbnav-v3__chip-icon {
		transition: none;
	}
}

/* === theme colour controls: inherited values (generated) === */
.mbnav-v3__core-icon {
	color: var(--sc-mobile-bottom-nav-v3-mbnav-v3-core-icon-text, inherit);
}
/* === end theme colour controls === */