/*
 * Мобильная версия в духе приложения: нижняя панель-остров, шторки, плитки разделов.
 * Разметка — template-parts/mobile-app.php, поведение — js/mobile-app.js. Только телефон (до 767px).
 */

.mapp {
	display: none;
}

/* Кнопка «Отмена» поиска на весь экран (js/mobile-app.js) — только на телефоне, когда поиск открыт */
.msearch-cancel {
	display: none;
}

/* Знак «a» в шапке телефона (template-parts/header-compact.php) */
.island-mark {
	display: none;
}

@media (max-width: 767px) {
	:root {
		--mapp-tabs-h: 64px;
		--mapp-gap: 10px;
		--mapp-glass: rgba(255, 255, 255, 0.82);
		--mapp-glass-shadow: 0 0 0 0.5px rgba(39, 39, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -24px rgba(39, 39, 39, 0.25);
		--mapp-line: rgba(39, 39, 39, 0.09);
		--mapp-muted: #90969b;
		--mapp-ink: #272727;
		--mapp-sheet-bg: #f1f1ee;
		--mapp-bottom: calc(var(--mapp-tabs-h) + var(--mapp-gap) * 2 + env(safe-area-inset-bottom, 0px));
	}

	.mapp {
		display: block;
	}

	/* Место под панель внизу страницы */
	body.has-mobile-app {
		padding-bottom: var(--mapp-bottom);
	}

	/* Старое мобильное меню (бургер слева) больше не нужно — всё в нижней панели */
	body.has-mobile-app #sidePanel,
	body.has-mobile-app #overlay,
	body.has-mobile-app #menuButton {
		display: none !important;
	}

	/* Плашка cookie — над панелью */
	body.has-mobile-app .cky-consent-container {
		bottom: var(--mapp-bottom) !important;
	}

	/* ---------- Нижняя панель: тёмный стеклянный остров, как шапка ---------- */

	.mtabs {
		position: fixed;
		z-index: 9000;
		left: 50%;
		bottom: calc(var(--mapp-gap) + env(safe-area-inset-bottom, 0px));
		display: flex;
		align-items: center;
		width: calc(100vw - var(--mapp-gap) * 2);
		max-width: 520px;
		height: var(--mapp-tabs-h);
		padding: 0 6px;
		border-radius: 999px;
		background: rgba(24, 24, 26, 0.74);
		box-shadow:
			0 18px 40px -16px rgba(0, 0, 0, 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.1),
			inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
		-webkit-backdrop-filter: blur(22px) saturate(180%);
		backdrop-filter: blur(22px) saturate(180%);
		transform: translateX(-50%);
		transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
		touch-action: pan-y;
		-webkit-user-select: none;
		user-select: none;
	}

	body.mapp-bar-hidden .mtabs {
		transform: translate(-50%, 160%);
	}

	.mtab {
		position: relative;
		z-index: 1;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1px;
		height: 52px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: none;
		color: rgba(255, 255, 255, 0.72);
		font-family: var(--font-family);
		font-size: 10.5px;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: color 0.25s;
		-webkit-tap-highlight-color: transparent;
	}

	.mtab:hover,
	.mtab:focus {
		color: rgba(255, 255, 255, 0.72);
		text-decoration: none;
	}

	.mtab.is-on,
	.mtab.is-on:hover {
		color: var(--brand-yellow);
		font-weight: 600;
	}

	.mtab svg {
		overflow: visible;
	}

	.mtab:focus-visible {
		outline: 2px solid var(--brand-yellow);
		outline-offset: -2px;
	}

	.mtab-cnt {
		position: absolute;
		top: 2px;
		left: calc(50% + 5px);
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: auto; /* общий .basket-count (navigation.css) задаёт 24px — при высоте 18px выходил овал */
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border-radius: 9px;
		background: var(--brand-yellow);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		box-shadow: 0 0 0 2px #1d1d1f;
		color: var(--mapp-ink);
		font-size: 11px;
		font-weight: 700;
	}

	.mtab-cnt[hidden] {
		display: none;
	}

	.mtab.bump .mtab-cnt {
		animation: mappBump 0.35s;
	}

	@keyframes mappBump {
		40% { transform: scale(1.35); }
	}

	/* Стеклянная плашка под выбранной вкладкой; при перетаскивании — линза, увеличивающая иконки */
	.mtabs-ind {
		position: absolute;
		z-index: 0;
		top: 6px;
		left: 0;
		width: 0;
		height: 52px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.13);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
		overflow: hidden;
		pointer-events: none;
		/* Сдвиг и увеличение — отдельными свойствами: при перетаскивании сдвиг идёт за пальцем без анимации,
		   а увеличение остаётся плавным */
		translate: var(--x, 0px) 0;
		scale: var(--s, 1);
		transition: translate 0.5s cubic-bezier(0.3, 1.35, 0.45, 1), scale 0.5s cubic-bezier(0.3, 1.35, 0.45, 1), width 0.3s, background 0.25s, box-shadow 0.25s, opacity 0.2s;
	}

	.mtabs-ind.is-idle {
		opacity: 0;
	}

	.mtabs-lens {
		position: absolute;
		top: -6px;
		left: 0;
		height: 64px;
		opacity: 0;
		transform: translateX(calc(-1 * var(--x, 0px)));
		transition: opacity 0.2s;
	}

	.mtabs-lens .mtab {
		position: absolute;
		top: 6px;
		color: var(--brand-yellow);
	}

	.mtabs.is-drag .mtabs-ind {
		--s: 1.16;
		z-index: 2;
		opacity: 1;
		background: rgba(58, 58, 62, 0.97);
		box-shadow:
			inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
			inset 0 -1px 0 rgba(255, 255, 255, 0.12),
			inset 0 0 0 1px rgba(255, 255, 255, 0.16),
			inset 0 0 14px rgba(255, 255, 255, 0.08),
			0 10px 24px -8px rgba(0, 0, 0, 0.6);
		/* Без transition у сдвига: стекло идёт за пальцем 1:1 (с ним оно догоняло палец и «тянуло назад») */
		transition: scale 0.18s ease-out, background 0.2s, box-shadow 0.2s;
	}

	.mtabs.is-drag .mtabs-lens {
		opacity: 1;
	}

	/* Мини-анимации иконок после выбора вкладки */
	.mtab.is-anim[data-mtab="home"] rect {
		transform-box: fill-box;
		transform-origin: center;
		animation: mappPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
	}

	.mtab.is-anim[data-mtab="home"] rect:nth-child(2) { animation-delay: 0.06s; }
	.mtab.is-anim[data-mtab="home"] rect:nth-child(3) { animation-delay: 0.12s; }
	.mtab.is-anim[data-mtab="home"] rect:nth-child(4) { animation-delay: 0.18s; }

	@keyframes mappPop {
		40% { transform: scale(0.55); }
	}

	.mtab.is-anim[data-mtab="sections"] path {
		animation: mappSlide 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
	}

	.mtab.is-anim[data-mtab="sections"] path:nth-child(2) { animation-delay: 0.07s; }
	.mtab.is-anim[data-mtab="sections"] path:nth-child(3) { animation-delay: 0.14s; }

	@keyframes mappSlide {
		35% { transform: translateX(-6px); }
	}

	.mtab.is-anim[data-mtab="cart"] svg {
		transform-origin: 50% 20%;
		animation: mappSwing 0.7s ease-in-out;
	}

	@keyframes mappSwing {
		20% { transform: rotate(14deg); }
		45% { transform: rotate(-10deg); }
		70% { transform: rotate(5deg); }
	}

	.mtab.is-anim[data-mtab="contact"] svg {
		animation: mappRing 0.8s ease-in-out;
	}

	@keyframes mappRing {
		10%, 30%, 50% { transform: rotate(-16deg); }
		20%, 40%, 60% { transform: rotate(16deg); }
		75% { transform: rotate(-6deg); }
	}

	.mtab.is-anim[data-mtab="more"] circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: mappNod 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
	}

	@keyframes mappNod {
		30% { transform: translateY(-3px); }
		60% { transform: translateY(1px); }
	}

	/* ---------- Шторки снизу ---------- */

	.mapp-scrim {
		position: fixed;
		z-index: 8990;
		inset: 0;
		background: rgba(20, 20, 20, 0.42);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
	}

	.mapp.is-sheet-open .mapp-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	.msheet {
		position: fixed;
		z-index: 8995;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: 90vh;
		max-height: 90dvh;
		padding-bottom: var(--mapp-bottom);
		border-radius: 28px 28px 0 0;
		background: var(--mapp-sheet-bg);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		transform: translateY(105%);
		transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
	}

	/* Закрытая шторка не отрисовывается: иначе браузер грузил её картинки (плитки «Разделов» ~330 КБ)
	   на каждой странице. Анимация не страдает: js снимает hidden до открытия и ставит после закрытия. */
	.msheet[hidden] {
		display: none !important;
	}

	.msheet.is-open {
		visibility: visible;
		transform: translateY(0);
	}

	.msheet-grab {
		width: 38px;
		height: 5px;
		margin: 8px auto 2px;
		border-radius: 3px;
		background: #d6d5d0;
	}

	.msheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 16px 8px;
	}

	.msheet-head h2 {
		margin: 0;
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.1;
	}

	.msheet-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(39, 39, 39, 0.06);
		color: var(--mapp-ink);
	}

	.msheet-body {
		overflow: auto;
		overscroll-behavior: contain;
		padding: 0 16px 16px;
		-webkit-overflow-scrolling: touch;
	}

	/* Плитка раздела / типа / коллекции: название слева сверху, фото справа снизу (как у Озона) */
	.ct {
		position: relative;
		display: block;
		aspect-ratio: 1;
		max-width: 100%;
		overflow: hidden;
		isolation: isolate;
		border-radius: 20px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		text-align: left;
		text-decoration: none;
	}

	.ct:hover,
	.ct:focus {
		color: var(--mapp-ink);
		text-decoration: none;
	}

	.ct span {
		position: absolute;
		z-index: 1;
		top: 9px;
		left: 10px;
		right: 8px;
		display: -webkit-box;
		overflow: hidden;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.2;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.ct img {
		position: absolute;
		right: 7%;
		bottom: 7%;
		width: 86%;
		height: 62%;
		object-fit: contain;
		object-position: right bottom;
		filter: drop-shadow(0 6px 8px rgba(39, 39, 39, 0.08));
		pointer-events: none;
	}

	/* Фото ещё не обработано (вырезание фона делается постепенно) — белое поле прячем умножением */
	.ct--raw img {
		mix-blend-mode: multiply;
		filter: none;
	}

	.ct.is-on {
		background: rgba(255, 236, 180, 0.9);
		box-shadow: inset 0 0 0 2px var(--brand-yellow), var(--mapp-glass-shadow);
	}

	.ct-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.msec-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		margin: 18px 0 8px;
		color: var(--mapp-ink);
		text-decoration: none;
	}

	.msec-head:first-child {
		margin-top: 4px;
	}

	.msec-head:hover {
		color: var(--mapp-ink);
		text-decoration: none;
	}

	.msec-head b {
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.15;
	}

	.msec-head em {
		flex: none;
		color: var(--mapp-muted);
		font-size: 12.5px;
		font-style: normal;
	}

	/* Панели в шторках «Связаться» и «Ещё» */
	.mpanel {
		padding: 14px 16px;
		border-radius: 22px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
	}

	.mpanel + .mpanel,
	.mpanel + .mbtns,
	.mpanel + .mmenu,
	.mmenu + .mmenu {
		margin-top: 8px;
	}

	.mpanel-title {
		display: block;
		font-size: 16px;
		font-weight: 600;
	}

	.mpanel-text {
		margin: 4px 0 12px;
		color: var(--mapp-muted);
		font-size: 13px;
		line-height: 1.45;
	}

	.mrow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		color: var(--mapp-ink);
		text-decoration: none;
	}

	.mrow:hover {
		color: var(--mapp-ink);
		text-decoration: none;
	}

	.mrow + .mrow {
		margin-top: 10px;
		padding-top: 12px;
		border-top: 1px solid var(--mapp-line);
	}

	.mrow span {
		min-width: 0;
	}

	.mrow small {
		display: block;
		margin-bottom: 2px;
		color: var(--mapp-muted);
		font-size: 12px;
	}

	.mrow b {
		font-size: 16px;
		font-weight: 600;
		overflow-wrap: anywhere;
		font-variant-numeric: tabular-nums;
	}

	.mrow i {
		flex: none;
		height: 36px;
		padding: 0 14px;
		border-radius: 999px;
		background: rgba(39, 39, 39, 0.06);
		font-size: 13px;
		font-style: normal;
		line-height: 36px;
	}

	.mmap {
		position: relative;
		margin: 12px -6px 0;
		overflow: hidden;
		aspect-ratio: 16 / 9;
		border-radius: 16px;
		background: #e9e7e1;
	}

	.mmap iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.mmap-link {
		display: inline-block;
		margin-top: 10px;
		color: var(--mapp-ink);
		font-size: 13.5px;
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--brand-yellow);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	.mbtns {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.mbtns--row {
		flex-direction: row;
	}

	.mbtns--row .mbtn {
		flex: 1 1 auto;
		padding: 0 14px;
		font-size: 14.5px;
		white-space: nowrap;
	}

	.mpanel + .mbtns {
		margin-top: 12px;
	}

	.mbtn,
	.mbtn:hover,
	.mbtn:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		padding: 0 18px;
		border-radius: 999px;
		background: var(--brand-yellow);
		box-shadow: 0 10px 22px -14px rgba(255, 187, 16, 0.9);
		color: var(--mapp-ink);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}

	.mbtn--dark,
	.mbtn--dark:hover,
	.mbtn--dark:focus {
		background: var(--mapp-ink);
		box-shadow: none;
		color: #fff;
	}

	.mmenu {
		padding: 4px 16px;
		border-radius: 22px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
	}

	.mmenu-title {
		margin: 0;
		padding: 12px 0 2px;
		color: var(--mapp-muted);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.mmenu-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mmenu-list li + li {
		border-top: 1px solid var(--mapp-line);
	}

	.mmenu-list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 0;
		color: var(--mapp-ink);
		font-size: 15px;
		text-decoration: none;
	}

	.mmenu-list a::after {
		content: "›";
		color: var(--mapp-muted);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.mtabs,
	.mtabs-ind,
	.msheet,
	.mapp-scrim {
		transition: none;
	}

	.mtab.is-anim svg,
	.mtab.is-anim svg * {
		animation: none !important;
	}
}


/* ==========================================================================
   Каталог на телефоне: баннер только на главной каталога, плитки разделов и типов,
   ряд фильтров по группам (значения — в шторке), карточки по две со свайпом фото.
   Разметка — templates/catalog/archive-layout.php (.mcat, .mcat-chips, .fp-sheet-*),
   поведение — js/mobile-app.js (часть «Каталог»).
   ========================================================================== */

.mcat,
.mcat-chips,
.fp-sheet-head,
.fp-sheet-foot,
.mcat-scrim {
	display: none;
}

@media (max-width: 767px) {
	/* --- Шапка каталога: на главной каталога только фото-баннер, в разделах/типах/коллекциях её нет --- */
	body.has-mobile-app.fp-catalog:not(.mcat-root) .catalog-hero {
		display: none;
	}

	body.has-mobile-app.fp-catalog .catalog-hero--full {
		padding: 10px 10px 0;
	}

	body.has-mobile-app.fp-catalog .catalog-hero--full .catalog-hero__card {
		display: block;
		padding: 0;
		border-radius: 22px;
		background: none;
		box-shadow: none;
	}

	body.has-mobile-app.fp-catalog .catalog-hero--full .catalog-hero__card > .catalog-hero__media {
		margin: 0;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 22px;
	}

	/* Текст шапки на телефоне не показываем — заголовок остаётся для поисковиков и экранных дикторов */
	body.has-mobile-app.fp-catalog .catalog-hero--full .catalog-hero__copy {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0 !important;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.has-mobile-app.fp-catalog .catalog-hero--plain {
		display: none;
	}

	/* --- Каркас --- */
	body.has-mobile-app .fp-layout.fp-layout {
		gap: 0;
		padding-left: 0;
		padding-right: 0;
	}

	body.has-mobile-app .fp-mobile-toggle,
	body.has-mobile-app .fp-catalog .fp-summary,
	body.has-mobile-app.fp-catalog .fp-summary {
		display: none;
	}

	.mcat {
		display: block;
	}

	.mcat,
	.mcat-chips,
	body.has-mobile-app .fp-layout > .fp-main {
		align-self: stretch;
		width: 100%;
		min-width: 0;
	}

	/* --- Плитки --- */
	.mcat-strip {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 12px 10px 4px;
		scroll-padding: 10px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.mcat-strip::-webkit-scrollbar {
		display: none;
	}

	.mcat-strip .ct {
		flex: 0 0 98px;
	}

	.mcat-strip.is-root {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
	}

	/* Полные названия разделов в две строки, слова не переносим; если слово всё же не влезает,
	   js/mobile-app.js (fitTiles) уменьшает шрифт */
	.mcat-strip.is-root .ct span {
		top: 8px;
		left: 7px;
		right: 3px;
		font-size: clamp(9.5px, 2.75vw, 11px);
		letter-spacing: -0.02em;
		-webkit-line-clamp: 2;
		-webkit-hyphens: manual;
		hyphens: manual;
		overflow-wrap: normal;
		word-break: normal;
	}

	.mcat-strip.is-root .ct img {
		height: 56%;
	}

	button.ct {
		width: auto;
		padding: 0;
		border: 0;
		font: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.ct.ct--back {
		background: var(--mapp-ink);
		box-shadow: none;
		color: #fff;
	}

	.ct.ct--back svg {
		position: absolute;
		right: 12px;
		bottom: 12px;
	}

	.mcat-title {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		padding: 14px 14px 2px;
	}

	.mcat-h {
		margin: 0;
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 22px;
		font-weight: 600;
		line-height: 1.1;
		text-wrap: balance;
	}

	.mcat-count {
		flex: none;
		color: var(--mapp-muted);
		font-size: 12px;
		white-space: nowrap;
	}

	/* --- Ряд фильтров: только названия групп, прилипает под шапкой --- */
	.mcat-chips {
		position: sticky;
		z-index: 20;
		top: var(--mapp-hdr, 72px);
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding: 8px 10px;
		scrollbar-width: none;
		transition: background 0.2s;
	}

	.mcat-chips::-webkit-scrollbar {
		display: none;
	}

	.mcat-chips.is-stuck {
		background: rgba(241, 241, 238, 0.88);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.mchip {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 5px;
		height: 36px;
		padding: 0 14px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 13px;
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.mchip--dark {
		background: var(--mapp-ink);
		box-shadow: none;
		color: #fff;
	}

	.mchip.is-on {
		background: rgba(255, 187, 16, 0.17);
		box-shadow: inset 0 0 0 1px rgba(255, 187, 16, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
		color: #4a3500;
	}

	.mchip svg.caret {
		opacity: 0.55;
	}

	/* --- Панель фильтра = шторка снизу --- */
	body.has-mobile-app .fp-sidebar.shop-sidebar {
		position: fixed;
		z-index: 8995;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: auto;
		max-height: 88vh;
		max-height: 88dvh;
		padding-bottom: var(--mapp-bottom);
		overflow: hidden;
		border-radius: 28px 28px 0 0;
		background: var(--mapp-sheet-bg);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), visibility 0s linear 0.32s;
	}

	body.has-mobile-app .fp-sidebar.shop-sidebar.is-sheet {
		transform: none;
		visibility: visible;
		transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
	}

	body.has-mobile-app .fp-sidebar .fp-panel {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		animation: none;
	}

	body.has-mobile-app .fp-sidebar .fp-panel::after {
		display: none;
	}

	body.has-mobile-app .fp-sidebar .fp-panel-scroll {
		max-height: none;
		overflow: visible;
		padding: 4px 16px 16px;
	}

	/* Разделы и типы выбираются плитками над товарами, заголовок — свой */
	body.has-mobile-app .fp-sidebar .fp-head,
	body.has-mobile-app .fp-sidebar .fp-sections,
	body.has-mobile-app .fp-sidebar [data-group="types"] {
		display: none !important;
	}

	/* Шторка одной группы: «Возраст» или «Коллекция» */
	body.has-mobile-app .fp-sidebar[data-mode="age"] .fp-group:not([data-group="age"]),
	body.has-mobile-app .fp-sidebar[data-mode="series"] .fp-group:not([data-group="series"]) {
		display: none !important;
	}

	body.has-mobile-app .fp-sidebar[data-mode="series"] .fp-collapse-btn,
	body.has-mobile-app .fp-sidebar[data-mode="age"] .fp-label {
		display: none;
	}

	body.has-mobile-app .fp-sidebar[data-mode="series"] .fp-collapse-body,
	body.has-mobile-app .fp-sidebar .fp-collapse-body {
		grid-template-rows: 1fr;
	}

	body.has-mobile-app .fp-sidebar .fp-collapse-btn {
		pointer-events: none;
	}

	body.has-mobile-app .fp-sidebar .fp-collapse-btn .fp-chevron {
		display: none;
	}

	.fp-sheet-head {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 16px 8px;
	}

	.fp-sheet-grab {
		position: absolute;
		top: 8px;
		left: 50%;
		width: 38px;
		height: 5px;
		margin-left: -19px;
		border-radius: 3px;
		background: #d6d5d0;
	}

	.fp-sheet-title {
		margin: 0;
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.1;
	}

	.fp-sheet-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(39, 39, 39, 0.06);
		color: var(--mapp-ink);
	}

	.fp-sheet-foot {
		display: flex;
		gap: 8px;
		padding: 10px 16px 12px;
		border-top: 1px solid var(--mapp-line);
	}

	.fp-sheet-reset,
	.fp-sheet-done {
		height: 52px;
		padding: 0 18px;
		border: 0;
		border-radius: 999px;
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.fp-sheet-reset {
		background: rgba(39, 39, 39, 0.06);
		color: var(--mapp-ink);
	}

	.fp-sheet-done {
		flex: 1 1 auto;
		background: var(--brand-yellow);
		box-shadow: 0 10px 22px -14px rgba(255, 187, 16, 0.9);
		color: var(--mapp-ink);
	}

	.mcat-scrim {
		position: fixed;
		z-index: 8990;
		inset: 0;
		display: block;
		background: rgba(20, 20, 20, 0.42);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s;
	}

	.mcat-scrim.is-on {
		opacity: 1;
		pointer-events: auto;
	}

	/* --- Карточки по две --- */
	body.has-mobile-app ul.algorithm-products.custom-product-grid.custom-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 4px 8px 0;
	}

	body.has-mobile-app .fp-grid .card-wrapper {
		display: grid;
		grid-template-areas: "img" "info";
		grid-template-rows: auto 1fr;
		padding: 5px;
		border-radius: 22px;
		overflow: visible;
	}

	body.has-mobile-app .fp-grid .card-wrapper:hover {
		top: 0;
		transform: none;
	}

	body.has-mobile-app .fp-grid .card-wrapper .product-image {
		grid-area: img;
		position: relative;
		display: block;
		height: auto;
		aspect-ratio: 4 / 3;
		padding: 0;
		overflow: hidden;
		border-radius: 16px 16px 12px 12px;
		background: #fff;
	}

	body.has-mobile-app .fp-grid .card-wrapper .product-image > img,
	.mpics img {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: contain;
	}

	/* Простое белое поле вместо multiply: в ленте свайпа смешивание не работает и вылезал белый прямоугольник */
	body.has-mobile-app .fp-grid .card-wrapper .product-image img {
		mix-blend-mode: normal;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Полоски листания наведением с компьютера на телефоне не нужны — есть свои (.mbars) */
	.card-gallery-bars {
		display: none;
	}

	/* Свайп фото в карточке (вместо листания наведением на компьютере) */
	.mpics {
		position: absolute;
		inset: 0;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.mpics::-webkit-scrollbar {
		display: none;
	}

	.mpics img {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.mbars {
		position: absolute;
		z-index: 2;
		left: 8px;
		right: 52px;
		bottom: 6px;
		display: flex;
		gap: 3px;
		pointer-events: none;
	}

	.mbars i {
		flex: 1;
		height: 2.5px;
		border-radius: 2px;
		background: rgba(39, 39, 39, 0.14);
	}

	.mbars i.is-on {
		background: rgba(39, 39, 39, 0.6);
	}

	body.has-mobile-app .fp-grid .product-badges {
		top: 10px;
		left: 10px;
	}

	body.has-mobile-app .fp-grid .product-info {
		grid-area: info;
		min-width: 0;
		padding: 9px 7px 7px;
	}

	body.has-mobile-app .fp-grid .product-sku {
		margin: 0 0 2px;
		padding-right: 40px;
		overflow: hidden;
		font-size: 11.5px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.has-mobile-app .fp-grid .product-title,
	body.has-mobile-app.fp-catalog .fp-grid .product-title {
		display: -webkit-box;
		min-height: 2.5em;
		margin: 0;
		overflow: hidden;
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.25;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product-title-sku {
		display: none;
	}

	body.has-mobile-app .fp-grid .product-meta-badges {
		margin-top: 4px;
		gap: 4px;
		font-size: 11px;
	}

	/* «В заявку» — жёлтый круг с той же сумкой на углу фото */
	body.has-mobile-app .fp-grid .product-footer {
		grid-area: img;
		z-index: 3;
		align-self: end;
		justify-self: end;
		width: 40px;
		height: 40px;
		margin: 0 4px -16px 0;
		padding: 0;
	}

	body.has-mobile-app .fp-grid .product-footer button.algorithm-add-to-cart {
		position: relative;
		width: 40px;
		height: 40px;
		min-height: 0;
		padding: 0 !important;
		border-radius: 50% !important;
		background: var(--brand-yellow) !important;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 14px -6px rgba(39, 39, 39, 0.35);
		color: transparent !important;
		font-size: 0 !important;
		overflow: hidden;
	}

	body.has-mobile-app .fp-grid .product-footer button.algorithm-add-to-cart::after,
	body.has-mobile-app .fp-grid .product-footer button.algorithm-add-to-cart:hover::after {
		top: 0;
		right: 0;
		width: 40px;
		height: 40px;
		background-color: transparent;
		box-shadow: none;
		background-size: 22px 22px;
		transform: none;
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 8.75a3 3 0 0 1 6 0' stroke='%23272727' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='6.25' y='9.75' width='11.5' height='10.75' rx='3' stroke='%23272727' stroke-width='1.6'/%3E%3C/svg%3E");
	}

	body.has-mobile-app .fp-grid .product-footer button.algorithm-add-to-cart:active {
		transform: scale(0.92);
	}

	body.has-mobile-app #load-more-container {
		padding: 16px 10px 0;
	}
}

/* ==========================================================================
   Заявка на телефоне — шторка снизу в два шага, как у ВБ: список с количеством,
   затем форма. Содержимое — прежнее (inc/custom_cart.php, js/custom-cart.js),
   шаг переключает js/mobile-app.js классом .is-step-form на #custom-cart-container.
   ========================================================================== */

.cart-step-bar,
.cart-step-back {
	display: none;
}

@media (max-width: 767px) {
	body.has-mobile-app #custom-cart-container {
		z-index: 8995;
		align-items: flex-end;
		justify-content: stretch;
		padding: 0;
		background: rgba(20, 20, 20, 0.42);
	}

	body.has-mobile-app #custom-cart-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		max-height: 90vh;
		max-height: 90dvh;
		margin: 0;
		padding: 0 0 var(--mapp-bottom);
		overflow: hidden;
		border: 0;
		border-radius: 28px 28px 0 0;
		background: var(--mapp-sheet-bg);
		box-shadow: none;
		color: var(--mapp-ink);
		transform: translateY(105%);
		transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
	}

	body.has-mobile-app #custom-cart-container.is-visible #custom-cart-content {
		transform: none;
	}

	/* Ручка и заголовок */
	body.has-mobile-app #custom-cart-content::before {
		content: "";
		flex: none;
		width: 38px;
		height: 5px;
		margin: 8px auto 2px;
		border-radius: 3px;
		background: #d6d5d0;
	}

	body.has-mobile-app #custom-cart-content .close-custom-cart {
		top: 18px;
		right: 16px;
		width: 36px;
		height: 36px;
		border: 0;
		background-color: rgba(39, 39, 39, 0.06);
		box-shadow: none;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-header {
		display: flex;
		flex: none;
		justify-content: flex-start;
		margin: 0;
		padding: 8px 64px 10px 16px;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-header__col--items {
		display: flex;
		align-items: center;
		gap: 10px;
		width: auto;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-header__col--form {
		display: none;
	}

	body.has-mobile-app #custom-cart-content .cart-count-title,
	body.has-mobile-app #custom-cart-content .cart-island-form__title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		color: var(--mapp-ink);
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.1;
		text-align: left;
		text-transform: none;
		white-space: nowrap;
	}

	body.has-mobile-app #custom-cart-content .cart-count-title .cart-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 24px;
		padding: 0 7px;
		border-radius: 12px;
		background: var(--brand-yellow);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 13px;
	}

	body.has-mobile-app #custom-cart-content .cart-clear-btn {
		height: 32px;
		padding: 0 13px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-size: 13px;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-wrapper {
		display: block;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 16px;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-items-panel,
	body.has-mobile-app #custom-cart-content .cart-order-form {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	/* Шаг 1 — список; шаг 2 — форма */
	body.has-mobile-app #custom-cart-container:not(.is-step-form) .cart-order-form,
	body.has-mobile-app #custom-cart-container.is-step-form .custom-cart-items-panel,
	body.has-mobile-app #custom-cart-container.is-step-form .custom-cart-header {
		display: none;
	}

	body.has-mobile-app #custom-cart-container.is-step-form .custom-cart-wrapper {
		padding-top: 14px;
	}

	/* Позиция заявки: фото слева, справа артикул, название и «− 1 +» с корзиной */
	body.has-mobile-app #custom-cart-content ul.cart-product-list.custom-product-grid {
		display: flex !important;
		flex-direction: column;
		gap: 8px;
		max-height: none;
		margin: 0;
		padding: 0;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .card-wrapper {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas: "img info" "img foot";
		grid-template-rows: 1fr auto;
		column-gap: 10px;
		max-width: none;
		height: auto;
		padding: 8px;
		border-radius: 22px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		transform: none;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-badges {
		display: none;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-image {
		grid-area: img;
		width: 96px;
		height: 96px;
		padding: 0;
		border-radius: 16px;
		background: #fff;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-info {
		grid-area: info;
		min-width: 0;
		padding: 2px 0 0;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-sku {
		margin: 0 0 2px;
		color: var(--mapp-muted);
		font-size: 11.5px;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-title {
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.25;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	body.has-mobile-app #custom-cart-content .cart-product-card .product-meta-badges {
		margin-top: 4px;
		font-size: 11px;
	}

	body.has-mobile-app #custom-cart-content .cart-product-footer {
		grid-area: foot;
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 6px 0 0;
	}

	body.has-mobile-app #custom-cart-content .cart-qty-controls {
		flex: 0 0 auto;
		gap: 0;
		min-height: 38px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 0 0 1px var(--mapp-line);
	}

	body.has-mobile-app #custom-cart-content .qty-minus,
	body.has-mobile-app #custom-cart-content .qty-plus {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}

	body.has-mobile-app #custom-cart-content .qty-num {
		min-width: 22px;
		font-size: 15px;
		font-variant-numeric: tabular-nums;
	}

	body.has-mobile-app #custom-cart-content .cart-remove-btn {
		width: 38px;
		height: 38px;
		margin-left: auto;
		background: rgba(39, 39, 39, 0.06);
	}

	body.has-mobile-app #custom-cart-content .cart-items-empty-tip {
		margin: 4px 0 12px;
		padding: 14px 16px;
		border: 0;
		border-radius: 18px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		font-size: 14px;
		line-height: 1.45;
	}

	body.has-mobile-app #custom-cart-content .cart-items-empty-tip.is-hidden {
		display: none;
	}

	/* Кнопка шага прилипает к низу шторки; z-index — поверх фото товаров (у них свой z-index) */
	.cart-step-bar {
		position: sticky;
		z-index: 5;
		bottom: 0;
		display: block;
		margin: 0 -16px;
		padding: 12px 16px;
		background: linear-gradient(rgba(241, 241, 238, 0), var(--mapp-sheet-bg) 30%);
	}

	.cart-items-empty-tip:not(.is-hidden) ~ .cart-step-bar {
		display: none;
	}

	.cart-step-next,
	body.has-mobile-app #custom-cart-content .cart-order-form-total-btn button {
		width: 100%;
		height: 52px;
		border: 0;
		border-radius: 999px;
		background: var(--brand-yellow);
		box-shadow: 0 10px 22px -14px rgba(255, 187, 16, 0.9);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 600;
	}

	.cart-step-back {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 38px;
		margin: 0 0 12px;
		padding: 0 14px 0 10px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 13.5px;
		font-weight: 500;
	}

	.cart-step-back::before {
		content: "";
		width: 14px;
		height: 14px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%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='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Форма — поля-таблетки на стекле, те же, что на компьютере */
	body.has-mobile-app #custom-cart-content .js-order-form {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-bottom: 16px;
	}

	body.has-mobile-app #custom-cart-content .cart-order-form-name-phone,
	body.has-mobile-app #custom-cart-content .cart-order-form-email-orgname {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
	}

	body.has-mobile-app #custom-cart-content .cart-field-wrap {
		width: 100%;
		margin: 0;
	}

	body.has-mobile-app #custom-cart-content .cart-field-wrap input,
	body.has-mobile-app #custom-cart-content .cart-order-form-company input {
		width: 100%;
		height: 52px;
		padding: 0 20px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-size: 16px;
	}

	body.has-mobile-app #custom-cart-content .cart-optional__toggle {
		width: auto;
		height: 38px;
		padding: 0 14px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
	}

	body.has-mobile-app #custom-cart-content .cart-order-form-total-btn {
		margin: 6px 0 0;
	}

	body.has-mobile-app #custom-cart-content .cart-island-form__consent {
		margin: 0;
		padding: 0 6px;
		font-size: 12.5px;
		line-height: 1.4;
	}
}

@media (max-width: 767px) {
	body.has-mobile-app #custom-cart-content .cart-step-back .cart-count {
		display: inline;
		min-width: 0;
		height: auto;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: inherit;
		font: inherit;
	}
}

/* Баннер главной каталога: подпись на фото, как в макете (js/mobile-app.js добавляет .mhero-cap) */
.mhero-cap {
	display: none;
}

@media (max-width: 767px) {
	/* Поиск в шапке: лупа по центру строки, поле как в макете */
	.navigation-site--graphite.navigation-site--compact .catalog-search-icon {
		top: 50%;
		left: 16px;
		width: 20px;
		height: 20px;
		transform: translateY(-50%);
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-input {
		height: 44px;
		padding: 0 40px 0 46px;
		border: 0;
		background: #2a2a2c;
		font-size: 15px;
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-input::placeholder {
		color: rgba(255, 255, 255, 0.55);
	}

	body.has-mobile-app.fp-catalog .catalog-hero__media {
		position: relative;
	}

	body.has-mobile-app.fp-catalog .catalog-hero__media::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.58));
		pointer-events: none;
	}

	body.has-mobile-app .mhero-cap {
		position: absolute;
		z-index: 2;
		left: 14px;
		right: 14px;
		bottom: 26px;
		display: block;
		color: #fff;
		pointer-events: none;
	}


	.mhero-cap b {
		display: -webkit-box;
		overflow: hidden;
		font-family: var(--font-family);
		letter-spacing: -0.02em;
		font-size: 19px;
		font-weight: 600;
		line-height: 1.2;
		text-wrap: balance;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	body.has-mobile-app.fp-catalog .catalog-hero__dots {
		z-index: 3;
		bottom: 8px;
	}
}

/* ==========================================================================
   Страница товара на телефоне: фото листаются пальцем, кнопка «на весь экран»
   (прежний PhotoSwipe), «Поделиться» рядом с «Назад», внизу вместо нижнего меню —
   остров «количество + Добавить в заявку» и кнопка «Связаться».
   Поведение — js/mobile-app.js (часть «Товар»).
   ========================================================================== */

.mgal,
.mgal-num,
.mgal-full,
.mshare,
.mpp-ask,
.mtoast {
	display: none;
}

@media (max-width: 767px) {
	/* Нижнее меню прячется — его место занимает остров заявки */
	/* Ещё и прозрачная: в iOS 26 страница тянется под панель Safari, и сдвинутое меню просвечивало */
	body.has-mobile-app.single-algorithm_product .mtabs {
		transform: translate(-50%, 160%);
		opacity: 0;
		pointer-events: none;
	}

	/* «Назад» слева, «Поделиться» справа */
	body.has-mobile-app.single-algorithm_product .custom-single-product-back-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mshare {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 38px;
		padding: 0 14px 0 12px;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 13.5px;
		font-weight: 500;
		cursor: pointer;
	}

	/* Лента фото со свайпом */
	body.has-mobile-app .algorithm-product-gallery-main-wrap {
		position: relative;
	}

	.mgal {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		border-radius: 22px;
		background: #fff;
	}

	.mgal::-webkit-scrollbar {
		display: none;
	}

	.mgal > .algorithm-product-gallery-main,
	.mgal-slide {
		flex: 0 0 100%;
		scroll-snap-align: center;
		aspect-ratio: 4 / 3;
		height: auto !important;
		margin: 0;
		padding: 0;
		border: 0;
		background: #fff;
	}

	.mgal-slide img,
	.mgal > .algorithm-product-gallery-main img {
		display: block;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: contain;
	}

	body.has-mobile-app .algorithm-product-gallery[data-mgal] .algorithm-gallery-nav,
	body.has-mobile-app .algorithm-product-gallery[data-mgal] .algorithm-product-gallery-thumbs-wrap {
		display: none;
	}

	.mgal-num {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
		padding: 3px 9px;
		border-radius: 999px;
		background: rgba(39, 39, 39, 0.72);
		color: #fff;
		font-size: 12px;
		font-variant-numeric: tabular-nums;
		pointer-events: none;
	}

	.mgal-num[hidden] {
		display: none;
	}

	.mgal-full {
		position: absolute;
		top: 10px;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 0 0 1px var(--mapp-line);
		color: var(--mapp-ink);
	}

	/* Остров заявки внизу */
	body.has-mobile-app.single-algorithm_product .custom-single-product-actions {
		position: fixed;
		z-index: 9000;
		left: var(--mapp-gap);
		right: var(--mapp-gap);
		bottom: calc(var(--mapp-gap) + env(safe-area-inset-bottom, 0px));
		margin: 0;
		padding: 6px;
		border-radius: 999px;
		background: rgba(24, 24, 26, 0.86);
		box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(22px) saturate(180%);
		backdrop-filter: blur(22px) saturate(180%);
	}

	body.has-mobile-app.single-algorithm_product .custom-single-product-actions-row {
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}

	.mpp-ask {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #2a2a2c;
		color: #fff;
	}

	body.has-mobile-app.single-algorithm_product .custom-quantity-wrapper {
		width: auto;
		min-width: 0;
		height: 52px;
		gap: 2px;
		padding: 0 4px;
		background: #2a2a2c;
	}

	body.has-mobile-app.single-algorithm_product .custom-quantity-wrapper .qty-btn {
		width: 40px;
		height: 44px;
		color: #fff;
	}

	body.has-mobile-app.single-algorithm_product .custom-quantity-wrapper .qty-num {
		color: #fff;
	}

	body.has-mobile-app.single-algorithm_product .custom-single-add-to-card {
		height: 52px;
		padding: 0 14px;
		background: var(--brand-yellow);
		box-shadow: none;
		color: var(--mapp-ink);
		font-size: 15px;
		white-space: nowrap;
	}

	/* Подсказка «Ссылка скопирована» */
	.mtoast {
		position: fixed;
		z-index: 9100;
		left: 50%;
		bottom: calc(var(--mapp-bottom) + 12px);
		display: block;
		max-width: calc(100vw - 32px);
		padding: 10px 14px;
		border-radius: 14px;
		background: var(--mapp-ink);
		color: #fff;
		font-size: 13px;
		line-height: 1.35;
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%, 16px);
		transition: opacity 0.25s, transform 0.25s;
	}

	.mtoast.is-on {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* ==========================================================================
   Полосы прокрутки на телефоне: тонкие, в цвет интерфейса. Пока открыта заявка,
   страница под ней не прокручивается — вторая полоса рядом со шторкой не нужна.
   ========================================================================== */
@media (max-width: 767px) {
	html:has(body.has-mobile-app) {
		scrollbar-width: thin;
		scrollbar-color: rgba(39, 39, 39, 0.28) transparent;
	}

	html:has(body.has-mobile-app)::-webkit-scrollbar {
		width: 6px;
	}

	html:has(body.has-mobile-app)::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: rgba(39, 39, 39, 0.28);
	}

	html:has(body.has-mobile-app #custom-cart-container.is-visible) {
		overflow: hidden;
	}

	body.has-mobile-app #custom-cart-content .custom-cart-wrapper {
		scrollbar-width: thin;
		scrollbar-color: rgba(39, 39, 39, 0.22) transparent;
	}
}

/* ==========================================================================
   Подвал на телефоне: только тонкая строка «© · Политика · Согласие».
   Ссылки на страницы — в «Ещё», контакты и реквизиты — в «Связаться».
   ========================================================================== */
@media (max-width: 767px) {
	body.has-mobile-app .site-footer {
		margin-top: 24px;
		padding-bottom: 12px;
	}

	body.has-mobile-app .site-footer--island {
		padding: 0 8px;
		border: 0;
		background: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.has-mobile-app .footer-grid {
		display: none;
	}

	body.has-mobile-app .footer-bottom {
		margin: 0;
		padding: 0;
		border: 0;
	}

	/* Три пункта — три строки: точки-разделители на переносе повисали в конце строки */
	body.has-mobile-app .footer-bottom-row {
		flex-direction: column;
		gap: 0;
	}

	body.has-mobile-app .footer-bottom-sep {
		display: none;
	}

	body.has-mobile-app .footer-bottom,
	body.has-mobile-app .footer-bottom a,
	body.has-mobile-app .footer-bottom-start,
	body.has-mobile-app .footer-bottom-sep {
		font-size: 11px;
		line-height: 1.5;
		color: var(--mapp-muted) !important;
	}

	/* Реквизиты мелким текстом внизу шторки «Связаться» */
	.mlegal {
		margin: 14px 4px 0;
		color: var(--mapp-muted);
		font-size: 11px;
		line-height: 1.5;
	}

	.mlegal span + span::before {
		content: " · ";
	}

	/* Карточка товара: под описанием сразу строка подвала, без пустых отступов */
	body.has-mobile-app.single-algorithm_product .single-product-page {
		padding-bottom: 0;
	}

	body.has-mobile-app.single-algorithm_product .custom-single-product-wrap {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Поиск на весь экран (js/mobile-app.js): остров шапки растягивается от своего
   места до краёв экрана. Сверху поле и «Отмена», ниже светлая панель — недавние
   запросы и популярные типы, при вводе — подсказки списком.
   ========================================================================== */
@media (max-width: 767px) {
	html.msearch-open {
		overflow: hidden;
	}

	/* Остров fixed внутри шапки: поднимаем всю шапку над страницей, нижнюю панель прячем */
	html.msearch-open .site-header-area {
		z-index: 10000;
	}

	html.msearch-open .mtabs {
		transform: translate(-50%, 160%);
	}

	/* Плашка cookie висит над всем сайтом и закрывала поиск и шторки (разделы, связаться, ещё,
	   заявку, фильтры) — пока они открыты, её не видно; после закрытия возвращается */
	html.msearch-open .cky-consent-container,
	body:has(.mapp.is-sheet-open) .cky-consent-container,
	body:has(#custom-cart-container.is-visible) .cky-consent-container,
	body:has(.fp-sidebar.is-sheet) .cky-consent-container {
		display: none !important;
	}

	.navigation-site--island.navigation-site--compact.is-msearch {
		position: fixed;
		top: var(--ms-top);
		left: var(--ms-left);
		display: flex;
		flex-direction: column;
		width: var(--ms-w);
		height: var(--ms-h);
		max-width: none;
		margin: 0;
		overflow: hidden;
		transition:
			top 0.34s var(--ease-out),
			left 0.34s var(--ease-out),
			width 0.34s var(--ease-out),
			height 0.34s var(--ease-out),
			border-radius 0.34s var(--ease-out),
			padding 0.34s var(--ease-out);
	}

	.navigation-site--island.navigation-site--compact.is-msearch-full {
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding-top: env(safe-area-inset-top, 0px);
		border: 0; /* рамка острова тёмной полоской обводила светлую панель */
		border-radius: 0;
	}

	/* Строка с логотипом уезжает, поле поднимается к верху экрана (как при прокрутке) */
	.navigation-site--compact.is-msearch-full .navigation-site-row--main {
		height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.navigation-site--compact.is-msearch .navigation-site-row--search,
	.navigation-site--compact.is-msearch .navigation-site-row--search[hidden],
	.navigation-site--compact.is-msearch .navigation-site-row--search.is-open {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
		max-height: none; /* у открытой полосы поиска на компьютере предел 640px */
		padding-bottom: 0;
	}

	.navigation-site--compact.is-msearch-full .navigation-site-row--search,
	.navigation-site--compact.is-msearch-full .navigation-site-row--search[hidden] {
		padding-top: 10px;
	}

	.navigation-site--compact.is-msearch .site-search-inline {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	.navigation-site--compact.is-msearch .catalog-search {
		display: grid;
		flex: 1 1 auto;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto minmax(0, 1fr);
		align-items: center;
		min-height: 0;
	}

	.navigation-site--compact.is-msearch .msearch-cancel {
		display: block;
		height: 42px;
		margin: 0;
		padding: 0 4px 0 14px;
		border: 0;
		background: none;
		color: #fff;
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Светлая панель — как шторки нижней панели */
	.msearch-panel {
		display: none;
	}

	.navigation-site--compact.is-msearch .msearch-panel {
		display: block;
		grid-column: 1 / -1;
		align-self: stretch;
		min-height: 0;
		margin: 12px -12px 0;
		padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 22px 22px 0 0;
		background: var(--mapp-sheet-bg);
		color: var(--mapp-ink);
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.2s ease, transform 0.34s var(--ease-out);
		-webkit-overflow-scrolling: touch;
	}

	.navigation-site--compact.is-msearch-full .msearch-panel {
		opacity: 1;
		transform: none;
		transition-delay: 0.08s;
	}

	.msearch-panel.is-typing .msearch-empty {
		display: none;
	}

	/* --- Пустой поиск: недавние и популярные типы --- */
	.msearch-h {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 0 0 8px;
	}

	.msearch-h b {
		font-size: 17px;
		font-weight: 600;
		letter-spacing: -0.02em;
	}

	.msearch-recent {
		margin-bottom: 22px;
	}

	.msearch-recent-clear {
		padding: 0;
		border: 0;
		background: none;
		color: var(--mapp-muted);
		font-family: var(--font-family);
		font-size: 14px;
	}

	.msearch-recent-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.msearch-recent-list li {
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--mapp-line);
	}

	.msearch-recent-q {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
		height: 46px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mapp-ink);
		font-family: var(--font-family);
		font-size: 15px;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Часы перед запросом */
	.msearch-recent-q::before {
		content: "";
		flex: 0 0 18px;
		height: 18px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390969b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.msearch-recent-x {
		flex: 0 0 36px;
		height: 36px;
		margin-right: -8px;
		padding: 0;
		border: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%2390969b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
	}

	.msearch-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.msearch-chips a {
		display: inline-flex;
		align-items: center;
		height: 38px;
		padding: 0 15px;
		border-radius: 999px;
		background: var(--mapp-glass);
		box-shadow: var(--mapp-glass-shadow);
		color: var(--mapp-ink);
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
	}

	/* --- Подсказки списком: фото · артикул · название --- */
	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestions {
		position: static;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: visible;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestions-row {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		overflow: visible;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestion {
		display: flex;
		flex: none;
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px solid var(--mapp-line);
		border-radius: 0;
		background: none;
		color: var(--mapp-ink);
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestion-thumb {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
		aspect-ratio: auto;
		padding: 4px;
		border-radius: 14px;
		background: #fff;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestion-body {
		gap: 2px;
		padding: 0;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestion-sku {
		color: var(--mapp-muted);
		font-size: 12px;
		font-weight: 500;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-suggestion-title {
		display: -webkit-box;
		overflow: hidden;
		color: var(--mapp-ink);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-view-all {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		margin: 16px 0 0;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--mapp-ink);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
	}

	body.has-mobile-app .navigation-site--compact .msearch-panel .catalog-search-empty {
		padding: 32px 0;
		color: var(--mapp-muted);
		font-size: 15px;
		text-align: center;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.navigation-site--island.navigation-site--compact.is-msearch,
	.navigation-site--compact.is-msearch .msearch-panel {
		transition: none;
	}
}

/* Safari на iPhone приближает страницу, когда в фокусе поле со шрифтом меньше 16px: остров поиска
   и формы вылезали за край экрана. 16px — у всех полей ввода на телефоне. */
@media (max-width: 767px) {
	body.has-mobile-app input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
	body.has-mobile-app textarea,
	body.has-mobile-app select {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   Шапка телефона — как у ВБ: тёмная полоса вплотную к верху экрана на всю ширину,
   внутри поле поиска. Safari подкрашивает зону под часами в цвет верхнего края.
   ========================================================================== */
@media (max-width: 767px) {
	body.has-mobile-app .header-shell {
		padding: 0;
	}

	body.has-mobile-app .navigation-site--island.navigation-site--compact:not(.is-msearch) {
		top: 0;
		padding: 0 12px;
		border-width: 0;
		border-radius: 0 0 24px 24px;
		box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35); /* без блика сверху: он светлой линией отделял полосу от зоны часов */
	}

	body.has-mobile-app .navigation-site--compact .navigation-site-row--main {
		display: none;
	}

	body.has-mobile-app .navigation-site--compact .navigation-site-row--search,
	body.has-mobile-app .navigation-site--compact .navigation-site-row--search[hidden],
	body.has-mobile-app .navigation-site--compact .navigation-site-row--search.is-open,
	body.has-mobile-app .navigation-site--compact.is-condensed .navigation-site-row--search {
		padding: 6px 0 12px;
	}

	body.has-mobile-app .navigation-site--compact.is-msearch .navigation-site-row--search {
		padding: 6px 0 0;
	}

	/* Знак «a» слева от поиска — небольшой и белый, как яблоко в шапке apple.com */
	body.has-mobile-app .navigation-site--compact:not(.is-msearch) .navigation-site-row--search {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	body.has-mobile-app .navigation-site--compact .site-search-inline {
		flex: 1 1 auto;
		min-width: 0;
	}

	.navigation-site--compact:not(.is-msearch) .island-mark {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		height: 44px;
		padding: 0 2px 0 4px;
		color: rgba(255, 255, 255, 0.94);
		-webkit-tap-highlight-color: transparent;
	}

	.island-mark svg {
		display: block;
	}

	body.has-mobile-app .navigation-site--island.navigation-site--compact.is-msearch-full {
		padding: env(safe-area-inset-top, 0px) 12px 0;
		border-radius: 0;
		box-shadow: none;
	}
}