/**
 * Lumise v2 Layout — SSOT (Single Source of Truth)
 * Version: 2.0
 * Source: lumise.e1.layout.v2.json v1.1.0
 *
 * ЗАПРЕТЫ:
 * - !important ЗАПРЕЩЁН
 * - JS хаки ЗАПРЕЩЕНЫ
 * - Костыли ЗАПРЕЩЕНЫ
 *
 * КРИТИЧНО: overlay элементы (#lumise-zoom-wrp, #lumise-stage-nav, etc.)
 * должны иметь grid-area: main для stacking поверх canvas
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
	--lumise-nav-h: 54px;
	--lumise-nav-stack-offset: 54px;
	--lumise-panel-header-offset: 54px;
}

/* ==========================================================================
   fix53: Theme Reset — сброс foreign стилей (global.min.css, everfox-*.css)
   Источник: findForeign() анализ
   ========================================================================== */

/* img reset from global.min.css */
body.lumise-mode-v2 #LumiseDesign img,
body.lumise-mode-v2 #lumise-navigations img {
	max-width: none;
	height: auto;
}

/* button reset from everfox-v2.css, global.min.css */
body.lumise-mode-v2 #LumiseDesign button,
body.lumise-mode-v2 #LumiseDesign a.button,
body.lumise-mode-v2 #LumiseDesign .button {
	border-radius: 0;
	padding: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	overflow: visible;  /* fix54: badge не обрезается */
	background: transparent;  /* сброс --global-palette-btn-bg */
	color: inherit;  /* сброс --global-palette-btn */
}

/* fix54: Add to Cart button */
body.lumise-mode-v2 #lumise-addToCart {
	position: relative;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
}

/* fix54: Cart icon SVG */
body.lumise-mode-v2 #lumise-addToCart svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* fix62: SVG fill reset — тема header.scss переопределяет fill */
body.lumise-mode-v2 #LumiseDesign svg [fill]:not([fill='none']),
body.lumise-mode-v2 #lumise-navigations svg [fill]:not([fill='none']) {
	fill: inherit;
}

/* fix62: stage-nav — активная сторона не кликабельна */
body.lumise-mode-v2 #lumise-stage-nav ul li.active {
	pointer-events: none;
	opacity: 0.3;
	cursor: default;
}

/* fix54: Cart badge */
body.lumise-mode-v2 #lumise-addToCart small {
	position: absolute;
	top: -8px;
	right: -10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
	color: #fff;
	background: var(--global-palette1, #f97a36);
}

/* fix54: ::before shine effect from global.min.css */
body.lumise-mode-v2 #LumiseDesign button::before,
body.lumise-mode-v2 #LumiseDesign a.button::before,
body.lumise-mode-v2 #LumiseDesign .button::before {
	content: none;
}

/* fix55: Modal overlay — полные стили (migrated from legacy:727-802) */
body.lumise-mode-v2 #lumise-update-cart-confirm {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	text-align: center;
	background: rgba(0, 0, 0, 0.52);
}

body.lumise-mode-v2 #lumise-update-cart-confirm > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 420px;
	width: calc(100% - 30px);
	padding: 50px 0;
	background: #f1f1f1;
	border-radius: 5px;
	box-shadow: 5px 5px 25px 0 rgba(0, 0, 0, 0.5);
}

body.lumise-mode-v2 #lumise-update-cart-confirm > div > i.close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 26px;
	color: #ccc;
	cursor: pointer;
	transition: color ease 250ms;
}

body.lumise-mode-v2 #lumise-update-cart-confirm > div > i.close:hover {
	color: #333;
}

body.lumise-mode-v2 #lumise-update-cart-confirm img {
	width: 100px;
	display: inline-block;
	margin: 0 auto 20px;
}

body.lumise-mode-v2 #lumise-update-cart-confirm em {
	display: block;
	font-size: 20px;
	margin-bottom: 10px;
	font-style: inherit;
}

body.lumise-mode-v2 #lumise-update-cart-confirm ul {
	list-style: none;
	margin: 35px 0;
	padding: 0;
	display: inline-block;
	text-align: center;
}

body.lumise-mode-v2 #lumise-update-cart-confirm ul li {
	display: inline-block;
	padding: 0 14px;
	margin: 0;
	height: 22px;
	border-right: 1px solid #ccc;
	cursor: pointer;
}

body.lumise-mode-v2 #lumise-update-cart-confirm ul li:last-child {
	border: none;
}

body.lumise-mode-v2 #lumise-update-cart-confirm ul li a {
	text-decoration: none;
}

body.lumise-mode-v2 #lumise-update-cart-confirm ul li a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   fix57: #lumise-stage-nav — превью сторон товара (Front/Back/etc.)
   Проблема: fix53 img reset (height: auto) перебивал height: 80px для превью
   ========================================================================== */

body.lumise-mode-v2 #lumise-stage-nav ul {
	display: flex;
	align-items: center;  /* fix58: центрируем children по вертикали */
	margin: 0;
	padding: 0;
	border-radius: 2px;
	transition: none;
}

body.lumise-mode-v2 #lumise-stage-nav ul li {
	display: inline-block;
	position: relative;
	min-height: 40px;
	margin: 0;
	padding: 6px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 250ms;
}

/* li[data-nav] — кнопки prev/next (скрыты по умолчанию, показываются в stages-expand) */
body.lumise-mode-v2 #lumise-stage-nav ul li[data-nav] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;  /* fix58: центр по вертикали относительно ul */
	padding: 6px;
	opacity: 0.5;
	cursor: pointer;
}

body.lumise-mode-v2 #lumise-stage-nav ul li[data-nav]:hover {
	opacity: 1;
}

body.lumise-mode-v2 #lumise-stage-nav ul li[data-nav].disbl {
	opacity: 0.15;
	cursor: default;
	pointer-events: none;
}

body.lumise-mode-v2 #lumise-stage-nav ul li.disbl {
	cursor: default;
	opacity: 0.1;
}

body.lumise-mode-v2 #lumise-stage-nav ul li.disbl span {
	display: none;
}

body.lumise-mode-v2 #lumise-stage-nav ul li[data-stage] {
	padding: 0;
	margin-right: 10px;  /* gap между превью */
	border-radius: 3px;
}

body.lumise-mode-v2 #lumise-stage-nav ul li[data-stage]:last-of-type {
	margin-right: 0;
}

body.lumise-mode-v2 #lumise-stage-nav ul li:hover,
body.lumise-mode-v2 #lumise-stage-nav ul li.active {
	opacity: 1;
}

body.lumise-mode-v2 #lumise-stage-nav ul li img {
	height: 80px;  /* fix57: перебивает fix53 height: auto */
	border-radius: 2px;
}

body.lumise-mode-v2 #lumise-stage-nav ul li span {
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
}

body.lumise-mode-v2 #lumise-stage-nav:not(.stages-expand) ul li.active span {
	display: none;
}

body.lumise-mode-v2 #lumise-stage-nav ul li:last-child {
	border: none;
}

body.lumise-mode-v2 #lumise-stage-nav ul li svg.lumise-nav-arrow {
	width: 24px;
	height: 24px;
	color: #000;
	flex-shrink: 0;
}

/* ==========================================================================
   ✅ LEGACY CLEANUP COMPLETE — До этой строки (fix53-57) дубли удалены
   Дата: 2026-02-02
   Удалено из legacy:
   - #lumise-update-cart-confirm (строки 727-802)
   - Ссылки modal (строки 682-686)
   ========================================================================== */

/* ==========================================================================
   ⚠️ DEBUG: УДАЛИТЬ ПОСЛЕ НАСТРОЙКИ ZOOM ⚠️

   Дата: 2026-02-03

   ЧТО УДАЛИТЬ (3 блока):
   1. Этот блок (строки ~291-408) — цветные фоны и подписи блоков
   2. Красные линии canvas (строки ~936-964) — границы #lumise-main
   3. Блокировка drag (строки ~966-972) — pointer-events: none

   ========================================================================== */
body.lumise-mode-v2 #lumise-navigations {
	outline: 1px solid #e74c3c;            /* DEBUG: красная рамка */
	background-color: rgba(231, 76, 60, 0.5); /* DEBUG: красный фон 50% */
}
body.lumise-mode-v2 #lumise-navigations::before {
	content: "nav";           /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #e74c3c;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 #lumise-top-pick-sizes {
	outline: 1px solid #3498db;            /* DEBUG: синяя рамка */
	background-color: rgba(52, 152, 219, 0.5); /* DEBUG: синий фон 50% */
}
body.lumise-mode-v2 #lumise-top-pick-sizes::before {
	content: "sizes";         /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #3498db;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 #lumise-top-tools {
	outline: 1px solid #9b59b6;            /* DEBUG: фиолетовая рамка */
	background-color: rgba(155, 89, 182, 0.5); /* DEBUG: фиолетовый фон 50% */
}
body.lumise-mode-v2 #lumise-top-tools::before {
	content: "tools";         /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #9b59b6;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 #LumiseDesign #lumise-prods {
	position: relative;  /* для ::before */
	grid-area: prods;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 60px;
	width: 100%;
	padding: 0 10px;
	outline: 1px solid #9b59b6;            /* DEBUG: фиолетовая рамка */
	background-color: rgba(155, 89, 182, 0.5); /* DEBUG: фиолетовый фон 50% */
}
body.lumise-mode-v2 #lumise-prods::before {
	content: "prods";         /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #9b59b6;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 #lumise-main {
	outline: 1px solid #2ecc71;            /* DEBUG: зелёная рамка */
	background-color: rgba(46, 204, 113, 0.5); /* DEBUG: зелёный фон 50% */
}
body.lumise-mode-v2 #lumise-main::before {
	content: "main";          /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #2ecc71;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 #lumise-left {
	outline: 1px solid #f39c12;            /* DEBUG: оранжевая рамка */
	background-color: rgba(243, 156, 18, 0.5); /* DEBUG: оранжевый фон 50% */
}
body.lumise-mode-v2 #lumise-left::before {
	content: "left";          /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #f39c12;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}

body.lumise-mode-v2 .lumise-left-nav-wrp {
	outline: 1px solid #ffb6c1;            /* DEBUG: розовая рамка */
	background-color: rgba(255, 182, 193, 0.5); /* DEBUG: розовый фон 50% */
}
body.lumise-mode-v2 .lumise-left-nav-wrp::before {
	content: "tabs";          /* DEBUG: подпись блока */
	position: absolute;
	top: 0;
	left: 0;
	background: #ffb6c1;
	color: #fff;
	font: 10px/1 monospace;
	padding: 2px 4px;
	z-index: 9999;
}
/* ========================================================================== */
/* ⚠️ КОНЕЦ DEBUG СЕКЦИИ — УДАЛИТЬ ПОСЛЕ НАСТРОЙКИ ⚠️                        */
/* ========================================================================== */

/* ==========================================================================
   BODY & WRAPPER RESETS (единственное место с префиксом)
   ========================================================================== */
body.lumise-mode-v2 {
	margin: 0;
	padding: 0;
	height: auto;
	overflow: auto;
}

body.lumise-mode-v2 .wrapper,
body.lumise-mode-v2 #wrapper {
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	display: block;
}

body.lumise-mode-v2 #lumise-workspace {
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
}

/* ==========================================================================
   PAGE CONTAINER — .lumise-wrapper
   Отвечает за: max-width, padding, центрирование
   ========================================================================== */
body.lumise-mode-v2 .lumise-wrapper {
	width: 100%;
	max-width: 1430px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0.7rem;  /* mobile default */
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	body.lumise-mode-v2 .lumise-wrapper {
		padding: 0 0.9375rem;  /* desktop: 15px */
	}
}

/* ==========================================================================
   ROOT GRID — #LumiseDesign
   Отвечает за: grid layout (колонки, строки, области)
   ========================================================================== */
body.lumise-mode-v2 #LumiseDesign {
	display: grid;
	grid-template-columns: minmax(512px, 700px) minmax(512px, 700px);
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"nav   nav"
		"prods prods"
		"sizes tabs"
		"main  left";
	justify-content: center;
	gap: 12px clamp(0px, calc((100% - 1024px) * 0.05), 16px);
}

body.lumise-mode-v2 #LumiseDesign {
	overflow: visible;
	position: relative;  /* fix58: для absolute overlay элементов */
}

/* ==========================================================================
   DISPLAY CONTENTS — #lumise-workspace
   Дети участвуют в parent grid
   ========================================================================== */
body.lumise-mode-v2 #LumiseDesign #lumise-workspace {
	display: contents;
}

/* ==========================================================================
   GRID AREA PLACEMENTS — основные элементы
   Префикс body.lumise-mode-v2 #LumiseDesign для победы над legacy
   ========================================================================== */
body.lumise-mode-v2 #LumiseDesign #lumise-navigations {
	grid-area: nav;
	position: sticky;
	top: 0;
	height: var(--lumise-nav-h);
	z-index: 99;
	overflow: visible;  /* fix48: dropdown выходит за границы */
}

body.lumise-mode-v2 #LumiseDesign #lumise-prods {
	grid-area: prods;
	height: 60px;
}

body.lumise-mode-v2 #LumiseDesign #lumise-top-pick-sizes {
	grid-area: sizes;
	position: sticky;
	top: var(--lumise-nav-h);
	z-index: 35;  /* ниже dropdown навигации (99) */
}

body.lumise-mode-v2 #LumiseDesign #lumise-top-tools {
	grid-area: tools;
	position: sticky;
	top: var(--lumise-nav-h);
	z-index: 50;  /* dropdown меню должен быть поверх #lumise-left */
}

body.lumise-mode-v2 #LumiseDesign #lumise-main {
	grid-area: main;
	position: relative;  /* fix59: для absolute позиционирования overlay */
	z-index: 10;
	height: 692px;
	max-height: 692px;
	/* fix60: центрирование детей */
	display: flex;
	align-items: center;
	justify-content: center;
}

body.lumise-mode-v2 #LumiseDesign #lumise-left {
	grid-area: left;
	position: relative;  /* для debug ::before и absolute дочерних элементов */
	z-index: 40;  /* ниже #lumise-top-tools (50) */
	align-self: start;
	max-height: 1200px;
	overflow: auto;
}

body.lumise-mode-v2 #LumiseDesign .lumise-left-nav-wrp {
	grid-area: tabs;
	position: relative;
	z-index: 30;  /* ниже dropdown навигации (99) и tools (50) */
}

/* fix60: .canvas-wrapper — перенесено из legacy, центрирование в #lumise-main */
body.lumise-mode-v2 #LumiseDesign #lumise-main .canvas-wrapper {
	position: relative;
	display: block;
}

body.lumise-mode-v2 #LumiseDesign #lumise-main .canvas-wrapper .lumise-snap-line-x,
body.lumise-mode-v2 #LumiseDesign #lumise-main .canvas-wrapper .lumise-snap-line-y {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	width: 0;
	display: none;
}

body.lumise-mode-v2 #LumiseDesign #lumise-main .canvas-wrapper .lumise-snap-line-y {
	left: 50%;
	top: 0;
	border-right: 1px dashed #3fc7ba;
	height: 100%;
}

body.lumise-mode-v2 #LumiseDesign #lumise-main .canvas-wrapper .lumise-snap-line-x {
	left: 0;
	top: 50%;
	border-bottom: 1px dashed #3fc7ba;
	width: 100%;
}


/* ==========================================================================
   КРИТИЧНО: Overlay элементы — grid-area: main для stacking
   #lumise-zoom-wrp и #lumise-stage-nav перемещены ВНУТРЬ #lumise-main — им не нужен grid-area
   ========================================================================== */
body.lumise-mode-v2 #LumiseDesign #lumise-zoom-thumbn,
body.lumise-mode-v2 #LumiseDesign #lumise-notices,
body.lumise-mode-v2 #LumiseDesign #nav-bottom-left {
	grid-area: main;
}

/* fix48: стили #lumise-navigations — в v3.components.css */

/* ==========================================================================
   OVERLAY STACKING (поверх canvas)
   fix59: zoom-wrp и stage-nav ВНУТРЬ #lumise-main с absolute от низа
   ========================================================================== */
body.lumise-mode-v2 #LumiseDesign #lumise-main #lumise-zoom-wrp {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
}

body.lumise-mode-v2 #LumiseDesign #lumise-main #lumise-stage-nav {
	position: absolute;
	bottom: calc(20px + 46px + 10px);  /* zoom bottom + zoom height + gap */
	left: 50%;
	transform: translateX(-50%);
	z-index: 21;
}

body.lumise-mode-v2 #LumiseDesign #lumise-notices {
	z-index: 30;
	align-self: start;
	justify-self: center;
}

body.lumise-mode-v2 #LumiseDesign #nav-bottom-left {
	z-index: 22;
	align-self: end;
	justify-self: start;
}

body.lumise-mode-v2 #LumiseDesign #lumise-zoom-thumbn {
	z-index: 19;
	align-self: end;
	justify-self: center;
}

/* ==========================================================================
   MOBILE + TABLET: Убираем sticky с site header на странице конструктора
   ========================================================================== */
@media (max-width: 1023px) {
	body.lumise-standalone-page .item-is-fixed,
	body.lumise-standalone-page .base-sticky-header {
		position: relative !important;
		top: auto !important;
		z-index: auto !important;
	}
}

/* ==========================================================================
   PHONE — 320px to 479px (1-column stack)
   ========================================================================== */
@media (min-width: 320px) and (max-width: 479px) {
	body.lumise-mode-v2 {
		--lumise-nav-h: 40px;
		--lumise-nav-stack-offset: 40px;
		--lumise-panel-header-offset: 40px;
		scroll-snap-type: y proximity;
	}

	/* Flex layout вместо grid */
	body.lumise-mode-v2 #LumiseDesign {
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		gap: 0;
		min-height: calc(100svh - 50px);
		height: calc(100dvh - 50px);
		overflow: visible;
		position: relative;
		grid-template-columns: unset;
		grid-template-rows: unset;
		grid-template-areas: unset;
		justify-content: unset;
	}

	/* Δ absorber: поглощает разницу dvh-svh при скрытии адресной строки Android */
	body.lumise-mode-v2 #LumiseDesign::after {
		content: '';
		display: block;
		order: 6;
		flex: 0 0 auto;
		height: calc(100dvh - 100svh);
	}

	/* 1. nav — order:1 */
	body.lumise-mode-v2 #LumiseDesign #lumise-navigations {
		position: relative;
		flex-shrink: 0;
		height: var(--lumise-nav-h);
		width: 100%;
		order: 1;
		top: unset;
		z-index: unset;
		grid-area: unset;
		margin: 0;
		padding: 0;
	}

	/* 2. prods — order:2 */
	body.lumise-mode-v2 #LumiseDesign #lumise-prods {
		position: relative;
		flex-shrink: 0;
		height: 60px;
		width: 100%;
		order: 2;
		margin: 10px 0;
	}

	/* 3. sizes — order:3 (min-height резервирует место до init Lumise) */
	body.lumise-mode-v2 #LumiseDesign #lumise-top-pick-sizes {
		position: relative;
		flex-shrink: 0;
		height: auto;
		min-height: 87px;
		width: 100%;
		order: 3;
		display: flex;
		flex-direction: column;
		gap: 9px;
		top: unset;
		z-index: unset;
		grid-area: unset;
	}

	/* Дети sizes — variants и colors */
	body.lumise-mode-v2 #lumise-top-pick-sizes > * {
		width: 100%;
		height: var(--lumise-nav-h);
		flex: 0 0 auto;
	}

	body.lumise-mode-v2 #lumise-top-pick-sizes .lumise-variants-list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 40px;
		align-items: center;
		padding: 0;
		margin: 0;
		gap: 5px;
	}

	body.lumise-mode-v2 #lumise-top-pick-sizes #lumise-color-portal {
		height: 40px;
		display: flex;
		align-items: center;
		overflow-x: auto;
		padding: 0;
	}

	/* 4. main — order:4 (flex:1 заполняет остаток viewport) */
	body.lumise-mode-v2 #LumiseDesign #lumise-main {
		flex: 1 1 0%;
		height: auto;
		max-height: none;
		min-height: 0;
		position: relative;
		order: 4;
		overflow: visible;
		z-index: unset;
		grid-area: unset;
	}

	/* 5. tabs — order:5, fixed bottom bar (50px = 43px header + 7px padding) */
	body.lumise-mode-v2 #LumiseDesign .lumise-left-nav-wrp {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		box-sizing: border-box;
		padding-bottom: 7px;
		width: 100%;
		order: 5;
		z-index: 30;
		grid-area: unset;
	}

	body.lumise-mode-v2 #LumiseDesign .lumise-left-nav-header {
		height: 43px;
	}

	/* Скрыть #lumise-left и #lumise-top-tools на mobile */
	body.lumise-mode-v2 #LumiseDesign #lumise-left,
	body.lumise-mode-v2 #LumiseDesign #lumise-top-tools {
		display: none;
	}

	/* Overlay — absolute внутри #lumise-main */
	body.lumise-mode-v2 #LumiseDesign #lumise-zoom-wrp {
		bottom: 20px;
	}

	body.lumise-mode-v2 #LumiseDesign #lumise-stage-nav {
		bottom: calc(20px + 46px + 10px);
	}

	/* Скрыть на mobile */
	body.lumise-mode-v2 #LumiseDesign #lumise-zoom-thumbn,
	body.lumise-mode-v2 #LumiseDesign #lumise-notices,
	body.lumise-mode-v2 #LumiseDesign #nav-bottom-left {
		display: none;
	}
}

/* ==========================================================================
   TABLET — 480px to 1023px (1-column stack, sizes в ряд)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 1023px) {
	body.lumise-mode-v2 {
		--lumise-nav-h: 40px;
		--lumise-nav-stack-offset: 40px;
		--lumise-panel-header-offset: 40px;
		scroll-snap-type: y proximity;
	}

	/* Flex layout вместо grid */
	body.lumise-mode-v2 #LumiseDesign {
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		gap: 9px;
		min-height: calc(100svh - 50px);
		height: calc(100dvh - 50px);
		overflow: visible;
		position: relative;
		grid-template-columns: unset;
		grid-template-rows: unset;
		grid-template-areas: unset;
		justify-content: unset;
	}

	/* Δ absorber: поглощает разницу dvh-svh при скрытии адресной строки Android */
	body.lumise-mode-v2 #LumiseDesign::after {
		content: '';
		display: block;
		order: 6;
		flex: 0 0 auto;
		height: calc(100dvh - 100svh);
	}

	/* 1. nav — order:1 */
	body.lumise-mode-v2 #LumiseDesign #lumise-navigations {
		position: relative;
		flex-shrink: 0;
		height: var(--lumise-nav-h);
		width: 100%;
		order: 1;
		top: unset;
		z-index: unset;
		grid-area: unset;
		margin: 0;
		padding: 0;
	}

	/* 2. prods — order:2 */
	body.lumise-mode-v2 #LumiseDesign #lumise-prods {
		position: relative;
		flex-shrink: 0;
		height: 60px;
		width: 100%;
		order: 2;
	}

	/* 3. sizes — order:3 (min-height резервирует место до init Lumise) */
	body.lumise-mode-v2 #LumiseDesign #lumise-top-pick-sizes {
		position: relative;
		flex-shrink: 0;
		height: auto;
		min-height: 87px;
		width: 100%;
		order: 3;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		top: unset;
		z-index: unset;
		grid-area: unset;
	}

	/* 4. main — order:4 (flex:1 заполняет остаток viewport) */
	body.lumise-mode-v2 #LumiseDesign #lumise-main {
		flex: 1 1 0%;
		height: auto;
		max-height: none;
		min-height: 0;
		position: relative;
		order: 4;
		overflow: visible;
		z-index: unset;
		grid-area: unset;
	}

	/* 5. tabs — order:5, fixed bottom bar (50px = 43px header + 7px padding) */
	body.lumise-mode-v2 #LumiseDesign .lumise-left-nav-wrp {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		box-sizing: border-box;
		padding-bottom: 7px;
		width: 100%;
		order: 5;
		z-index: 30;
		grid-area: unset;
	}

	body.lumise-mode-v2 #LumiseDesign .lumise-left-nav-header {
		height: 43px;
	}

	/* Скрыть #lumise-left и #lumise-top-tools на tablet */
	body.lumise-mode-v2 #LumiseDesign #lumise-left,
	body.lumise-mode-v2 #LumiseDesign #lumise-top-tools {
		display: none;
	}

	/* Скрыть на tablet */
	body.lumise-mode-v2 #LumiseDesign #lumise-zoom-thumbn,
	body.lumise-mode-v2 #LumiseDesign #lumise-notices,
	body.lumise-mode-v2 #LumiseDesign #nav-bottom-left {
		display: none;
	}
}

/* ==========================================================================
   VISIBILITY OVERRIDES — components.css скрывает элементы по умолчанию
   В v2 режиме показываем всё сразу (JS покажет когда готов)
   ========================================================================== */
body.lumise-mode-v2 #lumise-left,
body.lumise-mode-v2 #lumise-top-tools {
	visibility: visible;
}

/* fix48: стили ul[data-block] — в v3.components.css */

/* fix61: Скрыть #lumise-top-tools навигацию по умолчанию (migrated from legacy:3501) */
body.lumise-mode-v2 #lumise-top-tools > ul.lumise-top-nav {
	display: none;
}

/* fix61: Показать только нужные nav lists (migrated from legacy:3442-3460) */
body.lumise-mode-v2 div#lumise-top-tools[data-view="standard"] ul.lumise-top-nav[data-mode="default"],
body.lumise-mode-v2 div#lumise-top-tools[data-view="i-text"] ul.lumise-top-nav[data-mode="text"],
body.lumise-mode-v2 div#lumise-top-tools[data-view="i-text"] ul.lumise-top-nav[data-mode="standard"],
body.lumise-mode-v2 div#lumise-top-tools[data-view="image"] ul.lumise-top-nav[data-mode="image"],
body.lumise-mode-v2 div#lumise-top-tools[data-view="image"] ul.lumise-top-nav[data-mode="standard"] {
	display: inline-block;
}

/* fix61: Скрыть data-func инструменты (migrated from legacy:3483) */
body.lumise-mode-v2 #lumise-top-tools > ul.lumise-top-nav li[data-func] {
	display: none;
}

/* ==========================================================================
   #lumise-top-pick-sizes — reset ul/li + mobile wrap
   ========================================================================== */

/* Reset .lumise_form_group внутри sizes (legacy margin-bottom: 30px) */
body.lumise-mode-v2 #lumise-top-pick-sizes .lumise_form_group {
	width: 100%;
	margin-bottom: 0;
	padding: 0;
}

/* Reset ul.lumise-variants-list */
body.lumise-mode-v2 #lumise-top-pick-sizes .lumise-variants-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 5px;
}

/* Reset li */
body.lumise-mode-v2 #lumise-top-pick-sizes .lumise-variants-list li {
	flex: 0 0 auto;
	margin: 0;
	padding: 4px 8px;
	font-size: 12px;
}

/* Mobile sizes стили — в MOBILE FLEX блоке выше */

/* fix61: Скрыть подменю по умолчанию (migrated from legacy:3863) */
body.lumise-mode-v2 #lumise-top-tools > ul.lumise-top-nav li[data-tool] ul[data-view="sub"] {
	display: none;
}

/* fix61: Показать подменю при .active (migrated from legacy:3940) */
body.lumise-mode-v2 #lumise-top-tools > ul.lumise-top-nav li[data-tool].active > ul[data-view="sub"] {
	display: block;
}

/* fix61: Скрыть toolbar[data-view="standard"] */
body.lumise-mode-v2 #lumise-top-tools[data-view="standard"] {
	display: none;
}

/* ==========================================================================
   V2: .lumise-left-nav-wrp стили (вынесен из #lumise-left)
   Копия стилей из v2.components.css с исправленными селекторами
   ========================================================================== */
body.lumise-mode-v2 .lumise-left-nav-wrp {
	position: relative;
	display: block;
}

body.lumise-mode-v2 .lumise-left-nav-header {
	display: flex;
	width: 100%;
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	/* Overflow стили (migrated from legacy:8602) */
	overflow: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 56px);
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li {
	flex: 1;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li[data-tab="design"],
body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li[data-tab="shapes"],
body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li[data-tab="saved_designs"] {
	display: none;
}

/* fix59: Скрыть ненужные элементы в v2 */
body.lumise-mode-v2 .lumise-left-nav-wrp .lumise-left-nav-actions {
	display: none;
}

/* fix59: Скрыть prints в cart options */
body.lumise-mode-v2 #lumise-product #lumise-cart-wrp .lumise-cart-options .lumise-prints,
body.lumise-mode-v2 #lumise-cart-wrp .lumise-cart-options .lumise-prints {
	display: none;
}

/* fix59: Скрыть поле "Розмір принта" */
body.lumise-mode-v2 .lumise-cart-field[data-is-print-size="true"] {
	display: none;
}

/* fix59: Скрыть price в header продукта */
body.lumise-mode-v2 div#lumise-product header > price {
	display: none;
}

/* fix59: Скрыть position/transform инструменты */
body.lumise-mode-v2 #lumise-top-tools li[data-tool="position"],
body.lumise-mode-v2 #lumise-top-tools li[data-tool="transform"] {
	display: none;
}

/* fix59: Стили цены в навигации (migrated from legacy:699-708) */
body.lumise-mode-v2 #LumiseDesign .lumise-price {
	color: rgba(255, 255, 255, 0.89);
	font-size: 20px;
	padding: 0 10px;
	float: left;
	line-height: 54px;
	font-weight: 400;
}

body.lumise-mode-v2 #LumiseDesign .lumise-price i {
	display: none;
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li > i {
	clear: both;
	display: block;
	font-size: 20px;
	margin-bottom: 5px;
	height: 22px;
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li:hover {
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li.active {
}

body.lumise-mode-v2 .lumise-left-nav-wrp ul.lumise-left-nav li[data-tab="bug"] {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 44px;
	padding: 10px 0;
	min-height: 0;
}

/* ==========================================================================
   fix59: #lumise-left tab bodies — высота от родителя, не viewport
   (migrated from legacy, height: calc(100vh - 70px) → 100%)
   ========================================================================== */
body.lumise-mode-v2 #lumise-left .lumise-tab-body-wrp {
	color: #eee;
	text-align: center;
	overflow: auto;
	overflow-x: hidden;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;  /* от родителя, не viewport */
	padding-top: 50px;
}

body.lumise-mode-v2 #lumise-left .lumise-tab-body-wrp:not(.active) {
	display: none;
}

body.lumise-mode-v2 #lumise-left #lumise-product.lumise-tab-body-wrp,
body.lumise-mode-v2 #lumise-left #lumise-layers.lumise-tab-body-wrp {
	padding-top: 0;
}

body.lumise-mode-v2 #lumise-left #lumise-text.lumise-tab-body-wrp {
	padding-top: 270px;
}

body.lumise-mode-v2 #lumise-left #lumise-uploads.lumise-tab-body-wrp {
	overflow: hidden;
}

body.lumise-mode-v2 #lumise-left #lumise-cliparts.lumise-tab-body-wrp,
body.lumise-mode-v2 #lumise-left #lumise-templates.lumise-tab-body-wrp {
	padding: 0;
	overflow: hidden;
}

body.lumise-mode-v2 #lumise-cliparts,
body.lumise-mode-v2 #lumise-templates {
	padding: 10px;
}

/* ==========================================================================
   fix48: File menu — MOVED TO v3.components.css
   Стили dropdown меню теперь в lumise.v3.components.css
   ========================================================================== */