/**
 * vonirabeauty 手机底栏（参考）：白底 | 深灰图标字 | 竖线分隔 | 中间圆形置顶
 * WhatsApp | Phone | Top | E-mail | Inquiry
 */
:root {
	--xy-mfoot-bg: #fff;
	--xy-mfoot-border: #e5e5e5;
	--xy-mfoot-color: #555;
	--xy-mfoot-icon: #555;
	--xy-mfoot-hover: #222;
	--xy-mfoot-hover-bg: #f5f5f5;
	--xy-mfoot-wa: #25d366;
	--xy-mfoot-top-bg: #555;
	--xy-mfoot-top-hover: #333;
	--xy-mfoot-z: 1030;
	--xy-mfoot-height: 56px;
}

.mfoot_box,
.mfoot_expand {
	display: none;
}

.footer-middle,
.footer-bar {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* 仅留底栏高度，避免 body padding + footer margin 叠出大块留白 */
	body {
		padding-bottom: var(--xy-mfoot-height);
	}

	.footer-middle,
	.footer-bar {
		margin-bottom: 0;
	}

	.mfoot_box {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		background: var(--xy-mfoot-bg);
		border: none;
		border-top: 1px solid var(--xy-mfoot-border);
		min-height: var(--xy-mfoot-height);
		margin: 0;
		z-index: var(--xy-mfoot-z);
		box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
	}

	.mfoot_inner {
		display: flex;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
		height: var(--xy-mfoot-height);
		overflow: hidden;
		box-sizing: border-box;
	}

	.mfoot_nav {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-right: 1px solid var(--xy-mfoot-border);
		overflow: hidden;
	}

	.mfoot_nav:last-child {
		border-right: 0;
	}

	.mfoot_nav a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--xy-mfoot-color);
		padding: 6px 1px;
		height: 100%;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.25s ease, color 0.25s ease;
	}

	.mfoot_nav a:hover,
	.mfoot_nav a:focus,
	.mfoot_nav a:active {
		color: var(--xy-mfoot-hover);
		background: var(--xy-mfoot-hover-bg);
		text-decoration: none;
	}

	.mfoot_nav .fa {
		font-size: 20px;
		line-height: 1;
		margin-bottom: 3px;
		color: var(--xy-mfoot-icon);
		transition: transform 0.28s ease, color 0.28s ease;
	}

	.mfoot_nav a:hover .fa,
	.mfoot_nav a:focus .fa {
		transform: translateY(-2px);
		color: var(--xy-mfoot-hover);
	}

	.mfoot_label {
		font-size: 10px;
		font-weight: 500;
		line-height: 1.15;
		display: block;
		max-width: 100%;
		color: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mfoot_nav_whatsapp a:hover .fa,
	.mfoot_nav_whatsapp a:focus .fa {
		color: var(--xy-mfoot-wa);
	}

	.mfoot_nav_top a {
		padding: 0;
		background: transparent !important;
	}

	.mfoot_nav_top .mfoot_top_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--xy-mfoot-top-bg);
		color: #fff;
		transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	}

	.mfoot_nav_top .fa {
		margin-bottom: 0;
		font-size: 16px;
		color: #fff !important;
		transform: none !important;
	}

	.mfoot_nav_top a:hover .mfoot_top_btn,
	.mfoot_nav_top a:focus .mfoot_top_btn {
		background: var(--xy-mfoot-top-hover);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		transform: translateY(-2px);
	}

	.mfoot_expand,
	.mfoot_collapse {
		display: none !important;
	}
}