/* Navigation is scoped to the verified WCDP/Fabric runtime, never storefronts. */
html body.hp-design-studio.hp-canvas-viewport-ready #wcdp-canvas-container {
	position: relative !important; display: block !important; box-sizing: border-box;
	height: var(--hp-view-stage-height, 300px) !important;
	min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important;
	padding: 0 !important; overflow: hidden !important; overscroll-behavior: contain;
}
body.hp-canvas-viewport-ready #wcdp-canvas-container:focus-visible { outline: 2px solid #FF39A3; outline-offset: -2px; }
body.hp-canvas-viewport-ready #wcdp-canvas-container .hp-canvas-view {
	position: absolute !important; left: var(--hp-view-left, 0px) !important; top: var(--hp-view-top, 0px) !important;
	width: var(--hp-view-width) !important; height: var(--hp-view-height) !important;
	margin: 0 !important; min-width: 0 !important; max-width: none !important; z-index: 0;
}
body.hp-canvas-viewport-ready .hp-canvas-view > canvas {
	width: var(--hp-view-width) !important; height: var(--hp-view-height) !important;
	max-width: none !important; max-height: none !important;
}
body.hp-canvas-viewport-ready #wcdp-canvas-container.hp-canvas-pan,
body.hp-canvas-viewport-ready .hp-canvas-pan .hp-canvas-view > canvas { cursor: grab !important; touch-action: none; }
body.hp-canvas-viewport-ready #wcdp-canvas-container.hp-canvas-panning,
body.hp-canvas-viewport-ready .hp-canvas-panning .hp-canvas-view > canvas { cursor: grabbing !important; touch-action: none; user-select: none; }
body.hp-canvas-viewport-ready #wcdp-zoom-canvas-container,
body.hp-canvas-viewport-ready #wcdp-zoom-move { display: none !important; }
body.hp-canvas-viewport-ready #wcdp-opts-below-canvas { flex-wrap: wrap; max-width: 100% !important; }
body.hp-canvas-viewport-ready #hp-canvas-view-controls {
	display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
	min-width: 0; max-width: 100%; margin-left: auto;
	font: 500 12px/1.2 var(--hp-font, "Poppins", sans-serif); color: #242424;
}
#hp-canvas-view-controls button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 36px; height: 36px; padding: 6px 9px; box-sizing: border-box;
	border: 1px solid #e4e4ea; border-radius: 8px; background: #fff; color: inherit;
	font: inherit; white-space: nowrap; cursor: pointer;
}
#hp-canvas-view-controls button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#hp-canvas-view-controls button span { font: inherit; }
#hp-canvas-view-controls button:hover { border-color: #FF39A3; background: #fff3fa; }
#hp-canvas-view-controls button[aria-pressed="true"] { color: #b10e63; border-color: #FF39A3; background: #fff0f8; box-shadow: inset 0 0 0 1px #FF39A3; }
#hp-canvas-view-controls button:active { background: #ffe0f1; }
#hp-canvas-view-controls button:disabled, #hp-canvas-view-controls input:disabled { opacity: .5; cursor: not-allowed; }
#hp-canvas-view-controls label { margin: 0; padding: 0; color: inherit; font: inherit; }
#hp-canvas-view-controls input { width: clamp(80px, 9vw, 140px); max-width: 100%; min-width: 0; margin: 0; padding: 0; accent-color: #FF39A3; }
#hp-canvas-view-controls output { min-width: 48px; margin: 0; padding: 0; text-align: right; font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hp-canvas-view-controls :focus-visible { outline: 2px solid #FF39A3; outline-offset: 2px; }
@media (max-width: 899px) {
	body.hp-mobile-designer.hp-canvas-viewport-ready #hp-canvas-view-controls {
		display: grid; grid-template-columns: 44px 44px minmax(100px, 1fr) 50px;
		gap: 6px; flex: 0 0 100%; width: 100%; margin: 0;
	}
	#hp-canvas-view-controls button { min-width: 44px; height: 44px; }
	#hp-canvas-select { grid-column: 1; grid-row: 1; }
	#hp-canvas-hand { grid-column: 2; grid-row: 1; }
	#hp-canvas-fit { grid-column: 3; grid-row: 1; }
	#hp-canvas-view-controls output { grid-column: 4; grid-row: 1; }
	#hp-canvas-view-controls label { grid-column: 1 / 3; grid-row: 2; text-align: center; }
	#hp-canvas-view-controls input { grid-column: 3 / 5; grid-row: 2; width: 100%; min-height: 28px; }
}