/* Mobile chrome */
.ggn-mobile-chrome {
	display: none;
}

/* Mobile tab bar */
@media (max-width: 781px) {
	body:has(.ggn-mobile-chrome) {
		padding-bottom: calc(64px + env(safe-area-inset-bottom)) /* spacing-ok: reserves fixed tab bar area */;
	}

	.ggn-mobile-chrome {
		display: block;
	}

	html.has-modal-open .ggn-mobile-chrome .ggn-tab-bar,
	html.has-modal-open .ggn-mobile-chrome .ggn-whatsapp-fab,
	body:has(.wc-block-product-filters.is-overlay-opened) .ggn-mobile-chrome .ggn-tab-bar,
	body:has(.wc-block-product-filters.is-overlay-opened) .ggn-mobile-chrome .ggn-whatsapp-fab {
		display: none;
	}

	.ggn-mobile-chrome .ggn-tab-bar {
		background-color: var(--wp--preset--color--bg);
		border-top: 1px solid var(--wp--preset--color--line);
		bottom: 0;
		box-sizing: border-box;
		height: calc(64px + env(safe-area-inset-bottom));
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		right: 0;
		z-index: 60;
	}

	.ggn-mobile-chrome .ggn-tab-bar__navigation {
		height: 64px;
		width: 100%;
	}

	.ggn-mobile-chrome .ggn-tab-bar__navigation .wp-block-navigation__container {
		align-items: stretch;
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 0;
		justify-content: space-between;
		margin: 0;
		width: 100%;
	}

	.ggn-mobile-chrome .ggn-tab-bar__item {
		align-items: stretch;
		display: flex;
		flex: 1 1 25%;
		justify-content: center;
		margin: 0;
	}

	.ggn-mobile-chrome .ggn-tab-bar__item .wp-block-navigation-item__content {
		align-items: center;
		color: var(--wp--preset--color--muted);
		display: flex;
		flex-direction: column;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		gap: 2px;
		justify-content: center;
		line-height: 1.2;
		min-height: var(--wp--custom--control--size);
		text-decoration: none;
		width: 100%;
	}

	.ggn-mobile-chrome .ggn-tab-bar__item .wp-block-navigation-item__content::before {
		background-color: currentColor;
		content: "";
		display: block;
		height: 22px;
		mask: center / contain no-repeat;
		width: 22px;
	}

	.ggn-mobile-chrome .ggn-tab-bar__item--gift-cards .wp-block-navigation-item__content::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4V7Zm9-2v14'/%3E%3C/svg%3E");
	}

	.ggn-mobile-chrome .ggn-tab-bar__item--topups .wp-block-navigation-item__content::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6V4m10 2V4M6 10H4m16 0h-2m-8 8v2m-4-2v2m8-2v2M7 8h10a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3Zm2 4h.01M15 14h.01' fill='none' stroke='black' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E");
	}

	.ggn-mobile-chrome .ggn-tab-bar__item--orders .wp-block-navigation-item__content::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18H6V3Zm4 5h4m-4 4h4m-4 4h4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
	}

	.ggn-mobile-chrome .ggn-tab-bar__item--account .wp-block-navigation-item__content::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0m12-14a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
	}

	.ggn-mobile-chrome .ggn-tab-bar__item .wp-block-navigation-item__content:hover,
	.ggn-mobile-chrome .ggn-tab-bar__item .wp-block-navigation-item__content:focus-visible,
	.ggn-mobile-chrome .ggn-tab-bar__item.current-menu-item > .wp-block-navigation-item__content,
	.ggn-mobile-chrome .ggn-tab-bar__item [aria-current="page"] {
		color: var(--wp--preset--color--accent);
	}

	/* Floating WhatsApp action */
	.ggn-mobile-chrome .ggn-whatsapp-fab {
		bottom: calc(64px + var(--wp--preset--spacing--gutter) + env(safe-area-inset-bottom)) /* spacing-ok: fixed tab bar offset */;
		margin: 0;
		position: fixed;
		right: var(--wp--preset--spacing--gutter);
		z-index: 61;
	}

	.ggn-mobile-chrome .ggn-whatsapp-fab .wp-block-button__link {
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 4px 12px var(--wp--preset--color--line);
		display: inline-flex;
		height: var(--wp--custom--control--fab);
		justify-content: center;
		min-height: var(--wp--custom--control--fab);
		min-width: var(--wp--custom--control--fab);
		padding: 0;
		width: var(--wp--custom--control--fab);
	}

	.ggn-mobile-chrome .ggn-whatsapp-fab .wp-block-button__link::before {
		background-color: currentColor;
		content: "";
		display: block;
		height: 24px;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.52 3.48A11.94 11.94 0 0 0 12.05 0C5.47 0 .12 5.35.12 11.93c0 2.1.55 4.15 1.6 5.96L0 24l6.28-1.65a11.94 11.94 0 0 0 5.76 1.47h.01c6.58 0 11.93-5.35 11.93-11.93 0-3.19-1.24-6.19-3.46-8.41ZM12.05 21.8a9.92 9.92 0 0 1-5.06-1.38l-.36-.21-3.73.98.99-3.64-.24-.37a9.91 9.91 0 1 1 8.4 4.62Zm5.44-7.43c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-1.77-.88-2.93-1.57-4.1-3.56-.31-.53.31-.49.89-1.64.1-.2.05-.37-.03-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.02-1.05 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.21 5.08 4.5.71.31 1.26.49 1.69.62.71.23 1.35.2 1.86.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.13-.27-.2-.57-.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
		width: 24px;
	}

	.ggn-mobile-chrome .screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px /* spacing-ok: visually hidden tab label offset */;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
		word-wrap: normal;
	}

	body.single-product:has(.ggn-mobile-chrome) {
		padding-bottom: 0;
	}

	body.single-product .ggn-mobile-chrome .ggn-tab-bar {
		display: none;
	}

	body.single-product .ggn-mobile-chrome .ggn-whatsapp-fab {
		bottom: calc(var(--wp--preset--spacing--gutter) + env(safe-area-inset-bottom));
	}
}