/**
 * Hollywood Prints Designer UI — Design Studio focus mode
 *
 * Every selector is scoped to .hp-design-studio
 */

/* Hide page chrome that competes with the editor */
.hp-design-studio .haru-page-title,
.hp-design-studio .hp-design-studio-chrome-hidden,
.hp-design-studio #haru-footer,
.hp-design-studio .haru-bottom-toolbar {
	display: none !important;
}

/* Elementor designer page — hide marketing column, expand designer column */
.hp-design-studio .elementor-element-162b695,
.hp-design-studio .elementor-element-4210585,
.hp-design-studio .elementor-element-6041154 {
	display: none !important;
}

.hp-design-studio .elementor-element-e2cd86e,
.hp-design-studio .elementor-element-b330839 > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
}

/* Compact site header — keep navigation available (disabled when app shell owns chrome) */
.hp-design-studio:not(.hp-designer-app) #haru-header.haru-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 1px 0 var(--hp-border, #E7E7EC);
}

.hp-design-studio #haru-header .haru-header-content,
.hp-design-studio #haru-header .haru-header-default {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

.hp-design-studio #haru-header .haru-logo img {
	max-height: 42px !important;
	width: auto;
}

/* Elementor page wrappers — reduce extra vertical spacing */
.hp-design-studio .elementor-1628 .elementor-element-f4a110a,
.hp-design-studio .hp-design-studio-root > .elementor-element {
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	--margin-top: 0px !important;
	--margin-bottom: 0px !important;
	min-height: 0 !important;
}

.hp-design-studio .hp-design-studio-root {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.hp-design-studio main.haru-page,
.hp-design-studio .page-content-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Designer fills remaining viewport below compact header */
@media (min-width: 900px) {
	.hp-design-studio #wcdp-container {
		min-height: calc(100vh - var(--hp-studio-header-offset, 72px));
	}
}

/*
 * Below 900px the Phase 1 mobile shell (designer-mobile-shell.css) owns chrome.
 * Keep these fallbacks for the brief moment before JS adds .hp-mobile-designer.
 */
@media (max-width: 899px) {
	.hp-design-studio #haru-header.haru-header {
		position: relative;
		box-shadow: none;
	}

	.hp-design-studio #wcdp-container {
		min-height: 0;
	}
}