/*
 * OSTADEEZ — the fixed bottom navigation bar (phones only).
 *
 * Colours come entirely from the tokens, so it follows the light/dark switch with no rules of its
 * own for either scheme.
 */

.ostz-footerbar {
	display: none;
}

.ostz-footerbar-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ostz-footerbar-item {
	margin: 0;
}

.ostz-footerbar-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 2px;
	min-height: 56px;
	color: var(--ostz-text-dim);
	text-decoration: none;
	font-size: 11px;
	line-height: 1.4;
}

.ostz-footerbar-link.is-current {
	color: var(--ostz-accent);
}

.ostz-footerbar-icon {
	font-size: 18px;
	line-height: 1;
}

.ostz-footerbar-count {
	position: absolute;
	top: 4px;
	inset-inline-end: calc(50% - 22px);
	min-width: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ostz-accent);
	color: var(--ostz-accent-ink);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

@media (max-width: 820px) {

	.ostz-footerbar {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 70;
		background: var(--ostz-bg-raised);
		border-block-start: 1px solid var(--ostz-line);
		/* Keeps the bar clear of the iOS home indicator instead of sitting under it. */
		padding-block-end: env(safe-area-inset-bottom, 0);
	}

	/*
	 * Room at the end of every page so the bar never covers the last line of content — the
	 * footer's own links and the legal line are exactly what it would otherwise hide.
	 */
	body {
		padding-block-end: 64px;
	}

	/*
	 * ⚠ The product page's sticky buy bar sits in the same corner. It is raised above the nav
	 * bar rather than the other way round: on a product page the buy action outranks navigation,
	 * and two fixed bars overlapping at the same offset is how one of them becomes untappable.
	 */
	.ostz-buybar {
		inset-block-end: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}