/* Asiami Liquid Mobile Nav — isolated mobile-only styles */

.asmln-root,
.asmln-root * {
	box-sizing: border-box;
	font-family: inherit !important;
}

.asmln-root {
	display: none;
}

@media screen and (max-width: 767px) {
	:root {
		--asmln-red: #e8322b;
		--asmln-ink: #20231f;
		--asmln-glass: rgba(255, 250, 244, 0.90);
		--asmln-line: rgba(255, 255, 255, 0.88);
		--asmln-border: rgba(183, 157, 130, 0.22);
		--asmln-safe-bottom: env(safe-area-inset-bottom, 0px);
		--asmln-action-size: 62px;
		--asmln-action-radius: 22px;
		--asmln-glass-background:
			linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 240, 0.72)),
			var(--asmln-glass);
		--asmln-glass-shadow:
			inset 0 1px 0 var(--asmln-line),
			inset 0 -1px 0 rgba(255, 255, 255, 0.32),
			0 10px 26px rgba(70, 46, 27, 0.12),
			0 2px 8px rgba(70, 46, 27, 0.06);
	}

	body.asmln-is-enabled {
		padding-bottom: calc(82px + var(--asmln-safe-bottom)) !important;
	}

	/* The plugin replaces WoodMart's default toolbar only on phones. */
	body.asmln-is-enabled .wd-toolbar {
		display: none !important;
	}

	.asmln-root {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99998;
		width: 100%;
		height: 100%;
		pointer-events: none;
		direction: rtl;
		color: var(--asmln-ink);
	}

	.asmln-mobile-nav {
		position: absolute;
		left: 50%;
		bottom: calc(8px + var(--asmln-safe-bottom));
		transform: translateX(-50%);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: calc(100% - 20px);
		max-width: 460px;
		height: 64px;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	/* Reserved for the standalone assistant plugin. */
	.asmln-assistant-slot {
		position: relative;
		flex: 0 0 var(--asmln-action-size);
		display: flex;
		align-items: stretch;
		justify-content: stretch;
		width: var(--asmln-action-size);
		height: var(--asmln-action-size);
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	.asmln-assistant-slot > * {
		pointer-events: auto;
	}

	.asmln-nav-capsule {
		flex: 1 1 auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		min-width: 0;
		height: var(--asmln-action-size);
		padding: 4px 5px;
		overflow: hidden;
		pointer-events: auto;
		background: var(--asmln-glass-background);
		border: 1px solid var(--asmln-border);
		border-radius: var(--asmln-action-radius);
		box-shadow: var(--asmln-glass-shadow);
		-webkit-backdrop-filter: blur(18px) saturate(140%);
		backdrop-filter: blur(18px) saturate(140%);
	}

	.asmln-nav-item {
		position: relative;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-width: 0;
		margin: 0 !important;
		padding: 4px 3px !important;
		color: var(--asmln-ink) !important;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
	}

	.asmln-nav-item::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 2px;
		width: 0;
		height: 2px;
		border-radius: 999px;
		background: var(--asmln-red);
		transform: translateX(-50%);
		transition: width 180ms ease;
	}

	.asmln-nav-item.is-active {
		background: linear-gradient(180deg, rgba(232, 50, 43, 0.05), rgba(232, 50, 43, 0.09));
		border-radius: 17px;
	}

	.asmln-nav-item.is-active::after {
		width: 27px;
	}

	.asmln-nav-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		flex: 0 0 24px;
		color: currentColor;
	}

	.asmln-nav-icon svg {
		display: block;
		width: 100%;
		height: 100%;
		fill: none;
		stroke: currentColor;
	}

	.asmln-nav-label {
		display: block;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		color: currentColor;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.35;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.asmln-cart-count {
		position: absolute;
		top: -6px;
		right: -9px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border: 2px solid rgba(255, 252, 247, 0.95);
		border-radius: 999px;
		color: #fff;
		background: var(--asmln-red);
		font-size: 8.5px;
		font-weight: 800;
		line-height: 1;
		box-shadow: 0 3px 8px rgba(232, 50, 43, 0.28);
	}

	.asmln-cart-count.is-empty {
		display: none;
	}

	.asmln-nav-item:focus-visible {
		outline: 2px solid var(--asmln-red) !important;
		outline-offset: 2px !important;
	}
}

@media screen and (max-width: 360px) {
	:root {
		--asmln-action-size: 58px;
	}

	.asmln-mobile-nav {
		width: calc(100% - 14px);
		gap: 6px;
	}

	.asmln-nav-label {
		font-size: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asmln-root *,
	.asmln-root *::before,
	.asmln-root *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}