/* Native panels are reparented outside #wcdp-container. Scope to the sheet. */
@media (max-width: 899px) {
	.hp-mobile-designer.hp-sheet-is-open #hp-mobile-sheet {
		height: min(var(--hp-sheet-max), var(--hp-sheet-available, 100dvh));
		max-height: min(var(--hp-sheet-max), var(--hp-sheet-available, 100dvh));
	}
	.hp-mobile-designer.hp-editor-fullscreen #hp-mobile-sheet {
		top: var(--hp-editor-viewport-top, 0px) !important;
		bottom: auto !important;
		height: var(--hp-editor-viewport-height, 100dvh) !important;
		max-height: var(--hp-editor-viewport-height, 100dvh) !important;
		border-radius: 0;
		padding-top: env(safe-area-inset-top, 0px);
		transform: none;
	}
	.hp-mobile-designer.hp-editor-fullscreen #hp-mobile-sheet .hp-mobile-sheet__handle,
	.hp-mobile-designer.hp-editor-fullscreen #hp-mobile-sheet-overlay {
		display: none !important;
	}
	.hp-mobile-designer.hp-editor-fullscreen #hp-mobile-sheet .hp-mobile-sheet__header {
		min-height: 56px;
		box-sizing: border-box;
		padding: 6px 16px;
	}
	.hp-mobile-designer #hp-mobile-sheet .hp-mobile-sheet__close {
		min-height: 44px;
		padding: 0 14px;
		font: 600 14px var(--hp-font);
		color: #242424;
	}
	/* Keep the canvas layout intact beneath the opaque editing view. */
	html body.hp-mobile-designer.hp-editor-fullscreen #wcdp-canvas-container {
		max-height: none !important;
	}
	.hp-mobile-designer.hp-sheet-is-open #hp-mobile-sheet-body #wcdp-custom-tool-panel {
		height: 100% !important;
		max-height: 100% !important;
		padding: 8px 10px 12px !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior-y: contain;
		scroll-padding-block: 12px;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-vertical-tab {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-tabs-content {
		float: none !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
	}
	/* The native tool panel is the one primary vertical scroll region. */
	.hp-mobile-designer #hp-mobile-sheet-body .wcdp-tab-section {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-contain-layers {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box;
	}
	/* Product stays compact, but its desktop card no longer narrows the form. */
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel > div,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel > form,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations_form,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .single_variation_wrap,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .woocommerce-variation-add-to-cart,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .dp-content-style,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .dp-border-style {
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel div {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations tbody,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations tr,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations th,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .variations td {
		display: block;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 2px 0 !important;
		box-sizing: border-box;
		text-align: left;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .quantity,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .button,
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .dp-btn-style {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body #wcdp-settings-panel .button {
		min-height: 44px;
		white-space: normal;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .wcdp-tab-section,
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row,
	.hp-mobile-designer #hp-mobile-sheet-body .dp-content-style,
	.hp-mobile-designer #hp-mobile-sheet-body .dp-border-style,
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer.hp-editor-fullscreen #hp-mobile-sheet-body .wcdp-tab-section {
		width: 100% !important;
		max-width: 600px !important;
		margin-inline: auto !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin: 0 0 12px !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row > [class^="dp-col-"],
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row > [class*=" dp-col-"] {
		float: none !important;
		flex: 1 1 100px;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row > .dp-col-8 {
		flex-basis: 100%;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-col-8 {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		align-items: center;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-col-8 > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px;
		min-height: 44px;
		padding: 0 !important;
		line-height: 1 !important;
		box-sizing: border-box;
		float: none !important;
		text-align: center !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-col-8 > span::before {
		float: none !important;
		line-height: 1 !important;
		margin: 0 !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body input[type="text"],
	.hp-mobile-designer #hp-mobile-sheet-body input[type="search"],
	.hp-mobile-designer #hp-mobile-sheet-body input[type="number"],
	.hp-mobile-designer #hp-mobile-sheet-body select,
	.hp-mobile-designer #hp-mobile-sheet-body textarea,
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		min-height: 44px !important;
		box-sizing: border-box !important;
		font-size: 16px !important;
		padding: 8px 10px !important;
		border: 1px solid var(--hp-border) !important;
		border-radius: 8px !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body textarea { resize: vertical; }
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row > input[type="search"],
	.hp-mobile-designer #hp-mobile-sheet-body .dp-row > select {
		flex: 1 1 160px;
		width: auto !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body input[type="range"] {
		min-width: 0;
		max-width: 100%;
		accent-color: #FF39A3;
	}
	.hp-mobile-designer #hp-mobile-sheet-body input[type="color"] {
		min-height: 44px;
		max-width: 100%;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-btn-style > span {
		max-width: 100%;
		box-sizing: border-box;
		white-space: normal;
	}
	/* Beat the Phase 3.5 text/button font override, including pseudo-glyphs. */
	.hp-mobile-designer #hp-mobile-sheet-body [class^="wcdp-icon-"],
	.hp-mobile-designer #hp-mobile-sheet-body [class*=" wcdp-icon-"],
	.hp-mobile-designer #hp-mobile-sheet-body [id^="wcdp-btn-"],
	.hp-mobile-designer #hp-mobile-sheet-body [class^="wcdp-icon-"]::before,
	.hp-mobile-designer #hp-mobile-sheet-body [class*=" wcdp-icon-"]::before,
	.hp-mobile-designer #hp-mobile-sheet-body [id^="wcdp-btn-"]::before {
		font-family: "wcdp-sprites" !important;
		font-weight: normal !important;
		font-style: normal !important;
		text-transform: none !important;
		letter-spacing: normal !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .variations {
		width: 100%;
		table-layout: fixed;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .variations th,
	.hp-mobile-designer #hp-mobile-sheet-body .variations td {
		padding: 4px;
		overflow-wrap: anywhere;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .dp-layer-row {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: anywhere;
	}
	.hp-mobile-designer #hp-mobile-sheet-body img { max-width: 100%; }
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle-label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__panel {
		position: relative;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle {
		background: #fff !important;
		color: #242424 !important;
	}
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle:hover,
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle:focus-visible,
	.hp-mobile-designer #hp-mobile-sheet-body .hp-font-picker__toggle[aria-expanded="true"] {
		background: #fff3fa !important;
		color: #242424 !important;
		border-color: #FF39A3 !important;
	}
	/* Keep the native font select hidden while its events remain available. */
	.hp-mobile-designer #hp-mobile-sheet-body select.hp-font-native {
		width: 1px !important;
		max-width: 1px !important;
		min-height: 0 !important;
		height: 1px !important;
		padding: 0 !important;
		border: 0 !important;
	}
}