/**
 * /catalog/{id}/: chrome поверх бандла (после vehicle-detail.js).
 * — actionBar sticky к низу viewport, на всю ширину (-mx-3 к .ea-page-width)
 * — open-menu только у футера (sticky sibling в #bx-workarea-main)
 */

@media (max-width: 1023px) {
	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar {
		position: sticky !important;
		bottom: 0 !important;
		z-index: 910 !important;
		box-sizing: border-box;
		margin-left: -12px !important;
		margin-right: -12px !important;
		width: calc(100% + 24px) !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		border-radius: 0.75rem 0.75rem 0 0 !important;
	}

	#bx-workarea-main:has([data-react-module="vehicle-detail"]) > .ea-open-menu-mobile {
		position: sticky !important;
		bottom: 0 !important;
		margin-top: auto !important;
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		z-index: 900 !important;
	}

	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel,
	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar > div.pointer-events-auto,
	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel[class*='pb-'],
	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar > div[class*='pb-'],
	#bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel.ea-vd-action-bar__panel--flush-bottom {
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* MAX: без safe-area — клиент сам даёт нижний chrome, иначе двойной зазор */
	html:is(.ea-max-webapp, .ea-max-platform-android, .ea-max-platform-ios) #bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel,
	html:is(.ea-max-webapp, .ea-max-platform-android, .ea-max-platform-ios) #bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar > div.pointer-events-auto,
	html:is(.ea-max-webapp, .ea-max-platform-android, .ea-max-platform-ios) #bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel[class*='pb-'],
	html:is(.ea-max-webapp, .ea-max-platform-android, .ea-max-platform-ios) #bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar > div[class*='pb-'],
	html:is(.ea-max-webapp, .ea-max-platform-android, .ea-max-platform-ios) #bx-workarea-main:has([data-react-module="vehicle-detail"]) .ea-vd-action-bar__panel.ea-vd-action-bar__panel--flush-bottom {
		padding-bottom: 12px !important;
	}
}