/* ZHIYAR — floating bottom nav bar (Home page only), same glass treatment as the header. */

.zhiyar-bottom-nav {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.86) 0%, rgba(250, 247, 240, 0.72) 100%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 -8px 24px rgba(13, 31, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(201, 160, 84, 0.25);
}

.zhiyar-bottom-nav__item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 12px;
	color: rgba(18, 36, 28, 0.55);
	transition: background 0.15s ease, color 0.15s ease;
}

.zhiyar-bottom-nav__item:hover,
.zhiyar-bottom-nav__item:focus-visible {
	background: rgba(46, 68, 58, 0.08);
	color: var(--ast-global-color-2, #1a3d2e);
}

.zhiyar-bottom-nav__item.is-active {
	color: var(--ast-global-color-2, #1a3d2e);
	background: rgba(46, 68, 58, 0.1);
}

.zhiyar-bottom-nav__item svg {
	width: 24px;
	height: 24px;
}

/* On product pages the sticky buy-bar also pins to the bottom — stack it
   directly above the nav bar instead of overlapping it (see zhiyar-product-cart-ui.js
   for the matching body padding-bottom, which accounts for both bars). */
body.single-product .zhiyar-sticky-buybar {
	bottom: 60px;
}