/**
 * Hollywood Prints Designer UI — Phase 2 canvas-first mobile layout.
 *
 * Scoped to body.hp-mobile-designer only (max-width: 899px via JS class).
 * Does not reparent WCDP nodes or change Fabric.js behavior.
 */

.hp-mobile-designer {
	--hp-mobile-thumbs-space: 88px;
	--hp-mobile-future-toolbar-space: 16px;
	--hp-canvas-bg: #F2F2F4;
}

/* Remove theme/page gutters so the canvas can use the full phone width. */
.hp-mobile-designer main.haru-page,
.hp-mobile-designer .haru-container,
.hp-mobile-designer .page-content,
.hp-mobile-designer .page-content-wrap,
.hp-mobile-designer .entry-content,
.hp-mobile-designer .hp-design-studio-root,
.hp-mobile-designer .type-page.hentry {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

.hp-mobile-designer .h-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* -------------------------------------------------------------------------
   Workspace: header is already in flow (Phase 1). Fill remaining viewport.
   ------------------------------------------------------------------------- */

.hp-mobile-designer #wcdp-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: calc(var(--hp-mobile-future-toolbar-space) + env(safe-area-inset-bottom, 0px)) !important;
	min-height: calc(100dvh - var(--hp-mobile-header-offset, var(--hp-mobile-header-height, 56px)) - env(safe-area-inset-bottom, 0px));
	background: var(--hp-canvas-bg);
	position: relative;
	box-sizing: border-box;
}

.admin-bar.hp-mobile-designer #wcdp-container {
	min-height: calc(100dvh - var(--hp-mobile-header-offset, 56px) - var(--wp-admin--admin-bar--height, 46px) - env(safe-area-inset-bottom, 0px));
}

.hp-mobile-designer #wcdp-editor-container {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	vertical-align: top;
}

/* -------------------------------------------------------------------------
   Hide the dense object toolbar from the default workspace.
   Keep it in the DOM. WCDP sets visibility:visible inline on resize,
   so !important is required. Clicks from the Phase 1 header still work.
   ------------------------------------------------------------------------- */

.hp-mobile-designer #wcdp-toolbar-options {
	position: absolute !important;
	left: -9999px !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   Canvas is the primary workspace. Size by width; do not stretch Fabric.
   ------------------------------------------------------------------------- */

.hp-mobile-designer #wcdp-canvas-container {
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 60dvh;
	padding: 8px 16px !important;
	box-sizing: border-box;
}

.hp-mobile-designer #wcdp-editor-container .canvas-container {
	margin: 0 auto !important;
	max-width: 100%;
}

.hp-mobile-designer #wcdp-editor-container canvas,
.hp-mobile-designer #wcdp-editor-container .upper-canvas,
.hp-mobile-designer #wcdp-editor-container .lower-canvas {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Front/Back thumbs stay visible and tappable under the canvas.
   ------------------------------------------------------------------------- */

.hp-mobile-designer #wcdp-opts-below-canvas {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 auto !important;
	padding: 4px 12px 8px !important;
	visibility: visible !important;
	box-sizing: border-box;
}

.hp-mobile-designer #wcdp-canvas-thumbs-container {
	float: none !important;
	display: flex !important;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
}

.hp-mobile-designer #wcdp-canvas-thumbs-container > div {
	margin: 0 !important;
}

.hp-mobile-designer #wcdp-canvas-thumbs-container img {
	width: 56px !important;
	max-width: 56px !important;
	height: auto !important;
}

.hp-mobile-designer #wcdp-canvas-thumbs-container label {
	font-size: 12px !important;
	margin-top: 4px !important;
	font-weight: 600;
}

.hp-mobile-designer #wcdp-zoom-canvas-container {
	float: none !important;
	width: auto !important;
}

/* -------------------------------------------------------------------------
   Tool/settings/Save/ATC panel: keep in DOM, remove from document flow.
   Off-canvas (not display:none) so WooCommerce variations_form and
   WCDP :visible checks keep working for later phases.
   ------------------------------------------------------------------------- */

.hp-mobile-designer #wcdp-custom-tool-panel {
	position: fixed !important;
	left: -120vw !important;
	top: 0 !important;
	width: min(100vw, 360px) !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: 100dvh;
	margin: 0 !important;
	overflow: auto;
	order: 2;
	z-index: 0;
	pointer-events: none;
}