/*
 * Mobile bottom navigation bar. Loaded only while the bar is switched on
 * (Surgemint → Site Parts → Bottom bar), so a disabled bar costs nothing.
 *
 * --pbd-bottom-h is the bar's height including the phone's safe area
 * (home indicator). The body, the sticky add-to-cart bar, toasts and common
 * cookie banners are offset by it, so nothing ends up hidden under the bar.
 */

body.pbd-has-bottom-nav {
	--pbd-bottom-h: calc(64px + env(safe-area-inset-bottom, 0px));
	/* viewport-fit=cover is on while the bar shows: keep content off the
	   notch in landscape. */
	padding-right: env(safe-area-inset-right, 0px);
	padding-left: env(safe-area-inset-left, 0px);
}

@media (min-width: 600px) {
	body.pbd-bottom-nav--mobile {
		--pbd-bottom-h: 0px;
	}

	body.pbd-bottom-nav--mobile .pbd-bottom-nav {
		display: none;
	}
}

@media (min-width: 1024px) {
	body.pbd-bottom-nav--tablet {
		--pbd-bottom-h: 0px;
	}

	body.pbd-bottom-nav--tablet .pbd-bottom-nav {
		display: none;
	}
}

.pbd-bottom-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	height: var(--pbd-bottom-h);
	padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
	border-top: 1px solid var(--pbd-line);
	background: var(--pbd-surface);
	box-shadow: 0 -4px 16px rgba(31, 26, 23, 0.06);
}

.pbd-bottom-nav__list {
	display: grid;
	grid-template-columns: repeat(var(--pbd-bnav-count, 5), minmax(0, 1fr));
	height: 64px;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.pbd-bottom-nav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pbd-ink-soft);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.pbd-bottom-nav__item.is-active {
	color: var(--pbd-bnav-active, var(--pbd-brand));
}

.pbd-bottom-nav__item.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	width: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--pbd-bnav-active, var(--pbd-brand));
}

.pbd-bottom-nav__item:focus-visible {
	outline-offset: -4px;
}

.pbd-bottom-nav__icon {
	position: relative;
	display: inline-grid;
}

.pbd-bottom-nav__item .pbd-icon {
	width: 24px;
	height: 24px;
}

.pbd-bottom-nav__icon .pbd-badge {
	top: -6px;
	right: -10px;
}

/* Common cookie-consent banners sit above the bar instead of under it.
   (Their own stylesheets position them with high specificity.) */
body.pbd-has-bottom-nav #cookie-law-info-bar,
body.pbd-has-bottom-nav .cky-consent-container,
body.pbd-has-bottom-nav #cmplz-cookiebanner-container .cmplz-cookiebanner,
body.pbd-has-bottom-nav #cookie-notice,
body.pbd-has-bottom-nav #moove_gdpr_cookie_info_bar,
body.pbd-has-bottom-nav .cc-window.cc-bottom,
body.pbd-has-bottom-nav .cc-window.cc-floating,
body.pbd-has-bottom-nav .pbd-cookie-banner {
	bottom: var(--pbd-bottom-h) !important;
}