/*
 * Mobiele navigatiebalk (container .wxl-bottom-nav in de footer-template, alleen tablet/mobiel).
 */
.wxl-bottom-nav {
	padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;

	.wxl-bn-item {
		position: relative;
		text-decoration: none;

		.elementor-icon,
		.elementor-heading-title {
			transition: color 0.15s ease;
		}

		&:hover,
		&.is-current {
			.elementor-icon,
			.elementor-heading-title {
				color: var(--e-global-color-primary) !important;
			}
		}
	}

	/* Tellers: zelfde bolletje als in de header */
	.wxl-bn-count {
		top: 0 !important;
		right: auto !important;
		left: calc(50% + 2px) !important;
		pointer-events: none;
	}

	.wxl-cart-count,
	.vwish-count-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--e-global-color-primary);
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 9.5px;
		font-weight: 800;
		line-height: 1;
		color: var(--e-global-color-wxlwhite);
	}

	.wxl-cart-count[data-count="0"] {
		display: none;
	}
}

@media (max-width: 1024px) {
	/* Ruimte onderaan zodat footer/inhoud niet achter de balk valt */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/* Zoekbalk onder het logo: standaard dicht, open via "Zoeken" in de balk (zoals ontwerp) */
	body:not(.wxl-zoek-open) .wxl-header-search {
		display: none !important;
	}
}

/* Afrekenen heeft geen footer/balk (afleidingsvrij): geen extra ruimte */
body.awcc-distraction-free {
	padding-bottom: 0 !important;
}

/* ---------- Uitschuifmenu (Elementor-popup "WoodXL Mobiel uitschuifmenu") ---------- */
.wxl-drawer-menu {
	.elementor-nav-menu--main .elementor-nav-menu {
		display: block;
	}

	.elementor-nav-menu > li {
		border-bottom: 1px solid var(--e-global-color-wxlgray2);

		&:last-child {
			border-bottom: 0;
		}
	}

	.elementor-nav-menu > li > a.elementor-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	/* Zelfde categorie-hoofdmenu als de header: de nowrap/scroll-regel van de categoriebalk niet toepassen */
	.elementor-nav-menu--main > .elementor-nav-menu {
		flex-wrap: wrap;
		overflow: visible;
	}
}

/* Pijltje achter de items in "Assortiment" */
.wxl-drawer-menu--chevron .elementor-nav-menu > li > a.elementor-item::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-left: 12px;
	/* Elementor gebruikt ::after voor hover-pointers en zet hem op opacity 0 / eigen kleur */
	background-color: var(--e-global-color-wxltaupel) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
}

.wxl-drawer-menu--chevron .elementor-nav-menu > li.wxl-menu-sale > a.elementor-item::after {
	background-color: var(--e-global-color-primary) !important;
}

/* Popup over de volle hoogte, scrollbaar */
.wxl-drawer-popup .dialog-message {
	overflow-y: auto;
}

/* Menuknop (hamburger) in de header: icon-wrapper is inline-block met regelhoogte → 6px baseline-ruimte eronder,
   waardoor de knop 3px te hoog stond t.o.v. logo en iconen. Flex haalt die ruimte weg. */
.wxl-menu-trigger .elementor-icon-wrapper {
	display: flex;
}