/**
 * Hollywood Prints Designer — full-screen application shell.
 *
 * Owns viewport layout when body.hp-designer-app is present.
 * Desktop (≥900px) and mobile (<900px). Does not alter Fabric geometry.
 */

.hp-designer-app {
	--hp-pink: #FF39A3;
	--hp-mint: #77FFC9;
	--hp-yellow: #FEC85C;
	--hp-surface: #FFFFFF;
	--hp-surface-muted: #F4F4F6;
	--hp-canvas-bg: #E8E8EC;
	--hp-border: #E2E2E8;
	--hp-text: #1F1F24;
	--hp-text-muted: #6B6B76;
	--hp-dark: #1A1A1F;
	--hp-app-header-height: 56px;
	--hp-tool-rail-width: 80px;
	--hp-tool-panel-width: 340px;
	--hp-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   Lock document scroll — Designer is the application.
   ------------------------------------------------------------------------- */

html.hp-designer-app-active,
html.hp-designer-app-active body.hp-designer-app {
	height: 100% !important;
	max-height: 100% !important;
	overflow: hidden !important;
	overscroll-behavior: none;
}

body.hp-designer-app {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hp-canvas-bg) !important;
}

body.hp-designer-app.admin-bar {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   Remove storefront / Elementor chrome from the editing experience.
   ------------------------------------------------------------------------- */

body.hp-designer-app #haru-header,
body.hp-designer-app #haru-footer,
body.hp-designer-app .haru-page-title,
body.hp-designer-app .haru-bottom-toolbar,
body.hp-designer-app .hp-design-studio-chrome-hidden,
body.hp-designer-app #wpadminbar {
	display: none !important;
}

/* Photoswipe / Woolentor leftovers that paint pink controls below the fold */
body.hp-designer-app .pswp,
body.hp-designer-app .pswp__button,
body.hp-designer-app .woocommerce-product-gallery__trigger,
body.hp-designer-app .htwl-modal,
body.hp-designer-app .htcloseqv,
body.hp-designer-app .woolentor-modal,
body.hp-designer-app .elementor-lightbox {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Marketing / instructional Elementor columns on the Designer page */
body.hp-designer-app .elementor-element-162b695,
body.hp-designer-app .elementor-element-4210585,
body.hp-designer-app .elementor-element-6041154 {
	display: none !important;
}

/* Beat Elementor page CSS (body.page-id-* !important gutters/cards) */
html body.hp-designer-app.layout-boxed #haru-main,
html body.hp-designer-app.layout-boxed .haru-page,
html body.hp-designer-app.layout-boxed .page-content,
html body.hp-designer-app.layout-boxed .page-content-wrap,
html body.hp-designer-app.layout-boxed .entry-content,
html body.hp-designer-app.layout-boxed .elementor-shortcode,
html body.hp-designer-app .haru-container,
html body.hp-designer-app .e-con-inner,
html body.hp-designer-app .h-row,
html body.hp-designer-app .hp-design-studio-root {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.hp-designer-app main.haru-page,
html body.hp-designer-app #haru-content-main,
html body.hp-designer-app #haru-main,
html body.hp-designer-app .page-content,
html body.hp-designer-app .page-content-wrap,
html body.hp-designer-app .entry-content,
html body.hp-designer-app .type-page.hentry,
html body.hp-designer-app .elementor,
html body.hp-designer-app .elementor-1628,
html body.hp-designer-app .elementor-section,
html body.hp-designer-app .elementor-container,
html body.hp-designer-app .elementor-widget-wrap,
html body.hp-designer-app .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

html body.hp-designer-app #wcdp-container {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: var(--hp-canvas-bg) !important;
}

html body.hp-designer-app #wcdp-editor-container {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

html body.hp-designer-app #wcdp-editor-container .upper-canvas {
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Application header (desktop + shared)
   ------------------------------------------------------------------------- */

#hp-designer-app-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10060;
	height: calc(var(--hp-app-header-height) + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) 16px 0;
	box-sizing: border-box;
	background: var(--hp-surface);
	border-bottom: 1px solid var(--hp-border);
	font-family: var(--hp-font);
}

.hp-designer-app.hp-app-desktop #hp-designer-app-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hp-designer-app-header__left,
.hp-designer-app-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.hp-designer-app-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.hp-designer-app-header__brand-mark {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hp-text);
	white-space: nowrap;
}

.hp-designer-app-header__logo {
	width: 180px;
	height: 36px;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	flex-shrink: 0;
}

.hp-designer-app-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: var(--hp-surface);
	color: var(--hp-text);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hp-designer-app-header__btn:hover {
	background: var(--hp-surface-muted);
}

.hp-designer-app-header__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.hp-designer-app-header__btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hp-designer-app-header__price {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--hp-text);
	min-width: 4.5rem;
	text-align: right;
}

.hp-designer-app-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--hp-pink);
	color: #fff;
	font-family: var(--hp-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	white-space: nowrap;
}

.hp-designer-app-header__cta:hover {
	filter: brightness(0.96);
}

.hp-designer-app-header__cta.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Desktop application grid
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-designer-app.hp-app-desktop {
		--hp-studio-header-offset: var(--hp-app-header-height);
	}

	.hp-designer-app.hp-app-desktop #wcdp-container {
		position: fixed !important;
		top: var(--hp-app-header-height) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		overflow: hidden !important;
		z-index: 10050;
	}

	.hp-designer-app.hp-app-desktop #wcdp-custom-tool-panel {
		height: 100% !important;
		max-height: 100% !important;
		overflow: hidden !important;
	}

	.hp-designer-app.hp-app-desktop #wcdp-vertical-tab {
		min-height: 0 !important;
		height: 100% !important;
		max-height: 100% !important;
	}

	.hp-designer-app.hp-app-desktop #wcdp-tabs-icons {
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.hp-designer-app.hp-app-desktop #wcdp-tabs-content {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		max-height: none !important;
		height: 100% !important;
	}

	.hp-designer-app.hp-app-desktop #wcdp-editor-container {
		box-sizing: border-box;
		height: 100% !important;
		max-height: 100% !important;
		min-height: 0 !important;
		/* Prefer a native-sized, scrollable canvas over an unverified fit. */
		overflow: auto !important;
		padding: 12px 16px 10px !important;
	}

	.hp-designer-app.hp-app-desktop #wcdp-canvas-container {
		flex: 0 0 auto;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
		justify-content: flex-start;
		align-items: flex-start;
		align-items: safe center;
		overflow: visible;
		padding: 8px !important;
		background: transparent !important;
	}

	.hp-designer-app.hp-app-desktop #wcdp-opts-below-canvas {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 8px 4px 4px !important;
		background: transparent;
	}

	.hp-designer-app.hp-app-desktop #wcdp-toolbar-options {
		flex: 0 0 auto;
		box-sizing: border-box;
	}
	.hp-designer-app.hp-app-desktop #wcdp-editor-container .canvas-container,
	.hp-designer-app.hp-app-desktop #wcdp-editor-container .hp-canvas-visual-wrap {
		flex: 0 0 auto;
	}
	/* WCDP sets paired canvas dimensions; do not independently clamp one axis. */
	.hp-designer-app.hp-app-desktop #wcdp-editor-container canvas {
		max-width: none !important;
		max-height: none !important;
	}

	/* Keep native save/ATC in the left panel actions — do not let them escape the app */
	.hp-designer-app.hp-app-desktop #wcdp-box-options-btn {
		display: none !important; /* desktop purchase lives in app header */
	}

	/* Hide mobile-only companion chrome on desktop */
	.hp-designer-app.hp-app-desktop #hp-mobile-designer-header,
	.hp-designer-app.hp-app-desktop #hp-mobile-toolbar,
	.hp-designer-app.hp-app-desktop #hp-mobile-purchase,
	.hp-designer-app.hp-app-desktop #hp-mobile-sheet,
	.hp-designer-app.hp-app-desktop #hp-mobile-sheet-overlay {
		display: none !important;
	}

	/*
	 * Rail icons: Elementor/page CSS was forcing white backgrounds on tabs,
	 * making white glyph icons invisible (blank boxes). Keep dark rail chrome.
	 */
	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons {
		background: var(--hp-dark) !important;
	}

	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span,
	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span.dp-tooltip {
		background: transparent !important;
		background-color: transparent !important;
		color: rgba(255, 255, 255, 0.9) !important;
		border: 0 !important;
		border-left: 3px solid transparent !important;
		box-shadow: none !important;
		float: none !important;
		width: 100% !important;
		height: auto !important;
		min-height: 56px !important;
		line-height: 1.15 !important;
		overflow: visible !important;
		padding: 8px 4px !important;
	}

	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span::before {
		color: inherit !important;
		font-family: "wcdp-sprites" !important;
	}

	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span.vtab-selected,
	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span.dp-tooltip.vtab-selected {
		background: rgba(255, 57, 163, 0.22) !important;
		background-color: rgba(255, 57, 163, 0.22) !important;
		border-left-color: var(--hp-pink) !important;
		color: #ffffff !important;
	}

	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span .hp-tool-label {
		display: block !important;
		color: rgba(255, 255, 255, 0.75) !important;
		font-family: var(--hp-font) !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		white-space: nowrap !important;
		margin-top: 4px !important;
	}

	html body.hp-designer-app.hp-app-desktop #wcdp-tabs-icons > span.vtab-selected .hp-tool-label {
		color: #ffffff !important;
	}

	/* Object toolbar icons also use wcdp-sprites — protect from white/brand overrides */
	html body.hp-designer-app.hp-app-desktop #wcdp-toolbar-options > span,
	html body.hp-designer-app.hp-app-desktop #wcdp-toolbar-options > span::before {
		font-family: "wcdp-sprites" !important;
		color: var(--hp-text) !important;
	}
}

/* -------------------------------------------------------------------------
   Mobile — app shell reinforces Phase 3/3.5; locks scroll.
   ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.hp-designer-app #hp-designer-app-header {
		display: none !important;
	}

	.hp-designer-app.hp-mobile-designer #wcdp-container {
		position: fixed !important;
		top: var(--hp-mobile-header-offset, 56px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 10040;
	}

	.hp-designer-app.hp-mobile-designer #wcdp-editor-container {
		height: 100% !important;
		max-height: 100% !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}
}

/* Short / safe-area */
@supports (height: 100dvh) {
	html.hp-designer-app-active,
	html.hp-designer-app-active body.hp-designer-app {
		height: 100dvh !important;
		max-height: 100dvh !important;
	}
}