/* VOX Creative product configurator — page shell + conflict overrides */

/* ── Undo Vuetify globals that leak outside the configurator ───────── */
html:has(body.page-template-template-creative-product-php) {
	overflow-x: visible !important;
}

body.page-template-template-creative-product-php {
	overflow-x: visible !important;
}

body.page-template-template-creative-product-php #header.site-header,
body.page-template-template-creative-product-php .site-header-wrapper {
	background: #fff !important;
}

body.page-template-template-creative-product-php #header .container,
body.page-template-template-creative-product-php #header .siteheader-container,
body.page-template-template-creative-product-php #footer .container,
body.page-template-template-creative-product-php .vox-footer-wrap .container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.page-template-template-creative-product-php #header .main-nav,
body.page-template-template-creative-product-php #header .main-nav > ul,
body.page-template-template-creative-product-php #header .main-nav ul ul.sub-menu {
	overflow: visible !important;
}

body.page-template-template-creative-product-php .page-subheader {
	display: none;
}

body.page-template-template-creative-product-php #sidebar,
body.page-template-template-creative-product-php .sidebar {
	display: none !important;
}

/* ── Configurator snackbar / alerts (clear site header) ─────────────── */
body.page-template-template-creative-product-php {
	--vox-configurator-header-offset: 112px;
	--vox-configurator-viewport-h: calc(100vh - var(--vox-configurator-header-offset) - 24px);
	--vox-configurator-stage-h: clamp(300px, calc(100vh - var(--vox-configurator-header-offset) - 130px), 620px);
}

body.page-template-template-creative-product-php #header.site-header,
body.page-template-template-creative-product-php .site-header-wrapper {
	position: relative;
	z-index: 200;
}

body.page-template-template-creative-product-php #configurator-creative .v-snackbar.v-snackbar--top,
body.page-template-template-creative-product-php #configurator-creative .creative-snack-margin.v-snackbar {
	top: var(--vox-configurator-header-offset) !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	width: min(760px, calc(100% - 48px)) !important;
	max-width: 760px;
	z-index: 90;
	margin-top: 0 !important;
}

body.page-template-template-creative-product-php #configurator-creative .v-snackbar .v-snack__wrapper {
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

body.page-template-template-creative-product-php #configurator-creative .creative-snackbar-text {
	font-size: 15px !important;
	line-height: 1.45 !important;
	padding: 12px 36px 12px 20px !important;
}

/* ── Page shell ─────────────────────────────────────────────────────── */
.vox-configurator-page-wrap {
	padding-top: 12px;
	padding-bottom: 16px;
	background: #f7f7f5;
	min-height: 0;
}

.vox-configurator-inner {
	width: min(1440px, calc(100% - 32px));
	margin: 0 auto;
}

#configurator-creative {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	max-height: var(--vox-configurator-viewport-h);
}

#configurator-creative .v-application,
#configurator-creative .v-application--wrap {
	border-radius: 10px;
	overflow: hidden;
	max-height: var(--vox-configurator-viewport-h);
}

/* ── One-screen layout (desktop) ────────────────────────────────────── */
@media (min-width: 960px) {
	#configurator-creative .v-application--wrap {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	#configurator-creative .creative-canvas-container {
		height: var(--vox-configurator-stage-h) !important;
		min-height: 300px !important;
		max-height: var(--vox-configurator-stage-h) !important;
	}

	#configurator-creative .creative-menu,
	#configurator-creative .board-menu-container {
		min-height: 0 !important;
	}

	#configurator-creative .creative-menu-background {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: var(--vox-configurator-stage-h);
	}

	#configurator-creative .creative-menu-wrap {
		flex: 1 1 auto;
		min-height: 0;
		max-height: var(--vox-configurator-stage-h);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	#configurator-creative [class*="scene-preview-container"] {
		position: relative !important;
		top: auto !important;
		max-height: var(--vox-configurator-stage-h);
	}

	#configurator-creative .scene-preview-container-parent {
		max-height: var(--vox-configurator-stage-h);
	}

	#configurator-creative .vt-menu-main-header {
		font-size: 1.05rem !important;
		margin-bottom: 6px !important;
	}

	#configurator-creative .v-expansion-panel-header {
		min-height: 40px !important;
		padding: 8px 12px !important;
	}

	#configurator-creative .desktop-action-buttons-container {
		height: 72px;
		gap: 20px;
		padding-right: 16px;
	}

	#configurator-creative .card-actions-left button,
	#configurator-creative .card-actions button {
		height: 72px !important;
	}
}

/* ── Modal layer (above footer, viewport-fixed) ───────────────────── */
:root {
	--vox-layer-footer: 1;
	--vox-layer-header: 200;
	--vox-layer-overlay: 100049;
	--vox-layer-dialog: 100050;
	--vox-layer-added-cart: 100051;
}

html.vox-configurator-modal-open,
html.vox-configurator-modal-open body {
	overflow: hidden !important;
}

body.page-template-template-creative-product-php #vox-footer,
body.page-template-template-creative-product-php .vox-footer,
body.page-template-template-creative-product-php #footer,
body.page-template-template-creative-product-php footer {
	position: relative;
	z-index: var(--vox-layer-footer) !important;
}

body.page-template-template-creative-product-php .v-overlay,
body.page-template-template-creative-product-php .v-overlay--active {
	position: fixed !important;
	inset: 0 !important;
	z-index: var(--vox-layer-overlay) !important;
}

body.page-template-template-creative-product-php .v-dialog__content,
body.page-template-template-creative-product-php .v-dialog__content--active {
	position: fixed !important;
	inset: 0 !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 24px 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: var(--vox-layer-dialog) !important;
	pointer-events: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body.page-template-template-creative-product-php .v-dialog__content--active {
	pointer-events: auto;
}

body.page-template-template-creative-product-php .v-dialog__content .v-dialog,
body.page-template-template-creative-product-php .v-dialog.product-dialog {
	position: relative !important;
	z-index: 1 !important;
	width: min(680px, 100%) !important;
	max-height: min(90vh, 900px) !important;
	margin: auto !important;
	pointer-events: auto;
	overflow: auto;
}

body.page-template-template-creative-product-php .product-dialog-content {
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28) !important;
	border-radius: 12px !important;
}

body.page-template-template-creative-product-php .creative-product-dialog-container {
	position: relative;
	z-index: 1 !important;
}

body.page-template-template-creative-product-php .creative-product-dialog-close-btn {
	z-index: 2 !important;
}

body.page-template-template-creative-product-php .kl-addedtocart {
	position: fixed !important;
	z-index: var(--vox-layer-added-cart) !important;
}

/* ── Modern sans typography inside configurator ─────────────────────── */
#configurator-creative,
#configurator-creative .v-application,
#configurator-creative .v-application--wrap {
	font-family: "Source Sans Pro", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 14px;
	line-height: 1.45;
	color: #121212;
}

#configurator-creative :where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	span,
	label,
	button,
	input,
	select,
	textarea,
	.v-expansion-panel-header,
	.v-expansion-panel-content,
	.v-btn,
	.v-list-item__title,
	.v-list-item__subtitle,
	.vt-menu-main-header,
	.product-modal-header,
	.creative-action-cart-price-vox,
	.creative-action-quantity-vox
):not(.v-icon):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
	font-family: "Source Sans Pro", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-variant: normal !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

#configurator-creative .vt-menu-main-header {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #121212 !important;
}

#configurator-creative .v-expansion-panel-header {
	min-height: 44px !important;
	padding: 10px 14px !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
}

#configurator-creative .v-expansion-panel-content__wrap {
	padding: 10px 14px 14px !important;
	font-size: 0.8125rem !important;
}

#configurator-creative .v-btn {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
}

#configurator-creative .creative-action-add-to-cart-vox .v-btn {
	background: #ee1d23 !important;
	color: #fff !important;
	border-radius: 999px !important;
}

#configurator-creative .creative-action-add-to-cart-vox .v-btn:hover {
	background: #d0191f !important;
}

/* ── VOX app flex fix ───────────────────────────────────────────────── */
@media (min-width: 1264px) {
	#configurator-creative .flex.lg3 {
		flex-basis: initial;
		-webkit-box-flex: initial;
		flex-grow: inherit;
		max-width: initial;
	}

	#configurator-creative .flex.lg9 {
		flex-basis: initial;
		-webkit-box-flex: initial;
		flex-grow: initial;
		max-width: initial;
	}
}

#configurator-creative .creative-action-delivery-date-vox {
	display: none !important;
}

/* Quantity — keep label + value on one line */
#configurator-creative .creative-action-quantity-vox,
#configurator-creative .creative-quantity-section {
	position: relative !important;
	bottom: auto !important;
}

#configurator-creative .vpw-quantity__form {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	margin: 0 !important;
	white-space: nowrap !important;
}

#configurator-creative .vpw-quantity__label {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #969799 !important;
	white-space: nowrap !important;
}

#configurator-creative .vpw-quantity__label::after {
	content: ':';
	margin-right: 2px;
}

#configurator-creative .vpw-quantity__content {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

#configurator-creative .vpw-quantity__input {
	width: 2.5em !important;
	min-width: 2em !important;
	max-width: 3em !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #969799 !important;
	text-align: left !important;
	line-height: 1.2 !important;
	-moz-appearance: textfield;
}

#configurator-creative .vpw-quantity__input::-webkit-outer-spin-button,
#configurator-creative .vpw-quantity__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (max-width: 959px) {
	body.page-template-template-creative-product-php {
		--vox-configurator-header-offset: 88px;
		--vox-configurator-stage-h: clamp(260px, 42vh, 380px);
	}

	#configurator-creative {
		max-height: none;
	}

	#configurator-creative .v-application,
	#configurator-creative .v-application--wrap {
		max-height: none;
	}

	#configurator-creative .creative-menu-wrap {
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 820px) {
	.vox-configurator-page-wrap {
		padding-top: 12px;
		padding-bottom: 20px;
	}

	.vox-configurator-inner {
		width: min(1440px, calc(100% - 20px));
	}

	#configurator-creative .vt-menu-main-header {
		font-size: 1.125rem !important;
	}
}