/*
 * 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: var(--ostz-text-xs);
	line-height: var(--ostz-leading-heading);
}

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

.ostz-footerbar-icon {
	font-size: var(--ostz-text-xl);
	line-height: 1;
}

/* The word under the icon. An icon-only bar is a guessing game — the bar is the primary navigation
   on a phone, and «what does this pictogram mean» is not a question to ask someone mid-checkout.
   It is deliberately the smallest step in the scale and never wraps: a two-line label breaks the
   bar's height and the icons stop lining up. */
.ostz-footerbar-label {
	max-inline-size: 100%;
	overflow: hidden;
	font-size: var(--ostz-text-xs);
	line-height: var(--ostz-leading-tight);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Rendered at every count so the browser always has a node to write into; an empty cart hides it
   rather than removing it. */
.ostz-footerbar-count.is-empty {
	display: none;
}

.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: var(--ostz-text-xs);
	font-weight: var(--ostz-weight-bold);
	line-height: 18px;
	text-align: center;
}

@media (max-width: 820px) {

	.ostz-footerbar {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		/*
		 * ⚠ Above the cart plugin's floating button, which sits at 99990 in the SAME corner. At
		 * z-index 70 that button covered the «ورود» tab outright — MEASURED at 820px, the account
		 * entry point on a phone could not be tapped at all. A bar that is the site's primary
		 * navigation has to outrank a floating shortcut to one screen.
		 */
		z-index: 99991;
		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.
	 *
	 * ⚠ 64px was 9px SHORT: the bar measures 73px with its border and safe-area padding, so the
	 * last sliver of the footer stayed underneath it. The value is derived from the same parts the
	 * bar is built from rather than typed again, so the two cannot drift apart.
	 */
	body {
		padding-block-end: calc(74px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * ⚠ The product page's sticky buy bar sits in this same corner and must be raised above this
	 * nav bar — on a product page the buy action outranks navigation, and two fixed bars at the
	 * same offset is how one of them becomes untappable. That offset moved to ostadeez-shop.css
	 * on 2026-09-02, beside the rest of the buy bar: the bar is the shop's component, and a rule
	 * about it living here made it a component described in two files.
	 */
}