/*
 * Редизайн нижнего мобильного меню (2026-08-13).
 * Полноширинный светлый бар в стиле fashion-ритейла — без капсулы,
 * подписи видны под иконками, активный пункт — тонкая линия сверху + чёрный акцент.
 * Переопределяет CSS-переменные .mobile-menu из родительской темы
 * (ferrano/includes/assets/css/base.css), сам селектор не трогаем.
 */
@media screen and (max-width: 1023.98px) {

	.mobile-menu {
		--mobile-menu-color: #111111;
		--mobile-menu-label-color: #9a9a9a;
		--mobile-menu-background: #ffffff;
		--mobile-menu-border: #ececec;
		--mobile-menu-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 -8px 24px rgba(0, 0, 0, 0.06);
		--mobile-menu-radius: 0px;
		--mobile-menu-padding-x: 0px;
		--mobile-menu-padding-y: 0px;
		--mobile-menu-icon-size: 22px;
		--mobile-menu-gap: 0px;

		/* полноширинный бар, прижат к низу экрана */
		width: 100%;
		left: 0;
		inset-inline-start: 0;
		right: 0;
		bottom: 0;
		-webkit-transform: none;
		transform: none;
		max-width: 100%;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--mobile-menu-border);
	}

	.mobile-menu .mobile-menu-inner {
		width: 100%;
		max-width: 100%;
		border-top: none;
		border-radius: 0;
		padding-block: 0;
	}

	.mobile-menu .mobile-menu-inner ul {
		display: flex;
		gap: 0;
	}

	.mobile-menu .mobile-menu-inner ul li {
		flex: 1 1 0;
	}

	.mobile-menu .mobile-menu-inner ul a {
		flex-direction: column;
		gap: 4px;
		width: 100%;
		min-width: 0;
		min-height: 56px;
		justify-content: center;
		padding-block: 9px 8px;
		padding-inline: 4px;
		border-radius: 0;
		position: relative;
		-webkit-transition: color 0.2s ease;
		transition: color 0.2s ease;
	}

	/* активный маркер — тонкая линия по верхнему краю пункта, а не заливка */
	.mobile-menu .mobile-menu-inner ul a::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 0;
		height: 2px;
		background-color: #111111;
		-webkit-transition: width 0.2s ease;
		transition: width 0.2s ease;
	}

	.mobile-menu .mobile-menu-inner ul a.mobile-nav-current::before {
		width: 22px;
	}

	.mobile-menu .mobile-menu-inner ul a:active {
		color: #111111;
	}

	/* подпись — видна, а не sr-only: стандартный паттерн fashion-ритейла */
	.mobile-menu .mobile-menu-inner ul a .mobile-menu-label {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
		border: 0;
		font-size: 10px;
		line-height: 1.2;
		letter-spacing: 0.02em;
		font-weight: 500;
		color: var(--mobile-menu-label-color);
		-webkit-transition: color 0.2s ease;
		transition: color 0.2s ease;
	}

	.mobile-menu .mobile-menu-inner ul a.mobile-nav-current .mobile-menu-label {
		color: #111111;
		font-weight: 600;
	}

	.mobile-menu .mobile-menu-inner ul a .mobile-menu-icon {
		color: #767676;
		-webkit-transition: color 0.2s ease;
		transition: color 0.2s ease;
	}

	.mobile-menu .mobile-menu-inner ul a.mobile-nav-current .mobile-menu-icon {
		color: #111111;
	}

	.mobile-menu .mobile-menu-inner ul a svg {
		width: 21px;
		height: 21px;
	}

	/* иконка "Избранное" — растровый img с зашитым stroke="#000000" */
	.mobile-menu .mobile-menu-inner ul a img {
		width: 21px;
		height: 21px;
		opacity: 0.62;
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
	}

	.mobile-menu .mobile-menu-inner ul a.mobile-nav-current img {
		opacity: 1;
	}

	/* доступность: видимое фокусное кольцо на светлом фоне */
	.mobile-menu .mobile-menu-inner ul a:focus-visible {
		outline: 2px solid #111111;
		outline-offset: -2px;
	}

	@media (prefers-reduced-motion: reduce) {
		.mobile-menu .mobile-menu-inner ul a,
		.mobile-menu .mobile-menu-inner ul a::before,
		.mobile-menu .mobile-menu-inner ul a .mobile-menu-label,
		.mobile-menu .mobile-menu-inner ul a .mobile-menu-icon,
		.mobile-menu .mobile-menu-inner ul a img {
			transition: none;
		}
	}
}

@media screen and (max-width: 340px) {
	.mobile-menu .mobile-menu-inner ul a .mobile-menu-label {
		font-size: 9px;
	}
}