/* MTF Mobile v2 — превью правок мобильной карточки (аудит 25.09.2026).
   Всё под html.mtf-preview: без флага превью ничего не меняется. */

/* ── Cookie-баннер: компактная плашка над нижним меню, без заголовка ── */
html.mtf-preview .mtf-cc {
	font-family: var(--font-body, 'Onest', system-ui, sans-serif);
}
@media (max-width: 768px) {
	html.mtf-preview .mtf-cc.mtf-cc-shown {
		left: 8px;
		right: 8px;
		bottom: calc(63px + env(safe-area-inset-bottom, 0px));
		padding: 10px 12px;
		border-radius: 14px;
	}
	html.mtf-preview .mtf-cc-title { display: none; }
	html.mtf-preview .mtf-cc-text {
		font-size: 12px;
		line-height: 1.35;
		margin: 0 0 8px;
		color: #3a3632;
	}
	html.mtf-preview .mtf-cc-row {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		align-items: center;
	}
	html.mtf-preview .mtf-cc-btn {
		width: auto;
		flex: 1 1 auto;
		padding: 9px 10px;
		font-size: 13px;
		min-height: 40px;
	}
	html.mtf-preview .mtf-cc-btn-settings {
		flex: 0 0 auto;
		padding: 9px 6px;
		color: #6B665C;
	}
	/* Пока баннер на экране, липкая панель «Купить» ему не мешает: скрыта. */
	html.mtf-preview body:has(#mtf-cc.mtf-cc-shown) #mtf-sticky-bar { display: none !important; }
}

/* ── Окно заказа: в один экран ── */
html.mtf-preview #order_screen .order_screen_form h1 { font-size: 22px; line-height: 1.2; margin: 0; }
html.mtf-preview #order_screen .order_screen_form .sub_title { font-size: 13px; line-height: 1.35; margin-top: 4px; }
html.mtf-preview #order_screen .order_screen_form .product_preview { margin-top: 10px; padding: 8px; gap: 10px; }
html.mtf-preview #order_screen .order_screen_form .product_preview img { width: 64px; height: 64px; object-fit: contain; }
html.mtf-preview #order_screen .order_screen_form form { row-gap: 10px; margin-top: 12px; }
html.mtf-preview #order_screen .order_screen_form form label { row-gap: 4px; font-size: 14px; }
html.mtf-preview #order_screen .order_screen_form form input.element:not([type=radio]):not([type=checkbox]),
html.mtf-preview #order_screen .order_screen_form form select.element { height: 48px; min-height: 48px; }
/* Обещание «пришлём подтверждение на почту» не выполнялось — клиенту письмо не уходит. */
html.mtf-preview #order_screen .order_email_hint { display: none; }
/* Доставка: кружок слева, вся строка — тап-цель 44 px */
html.mtf-preview #order_screen .form_delivery_wrapper legend { font-size: 14px; }
html.mtf-preview #order_screen .order_screen_form form .form_delivery_element {
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 10px;
	min-height: 44px;
	margin-top: 0 !important;
	text-align: left;
}
html.mtf-preview #order_screen .order_screen_form form .form_delivery_element input {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}
html.mtf-preview #order_screen .order_screen_form form .form_delivery_element input:checked { background: #fff; border: 7px solid #C2410C; }
html.mtf-preview #order_screen .order_screen_form form .form_delivery_element input:checked:after { content: none; }
/* Согласие над кнопкой — строкой-лейблом 44 px */
html.mtf-preview #order_screen .order_screen_form .policy { min-height: 44px; font-size: 13px; color: #3a3632; }
html.mtf-preview #order_screen .order_screen_form .policy input { flex: 0 0 22px; width: 22px; height: 22px; }
/* Кнопка «Оформить» прилипает к низу окна */
html.mtf-preview #order_screen .order_screen_form form button[type=submit] {
	position: sticky;
	bottom: 8px;
	z-index: 2;
	opacity: 1;
}
/* Крестик — 44 px */
html.mtf-preview #order_screen .order_screen_form .icon-cross {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Экран «Заказ оформлен» ── */
html.mtf-preview .mtf-v2-success { margin: 14px 0 8px; font-size: 15px; line-height: 1.45; color: #1c1917; }
html.mtf-preview .mtf-v2-success p { margin: 0 0 12px; }
html.mtf-preview #order_screen .order_screen_form a.mtf-v2-tg {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 14px;
	background: #229ED9;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}

/* ── Сноска «цена зависит от размера» — только при разбросе цен ── */
html.mtf-preview .mtf-v2-hide { display: none !important; }

/* ── Крошка вместо строки «Категории:» ── */
html.mtf-preview .product_images > .cats { display: none; }
@media (max-width: 1024px) {
	html.mtf-preview .breadcrumb.container_outer {
		display: block !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		line-height: 1.4;
		padding-top: 10px;
		padding-bottom: 2px;
		color: #6B665C;
	}
	html.mtf-preview .breadcrumb.container_outer { padding-left: 16px !important; padding-right: 16px !important; }
	html.mtf-preview .breadcrumb.container_outer * { display: inline; }
	html.mtf-preview .breadcrumb.container_outer .divider {
		display: inline-block;
		width: 10px;
		height: 1px;
		margin: 0 6px;
		vertical-align: middle;
		background-color: #A8A097;
	}
	html.mtf-preview .breadcrumb.container_outer a { color: #6B665C; line-height: 1.4; }
}

/* ── Первый экран без всплытия: фото сразу засчитывается как LCP ── */
html.mtf-preview .section_product { animation: none !important; }

/* ── Контраст по WCAG 2.2 AA ── */
html.mtf-preview { --color-primary: #C2410C; --color-primary-hover: #9A3412; --color-primary-active: #7C2D12; }
html.mtf-preview .section_product .price,
html.mtf-preview .mtf-sticky-bar__price { color: #C2410C; }
/* У кнопок цвет местами задан литералом #F15A29, а не токеном — поэтому !important. */
html.mtf-preview #register_button,
html.mtf-preview .section_product button.default_button.register,
html.mtf-preview .mtf-sticky-bar__cta,
html.mtf-preview #order_screen button.default_button,
html.mtf-preview .mtf-cc-btn-accept { background-color: #C2410C !important; border-color: #C2410C !important; }
html.mtf-preview #order_screen .mtf-v2-success ~ .sub_title,
html.mtf-preview #order_screen .sub_title.mtf-v2-hide { display: none; }
html.mtf-preview .pdp-title__cw,
html.mtf-preview .section_product dt { color: #6B665C; }
html.mtf-preview .trust_badge span span { color: #6B6B6B; font-size: 12px; }