:root {
	--mpsc-ui-ink: #1f2937;
	--mpsc-ui-accent: #2563eb;
	--mpsc-ui-accent-dark: #1d4ed8;
	--mpsc-ui-accent-soft: #eff6ff;
	--mpsc-ui-accent-text: #ffffff;
	--mpsc-ui-surface: #ffffff;
	--mpsc-ui-surface-muted: #f8fafc;
	--mpsc-ui-border: #cbd5e1;
	--mpsc-ui-focus: #1d4ed8;
}

.mpsc-personalisation {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 1px solid #dcdcde;
	padding: clamp(.85rem, 2vw, 1.25rem);
	margin: 1rem 0;
	background: #fff;
	container-type: inline-size;
	container-name: mpsc-personalisation;
}

.mpsc-personalisation,
.mpsc-personalisation * {
	box-sizing: border-box;
}

.mpsc-personalisation h3 {
	margin-top: 0;
}

.mpsc-component-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	width: 100%;
	min-width: 0;
}

/*
 * Front and back editors deliberately stack. WooCommerce product summaries are
 * often only half the desktop viewport, so viewport media queries alone cannot
 * prevent two nested two-column editors from overflowing their real container.
 */
.mpsc-component-list[data-component-mode="double-sided"] {
	grid-template-columns: minmax(0, 1fr);
}

.mpsc-component-editor {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: clamp(.75rem, 2vw, 1rem);
	background: #fff;
}

.mpsc-component-editor legend {
	max-width: 100%;
	font-weight: 600;
	padding: 0 .35rem;
}

.mpsc-editor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: clamp(.9rem, 2.5vw, 1.25rem);
	align-items: start;
	width: 100%;
	min-width: 0;
}

.mpsc-editor-controls,
.mpsc-preview-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.mpsc-personalisation .form-row,
.mpsc-personalisation .form-row-wide {
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

.mpsc-personalisation label,
.mpsc-personalisation small {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.mpsc-personalisation input[type="file"],
.mpsc-personalisation input[type="range"],
.mpsc-personalisation select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.mpsc-preview-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.mpsc-preview {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 34rem;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
}

.mpsc-rights-confirmation label {
	display: block;
}

.mpsc-runtime-diagnostic {
	margin: 0 0 .75rem;
	padding: .5rem .65rem;
	border-left: 3px solid #dba617;
	background: #fff8e5;
	font-size: .875rem;
}

.mpsc-conflicting-personalisation-control {
	display: none !important;
}

@container mpsc-personalisation (max-width: 620px) {
	.mpsc-editor-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-preview {
		max-height: 28rem;
	}
}

/* Fallback for browsers without container-query support. */
@media (max-width: 700px) {
	.mpsc-editor-grid,
	.mpsc-component-list[data-component-mode="double-sided"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-personalisation {
		padding: .75rem;
	}

	.mpsc-component-editor {
		padding: .75rem;
	}
}

/* WordPress themes may override the browser's default [hidden] rule.
 * Keep conditional quality controls genuinely absent until Core enables them. */
.mpsc-personalisation [hidden] {
	display: none !important;
}


.mpsc-saved-design-loading-status {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: .85rem 0;
	font-weight: 700;
}

.mpsc-saved-design-loading-indicator {
	display: inline-block;
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 1.05rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mpsc-saved-design-loading-spin .8s linear infinite;
}

@keyframes mpsc-saved-design-loading-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mpsc-saved-design-loading-indicator {
		animation: none;
	}
}

.mpsc-quality-panel {
	margin-top: .9rem;
	padding: .8rem;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #f6f7f7;
}

.mpsc-quality-panel[data-grade="excellent"] {
	border-left: 4px solid #008a20;
}

.mpsc-quality-panel[data-grade="good"] {
	border-left: 4px solid #2271b1;
}

.mpsc-quality-panel[data-grade="average"] {
	border-left: 4px solid #dba617;
}

.mpsc-quality-panel[data-grade="poor"] {
	border-left: 4px solid #b32d2e;
}

.mpsc-quality-summary,
.mpsc-quality-message,
.mpsc-optimised-notice,
.mpsc-quality-error {
	margin: 0 0 .65rem;
}

/* WooCommerce themes commonly float generic product-form buttons. Keep the
 * shared managed warning in normal flow so its action cannot protrude through
 * the panel border or overlap following content. */
.mpsc-managed-quality:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.mpsc-quality-actions {
	display: grid;
	gap: .55rem;
	margin: .75rem 0;
}

.mpsc-quality-actions label,
.mpsc-quality-acknowledgement {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
}

.mpsc-quality-actions input,
.mpsc-quality-acknowledgement input {
	flex: 0 0 auto;
	margin-top: .2rem;
}

.mpsc-quality-panel .mpsc-choose-another {
	float: none !important;
	clear: both;
	display: inline-flex !important;
	position: static !important;
	align-items: center;
	justify-content: center;
	justify-self: start;
	width: auto;
	max-width: 100%;
	margin: 0;
	white-space: normal;
}

.mpsc-optimised-notice {
	padding: .55rem .65rem;
	background: #e7f5ff;
}

.mpsc-upload-error,
.mpsc-quality-error {
	padding: .55rem .65rem;
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
	font-weight: 600;
}

/* Phase 5 restricted-editor controls. */
.mpsc-scale-value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.mpsc-editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: .75rem 0 1rem;
}

.mpsc-editor-actions .button {
	float: none !important;
	margin: 0;
}

.mpsc-guide-toggle {
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	margin: 0;
}

.mpsc-guide-toggle input {
	margin: 0;
}

/* Phase 5 rc.2 compact editor correction.
 * Keep the preview in sight while the customer adjusts a narrow product-summary
 * editor, and remove theme-inherited spacing that made related controls feel
 * disconnected. This is layout only: no manifest or renderer behaviour changes. */
.mpsc-editor-controls > .form-row {
	margin-top: 0;
	margin-bottom: .55rem;
}

.mpsc-editor-controls > .form-row > label {
	display: block;
	margin-bottom: .22rem;
}

.mpsc-editor-controls > .form-row > small {
	display: block;
	margin-top: .2rem;
	line-height: 1.35;
}

.mpsc-preview-wrap {
	position: sticky;
	top: .75rem;
	z-index: 4;
	padding: .35rem;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.admin-bar .mpsc-preview-wrap {
	top: 2.75rem;
}

.mpsc-editor-actions {
	margin: .25rem 0 .55rem;
	gap: .45rem;
}

.mpsc-editor-actions .button {
	min-height: 0;
	padding: .45rem .7rem;
	line-height: 1.25;
}

.mpsc-quality-panel {
	margin-top: .35rem;
	padding: .65rem;
}

.mpsc-managed-quality:not([hidden]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .3rem .65rem;
	align-items: center;
}

.mpsc-managed-quality .mpsc-quality-summary {
	grid-column: 1 / -1;
}

.mpsc-managed-quality .mpsc-quality-message {
	margin: 0;
}

.mpsc-managed-quality .mpsc-choose-another {
	grid-column: 2;
	grid-row: 2;
}

@container mpsc-personalisation (max-width: 620px) {
	.mpsc-editor-grid {
		display: flex;
		flex-direction: column;
		gap: .65rem;
	}

	.mpsc-preview-wrap {
		order: -1;
		width: 100%;
		max-height: 19rem;
	}

	.mpsc-preview {
		width: auto;
		max-width: 100%;
		max-height: 18rem;
		object-fit: contain;
	}

	.mpsc-editor-controls {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem .7rem;
		align-items: start;
	}

	.mpsc-editor-controls > .form-row,
	.mpsc-editor-actions,
	.mpsc-quality-panel {
		margin: 0;
	}

	.mpsc-upload-row,
	.mpsc-fit-row,
	.mpsc-scale-row,
	.mpsc-editor-actions,
	.mpsc-quality-panel {
		grid-column: 1 / -1;
	}
}

@container mpsc-personalisation (max-width: 390px) {
	.mpsc-editor-controls {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-position-row {
		grid-column: 1;
	}

	.mpsc-managed-quality:not([hidden]) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Bounded advanced layer editor. Dormant unless a successor Product Family opts in. */
.mpsc-advanced-layer-editor {
	margin-top: 0.8rem;
	padding: 0.8rem;
	border: 1px solid rgba(15, 23, 42, 0.18);
	border-radius: 8px;
	background: rgba(248, 250, 252, 0.9);
}

.mpsc-advanced-layer-editor h4,
.mpsc-advanced-layer-editor .mpsc-layer-note {
	margin: 0 0 0.55rem;
}

.mpsc-layer-toolbar,
.mpsc-layer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.55rem 0;
}


.mpsc-layer-capacity {
	margin-left: auto;
	align-self: center;
	font-size: .82rem;
	font-weight: 600;
	color: #475569;
}

.mpsc-layer-order-note {
	margin: .35rem 0 .45rem;
	font-size: .84rem;
	color: #475569;
}

.mpsc-layer-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpsc-layer-position {
	flex: 0 0 auto;
	font-weight: 500;
	color: #64748b;
}

.mpsc-layer-properties {
	min-width: 0;
}

.mpsc-layer-list {
	margin: 0.6rem 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.35rem;
}

.mpsc-layer-list li {
	margin: 0;
}

.mpsc-layer-base,
.mpsc-layer-select {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid rgba(15, 23, 42, 0.16);
	border-radius: 6px;
	background: #fff;
	text-align: left;
}

.mpsc-layer-base {
	flex-direction: column;
	align-items: flex-start;
	color: #475569;
}

.mpsc-layer-select[aria-current="true"],
.mpsc-layer-select.is-selected {
	border-color: #1d4ed8;
	background: #eff6ff;
	box-shadow: inset 3px 0 0 #1d4ed8;
	font-weight: 700;
}

.mpsc-layer-current {
	margin: 0.55rem 0;
	padding: 0.5rem 0.6rem;
	border-radius: 6px;
	background: #eef2f7;
	color: #334155;
	font-weight: 600;
}

.mpsc-layer-geometry-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 0.75rem;
}

.mpsc-layer-geometry-grid label {
	display: grid;
	gap: 0.25rem;
	margin: 0;
}

.mpsc-layer-text-row input,
.mpsc-layer-colour-row input,
.mpsc-layer-geometry-grid input {
	width: 100%;
	max-width: 100%;
}

.mpsc-layer-error {
	margin: 0.55rem 0 0;
	color: #9f1239;
	font-weight: 600;
}

@media (max-width: 520px) {
	.mpsc-layer-geometry-grid {
		grid-template-columns: 1fr;
	}
}

/* Keep advanced controls contained inside ordinary laptop and mobile viewports. */
.mpsc-advanced-layer-editor {
	min-width: 0;
	max-height: min(42rem, calc(100dvh - 6rem));
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.mpsc-layer-text-row select,
.mpsc-layer-font-row select,
.mpsc-layer-colour-row select,
.mpsc-layer-alignment-row select,
.mpsc-layer-properties select {
	width: 100%;
	max-width: 100%;
}

@container mpsc-personalisation (max-width: 620px) {
	.mpsc-advanced-layer-editor {
		grid-column: 1 / -1;
		max-height: min(40rem, 68vh);
	}
}

/* One unified creation journey layered over the retained A/B/C/D variation. */
.mpsc-customer-routes {
	margin: 0 0 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid #dcdcde;
}

.mpsc-customer-routes h3,
.mpsc-customer-route-card h4,
.mpsc-customer-route-card strong {
	margin-top: 0;
}

.mpsc-customer-routes-intro {
	margin: -.25rem 0 .9rem;
}

.mpsc-customer-route-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	width: 100%;
	min-width: 0;
}

.mpsc-customer-route-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: left;
	color: inherit;
	min-width: 0;
	padding: 1rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
}

.mpsc-customer-route-card.is-selected {
	border-width: 2px;
	border-color: currentColor;
	padding: calc(1rem - 1px);
}

.mpsc-customer-route-card h4,
.mpsc-customer-route-card strong {
	margin-bottom: .45rem;
	padding-right: 2rem;
	font-size: 1rem;
	line-height: 1.3;
}

.mpsc-customer-route-card p,
.mpsc-customer-route-card > span:not(.mpsc-customer-route-number) {
	margin: 0 0 .8rem;
	font-size: .92rem;
}

.mpsc-customer-route-number {
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	background: #f0f0f1;
	font-size: .8rem;
	font-weight: 700;
}

.mpsc-customer-route-actions {
	display: grid;
	gap: .5rem;
	margin-top: auto;
}

.mpsc-customer-route-button {
	float: none !important;
	width: 100%;
	min-height: 2.65rem;
	white-space: normal;
	line-height: 1.25;
}

.mpsc-customer-route-button.is-selected,
.mpsc-customer-route-button[aria-pressed="true"] {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	font-weight: 700;
}

.mpsc-customer-route-status {
	margin: .8rem 0 0;
	font-weight: 600;
}

/* Applied only after the replacement control is verified in the browser. */
tr.mpsc-customer-route-native {
	display: none !important;
}

@container mpsc-personalisation (max-width: 760px) {
	.mpsc-customer-route-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.mpsc-customer-route-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fixed-template route. Templates remain protected and are loaded through nonce URLs. */
.mpsc-customer-route-button:disabled,
.mpsc-customer-route-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .62;
}

.mpsc-route-unavailable {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	font-weight: 600;
}

.mpsc-template-selector {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	min-width: 0;
}

.mpsc-template-selector h3 {
	margin: 0 0 .35rem;
}

.mpsc-template-selector > p {
	margin: 0 0 .8rem;
}

.mpsc-template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .75rem;
	min-width: 0;
	max-height: min(32rem, 58vh);
	overflow: auto;
	overscroll-behavior: contain;
	padding: .15rem;
}

.mpsc-template-card {
	display: grid;
	grid-template-rows: minmax(110px, 1fr) auto;
	gap: .55rem;
	width: 100%;
	min-width: 0;
	padding: .6rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.mpsc-template-card img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 220px;
	object-fit: contain;
	background: #f6f7f7;
}

.mpsc-template-card.is-selected,
.mpsc-template-card[aria-pressed="true"] {
	border-width: 2px;
	border-color: currentColor;
	padding: calc(.6rem - 1px);
	font-weight: 700;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mpsc-template-title {
	display: block;
	overflow-wrap: anywhere;
}

.mpsc-template-status {
	margin: .8rem 0 0 !important;
	font-weight: 600;
}

@media (max-width: 520px) {
	.mpsc-template-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-height: min(28rem, 58vh);
	}

	.mpsc-template-card {
		grid-template-rows: minmax(88px, 1fr) auto;
	}
}

/* Fixed Route A templates are preview-only and always render as registered. */
.mpsc-personalisation[data-internal-route="a"] .mpsc-fit-row,
.mpsc-personalisation[data-internal-route="a"] .mpsc-position-row,
.mpsc-personalisation[data-internal-route="a"] .mpsc-scale-row,
.mpsc-personalisation[data-internal-route="a"] .mpsc-editor-undo,
.mpsc-personalisation[data-internal-route="a"] .mpsc-editor-reset,
.mpsc-personalisation[data-internal-route="a"] .mpsc-advanced-layer-editor {
	display: none !important;
}

/* Editable-template wording. The base template remains fixed; only bounded wording is editable. */
.mpsc-template-wording {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	min-width: 0;
}

.mpsc-template-wording h3 {
	margin: 0 0 .35rem;
}

.mpsc-template-wording > p,
.mpsc-template-wording-status {
	margin: 0 0 .8rem;
}

.mpsc-template-wording-row {
	margin: 0;
}

.mpsc-template-wording-row label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 700;
}

.mpsc-template-wording-row textarea {
	display: block;
	width: 100%;
	min-height: 6.5rem;
	max-height: 14rem;
	resize: vertical;
	box-sizing: border-box;
}

.mpsc-template-wording-count {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
}

.mpsc-template-wording-status {
	font-weight: 600;
}

.mpsc-personalisation[data-internal-route="b"] .mpsc-fit-row,
.mpsc-personalisation[data-internal-route="b"] .mpsc-position-row,
.mpsc-personalisation[data-internal-route="b"] .mpsc-scale-row,
.mpsc-personalisation[data-internal-route="b"] .mpsc-editor-undo,
.mpsc-personalisation[data-internal-route="b"] .mpsc-editor-reset,
.mpsc-personalisation[data-internal-route="b"] .mpsc-advanced-layer-editor {
	display: none !important;
}

.mpsc-template-style-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: .75rem;
	align-items: end;
	margin-top: .8rem;
	padding: .75rem;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #f6f7f7;
}

.mpsc-template-style-controls label,
.mpsc-template-font-note {
	display: grid;
	gap: .3rem;
	margin: 0;
	font-weight: 600;
}

.mpsc-template-style-controls select,
.mpsc-template-style-controls input[type="range"] {
	width: 100%;
	box-sizing: border-box;
}

.mpsc-template-size-value {
	font-weight: 700;
}

@media (max-width: 520px) {
	.mpsc-template-style-controls {
		grid-template-columns: 1fr;
	}
}


@container mpsc-personalisation (max-width: 620px) {
	.mpsc-layer-toolbar,
	.mpsc-layer-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mpsc-layer-toolbar .button,
	.mpsc-layer-actions .button {
		width: 100%;
		white-space: normal;
	}

	.mpsc-layer-capacity {
		grid-column: 1 / -1;
		margin-left: 0;
	}
}

@container mpsc-personalisation (max-width: 390px) {
	.mpsc-layer-toolbar,
	.mpsc-layer-actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-advanced-layer-editor {
		max-height: 64dvh;
	}
}

/* rc.19 customer-editor refinement.
 * Keep the preview and layer tools understandable without altering any saved
 * geometry, design-manifest value or server-rendering contract. */
.mpsc-preview-panel {
	position: sticky;
	top: .75rem;
	align-self: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
}

.admin-bar .mpsc-preview-panel {
	top: 2.75rem;
}

.mpsc-preview-panel > summary,
.mpsc-layer-summary,
.mpsc-layer-crop-panel > summary {
	cursor: pointer;
	font-weight: 700;
	line-height: 1.3;
}

.mpsc-preview-panel > summary {
	padding: .65rem .75rem;
	border-bottom: 1px solid #dcdcde;
}

.mpsc-preview-panel:not([open]) > summary {
	border-bottom: 0;
}

.mpsc-preview-wrap {
	position: static;
	top: auto;
	z-index: auto;
	max-height: min(34rem, calc(100dvh - 10rem));
	border: 0;
	border-radius: 0 0 6px 6px;
	box-shadow: none;
}

.mpsc-preview {
	max-height: min(33rem, calc(100dvh - 11rem));
}

.mpsc-layer-summary {
	display: flex;
	align-items: center;
	gap: .75rem;
	justify-content: space-between;
	margin: -.8rem -.8rem .7rem;
	padding: .7rem .8rem;
	border-bottom: 1px solid rgba(15, 23, 42, .14);
	background: #f1f5f9;
}

.mpsc-layer-summary .mpsc-layer-capacity {
	margin-left: auto;
	white-space: nowrap;
}

.mpsc-layer-properties {
	margin-top: .65rem;
	padding-top: .65rem;
	border-top: 1px solid rgba(15, 23, 42, .12);
}

.mpsc-layer-properties-title {
	margin: 0 0 .65rem;
	font-size: 1rem;
}

.mpsc-layer-geometry-grid label > span,
.mpsc-layer-crop-grid label > span {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.mpsc-layer-geometry-grid output,
.mpsc-layer-crop-grid output,
.mpsc-layer-text-size-value,
.mpsc-layer-rotation-value,
.mpsc-layer-arc-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #475569;
}

.mpsc-transform-inputs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.5rem;
	gap: .5rem;
	align-items: center;
}

.mpsc-transform-number,
.mpsc-template-arc-number {
	width: 100%;
	min-height: 40px;
	font-variant-numeric: tabular-nums;
}

.mpsc-template-arc-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 5.5rem;
	gap: .5rem;
	align-items: center;
}

.mpsc-layer-crop-panel {
	margin: .7rem 0;
	border: 1px solid rgba(15, 23, 42, .14);
	border-radius: 6px;
	background: #fff;
}

.mpsc-layer-crop-panel > summary {
	padding: .6rem .7rem;
}

.mpsc-layer-crop-panel[open] > summary {
	border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.mpsc-layer-crop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55rem .75rem;
	padding: .7rem;
}

.mpsc-layer-crop-grid label {
	display: grid;
	gap: .25rem;
	margin: 0;
}

.mpsc-layer-actions {
	padding-top: .15rem;
}

@container mpsc-personalisation (max-width: 620px) {
	.mpsc-preview-panel {
		position: static;
		top: auto;
		order: -1;
	}

	.mpsc-preview-wrap {
		max-height: min(24rem, 42dvh);
	}

	.mpsc-preview {
		max-height: min(23rem, 40dvh);
	}

	.mpsc-advanced-layer-editor {
		max-height: none;
		overflow: visible;
		scrollbar-gutter: auto;
	}

	.mpsc-layer-summary {
		align-items: flex-start;
	}

	.mpsc-layer-summary .mpsc-layer-capacity {
		margin-left: auto;
		text-align: right;
	}
}

@container mpsc-personalisation (max-width: 390px) {
	.mpsc-layer-crop-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-layer-summary {
		flex-direction: column;
		gap: .2rem;
	}

	.mpsc-layer-summary .mpsc-layer-capacity {
		margin-left: 0;
		text-align: left;
	}
}


.mpsc-source-choice {
	appearance: none;
	font: inherit;
	cursor: pointer;
}

.mpsc-source-choice:hover,
.mpsc-source-choice:focus-visible {
	border-color: currentColor;
}

.mpsc-source-choice:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.mpsc-generation-source {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
}

.mpsc-generation-source-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .75rem;
}

.mpsc-generation-source-heading h4 {
	margin: 0;
}

.mpsc-generation-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .65rem;
}

.mpsc-generation-card {
	display: grid;
	gap: .35rem;
	padding: .45rem;
	border: 1px solid #c3c4c7;
	border-radius: 5px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.mpsc-generation-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
}

.mpsc-generation-card.is-selected,
.mpsc-generation-card[aria-pressed="true"] {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@container mpsc-personalisation (max-width: 760px) {
	.mpsc-generation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mpsc-generation-source-heading { align-items: flex-start; flex-direction: column; }
}

/* rc.23 mobile live-preview correction.
 * The production canvas and submitted values are unchanged. Preview-only mode
 * hides controls, while edit mode keeps a compact live preview above them. */
.mpsc-route-label-short,
.mpsc-mobile-editor-switch,
.mpsc-mobile-done-bar,
.mpsc-mobile-preview-action {
	display: none;
}

.mpsc-source-summary {
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .65rem;
	padding: .65rem .75rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #f6f7f7;
}

.mpsc-source-summary:not([hidden]) {
	display: flex;
}

@container mpsc-personalisation (max-width: 620px) {
	.mpsc-customer-routes {
		margin-bottom: .75rem;
		padding-bottom: .75rem;
	}

	.mpsc-customer-routes h3 {
		margin-bottom: .45rem;
	}

	.mpsc-customer-route-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .4rem;
	}

	.mpsc-customer-route-card {
		min-height: 3.4rem;
		align-items: center;
		justify-content: center;
		padding: .6rem .35rem;
		text-align: center;
	}

	.mpsc-customer-route-card.is-selected {
		padding: calc(.6rem - 1px) calc(.35rem - 1px);
	}

	.mpsc-customer-route-card strong {
		margin: 0;
		padding: 0;
		font-size: .84rem;
	}

	.mpsc-customer-route-card > span:not(.mpsc-customer-route-number),
	.mpsc-customer-route-number,
	.mpsc-route-label-full {
		display: none;
	}

	.mpsc-route-label-short {
		display: inline;
	}

	.mpsc-customer-routes.is-source-ready .mpsc-customer-routes-intro,
	.mpsc-customer-routes.is-source-ready .mpsc-customer-route-grid,
	.mpsc-customer-routes.is-source-ready .mpsc-generation-source,
	.mpsc-customer-routes.is-source-ready .mpsc-customer-route-status {
		display: none !important;
	}

	.mpsc-customer-routes.is-source-ready .mpsc-source-summary {
		margin-top: 0;
	}

	.mpsc-template-grid {
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
	}

	.mpsc-component-editor {
		padding-top: .55rem;
	}

	.mpsc-mobile-editor-switch {
		position: sticky;
		top: .25rem;
		z-index: 30;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .35rem;
		margin: 0 0 .55rem;
		padding: .35rem;
		border: 1px solid #c3c4c7;
		border-radius: 8px;
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
	}

	.admin-bar .mpsc-mobile-editor-switch {
		top: 3rem;
	}

	.mpsc-mobile-view-button {
		min-height: 2.55rem;
		border: 1px solid transparent;
		border-radius: 6px;
		background: transparent;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	.mpsc-mobile-view-button.is-selected,
	.mpsc-mobile-view-button[aria-pressed="true"] {
		border-color: #1d4ed8;
		background: #eff6ff;
		color: #1e3a8a;
	}

	.mpsc-component-editor[data-mobile-view="preview"] .mpsc-editor-controls {
		display: none !important;
	}

	.mpsc-component-editor[data-mobile-view="preview"] .mpsc-preview-panel,
	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-panel {
		display: block;
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-panel {
		position: sticky;
		top: 3.65rem;
		z-index: 22;
		order: -1;
		margin-bottom: .65rem;
		box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
	}

	.admin-bar .mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-panel {
		top: 6.4rem;
	}

	.mpsc-editor-grid {
		gap: 0;
	}

	.mpsc-preview-panel > summary {
		padding: .55rem .65rem;
	}

	.mpsc-preview-wrap {
		max-height: min(31rem, 58dvh);
		padding: .25rem;
	}

	.mpsc-preview {
		max-height: min(30rem, 56dvh);
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-wrap {
		max-height: min(15rem, 28dvh);
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview {
		max-height: min(14rem, 26dvh);
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-mobile-preview-action {
		display: none;
	}

	.mpsc-mobile-preview-action {
		display: block;
		padding: .65rem;
		border-top: 1px solid #dcdcde;
	}

	.mpsc-mobile-preview-action .button,
	.mpsc-mobile-done-bar .button {
		float: none !important;
		width: 100%;
		min-height: 2.8rem;
		margin: 0;
		white-space: normal;
	}

	.mpsc-mobile-done-bar {
		position: sticky;
		bottom: .25rem;
		z-index: 24;
		display: block;
		grid-column: 1 / -1;
		margin-top: .7rem;
		padding: .45rem;
		border: 1px solid #c3c4c7;
		border-radius: 8px;
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 -2px 8px rgba(15, 23, 42, .12);
	}

	.mpsc-advanced-layer-editor[open] .mpsc-layer-summary,
	.mpsc-advanced-layer-editor[open] .mpsc-layer-toolbar {
		position: static;
	}

	.mpsc-advanced-layer-editor[open] .mpsc-layer-toolbar {
		padding: .45rem;
		border: 1px solid #dcdcde;
		border-radius: 6px;
		background: rgba(255, 255, 255, .97);
	}

	.mpsc-layer-properties {
		scroll-margin-top: 8rem;
	}
}

@media (max-width: 700px) {
	/* Fallback for browsers that do not support container queries. */
	.mpsc-mobile-editor-switch {
		display: grid;
	}

	.mpsc-component-editor[data-mobile-view="preview"] .mpsc-editor-controls {
		display: none !important;
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-panel {
		display: block;
		position: sticky;
		top: 3.65rem;
		z-index: 22;
		order: -1;
		margin-bottom: .65rem;
	}

	.admin-bar .mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-panel {
		top: 6.4rem;
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-wrap {
		max-height: min(15rem, 28dvh);
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview {
		max-height: min(14rem, 26dvh);
	}

	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-mobile-preview-action {
		display: none;
	}

	.mpsc-mobile-done-bar,
	.mpsc-mobile-preview-action {
		display: block;
	}
}

/* Product-bound workspace, rc.24.
 * The WooCommerce product page selects and confirms the design. Creation and
 * editing occur in one contained workspace, with physical-product context kept
 * visible. These rules are scoped to MPS Creator only. */
body.mpsc-workspace-open {
	overflow: hidden;
}

.mpsc-personalisation {
	padding: .85rem;
	border-radius: 8px;
}

.mpsc-customer-routes {
	margin: 0;
	padding: 0;
	border: 0;
}

.mpsc-customer-routes h3 {
	margin: 0 0 .2rem;
	font-size: 1.05rem;
}

.mpsc-customer-routes-intro {
	margin: 0 0 .65rem;
	font-size: .9rem;
}

.mpsc-customer-route-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: .45rem;
}

.mpsc-customer-route-card,
.mpsc-customer-route-card.is-selected {
	min-height: 0;
	padding: .62rem .72rem;
	border-width: 1px;
	border-radius: 6px;
}

.mpsc-customer-route-card strong,
.mpsc-customer-route-card.is-selected strong {
	margin: 0;
	padding: 0;
	font-size: .94rem;
	line-height: 1.25;
}

.mpsc-customer-route-card > span {
	margin-top: .12rem;
	font-size: .8rem;
	line-height: 1.3;
	color: #5f6368;
}

.mpsc-customer-route-status {
	margin: .5rem 0 0;
	font-size: .82rem;
}

.mpsc-customer-routes.is-source-ready .mpsc-customer-routes-intro,
.mpsc-customer-routes.is-source-ready .mpsc-customer-route-grid,
.mpsc-customer-routes.is-source-ready .mpsc-customer-route-status {
	display: none !important;
}

.mpsc-design-summary:not([hidden]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .7rem;
	align-items: start;
	margin-top: .65rem;
	padding: .7rem;
	border: 1px solid #d6d1c6;
	border-radius: 7px;
	background: #faf9f6;
}

.mpsc-product-page-preview {
	display: grid;
	gap: .45rem;
	min-width: 0;
}

.mpsc-product-page-preview-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
	gap: .55rem;
	align-items: start;
}

.mpsc-product-page-preview-item {
	display: grid;
	gap: .3rem;
	min-width: 0;
	margin: 0;
}

.mpsc-product-page-preview-item[hidden] {
	display: none !important;
}

.mpsc-product-page-preview-canvas-wrap {
	display: grid;
	place-items: center;
	min-height: 150px;
	padding: .45rem;
	border: 1px solid #dcdcde;
	border-radius: 7px;
	overflow: hidden;
	background: #f1efe9;
}

.mpsc-product-page-preview-canvas {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(42vh, 300px);
	object-fit: contain;
}

.mpsc-product-page-preview-item figcaption {
	font-size: .76rem;
	line-height: 1.25;
	text-align: center;
	color: #5f6368;
}

.mpsc-design-summary-thumb {
	width: 100%;
	min-height: 150px;
	max-height: 300px;
	border: 1px solid #dcdcde;
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}

.mpsc-design-summary-thumb[hidden] {
	display: none !important;
}

.mpsc-design-summary-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 300px;
	object-fit: contain;
}

.mpsc-product-page-preview-note {
	margin: 0;
	font-size: .72rem;
	line-height: 1.35;
	color: #6b6f74;
}

.mpsc-design-summary-copy {
	display: grid;
	gap: .08rem;
	min-width: 0;
}

.mpsc-design-summary-copy span {
	font-size: .84rem;
	color: #5f6368;
}

.mpsc-design-summary-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.mpsc-design-summary-actions .button {
	float: none !important;
	min-height: 0;
	margin: 0;
	padding: .42rem .62rem;
	font-size: .82rem;
	line-height: 1.25;
}

/* rc.167: a saved personalisation is a compact purchase hand-off, not another editor screen. */
.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-copy {
	order: -2;
	gap: .12rem;
}

.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-source,
.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-status-detail:empty {
	display: none;
}

.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-status {
	font-size: 1rem;
	line-height: 1.25;
}

.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-actions .mpsc-clear-design {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (min-width: 700px) {
	.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary:not([hidden]) {
		grid-template-columns: minmax(180px, .85fr) minmax(220px, 1.15fr);
		grid-template-rows: auto 1fr;
		column-gap: .85rem;
	}

	.mpsc-personalisation[data-design-saved="yes"] .mpsc-product-page-preview {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-copy {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.mpsc-personalisation[data-design-saved="yes"] .mpsc-design-summary-actions {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}
}

.mpsc-design-workspace:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: stretch;
	padding: 20px;
}

.admin-bar .mpsc-design-workspace:not([hidden]) {
	top: 32px;
}

.mpsc-workspace-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(7, 12, 28, .72);
}

.mpsc-workspace-shell {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: min(1440px, 100%);
	height: 100%;
	min-width: 0;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #d6d1c6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}

.mpsc-workspace-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: .8rem;
	align-items: center;
	padding: .65rem .8rem;
	border-bottom: 1px solid #e1ddd4;
}

.mpsc-workspace-header .button,
.mpsc-workspace-footer .button,
.mpsc-product-details-head .button {
	float: none !important;
	min-height: 0;
	margin: 0;
	padding: .48rem .7rem;
	font-size: .86rem;
	line-height: 1.25;
}

.mpsc-workspace-product-identity {
	display: flex;
	gap: .6rem;
	align-items: center;
	min-width: 0;
}

.mpsc-workspace-product-thumb {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border: 1px solid #e1ddd4;
	border-radius: 5px;
	object-fit: cover;
	background: #f5f6f6;
}

.mpsc-workspace-product-identity > div {
	display: grid;
	gap: .05rem;
	min-width: 0;
}

.mpsc-workspace-product-name,
.mpsc-workspace-product-meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpsc-workspace-product-meta {
	font-size: .8rem;
	color: #5f6368;
}


.mpsc-workspace-layout {
	display: grid;
	grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

/* The wrapper is structural only on desktop so the established three-column
 * media, preview and controls workspace remains unchanged. */
.mpsc-workspace-scroll-region {
	display: contents;
}


@media (min-width: 900px) {
	.mpsc-product-media { grid-column: 1; }
	.mpsc-workspace-preview-slot { grid-column: 2; }
	.mpsc-workspace-editor { grid-column: 3; }
}

.mpsc-product-media {
	padding: .75rem;
	border-right: 1px solid #eeeae3;
	background: #fafafa;
}

.mpsc-product-media-main {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid #ddd;
	border-radius: 7px;
	background: #f3f6f5;
}

.mpsc-product-media-main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mpsc-product-media-thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .4rem;
	margin-top: .5rem;
}

.mpsc-product-media-thumb {
	appearance: none;
	aspect-ratio: 1 / 1;
	padding: .12rem;
	border: 1px solid #d6d1c6;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
}

.mpsc-product-media-thumb.is-selected,
.mpsc-product-media-thumb[aria-pressed="true"] {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.mpsc-product-media-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpsc-workspace-editor {
	min-width: 0;
	padding: .8rem;
}

.mpsc-workspace-editor .mpsc-editor-heading,
.mpsc-workspace-editor .mpsc-editor-status,
.mpsc-workspace-editor .mpsc-component-choice-note {
	margin-bottom: .45rem;
}

.mpsc-workspace-editor .mpsc-component-list {
	gap: .7rem;
}

.mpsc-workspace-editor .mpsc-component-editor {
	padding: .65rem;
	border-radius: 7px;
}

.mpsc-workspace-editor .mpsc-editor-grid {
	grid-template-columns: minmax(340px, 1.35fr) minmax(250px, .65fr);
	grid-template-areas: "preview controls";
	gap: .8rem;
}

.mpsc-workspace-editor .mpsc-preview-panel {
	grid-area: preview;
	min-width: 0;
	margin: 0;
}

.mpsc-workspace-editor .mpsc-editor-controls {
	grid-area: controls;
	min-width: 0;
}

.mpsc-workspace-editor .mpsc-preview-wrap {
	position: static;
	max-height: min(62vh, 620px);
	padding: .35rem;
}

.mpsc-workspace-editor .mpsc-preview {
	max-height: min(60vh, 600px);
}

.mpsc-workspace-editor .mpsc-editor-controls > .form-row {
	margin-bottom: .42rem;
}

.mpsc-workspace-editor .mpsc-editor-controls > .form-row > label {
	margin-bottom: .12rem;
	font-size: .85rem;
}

.mpsc-workspace-editor .mpsc-editor-controls small {
	font-size: .74rem;
}

.mpsc-workspace-editor input[type="range"] {
	margin: .1rem 0;
}

.mpsc-workspace-editor .mpsc-editor-actions {
	gap: .35rem;
	margin: .25rem 0 .4rem;
}

.mpsc-workspace-editor .mpsc-editor-actions .button,
.mpsc-workspace-editor .mpsc-layer-toolbar .button,
.mpsc-workspace-editor .mpsc-layer-actions .button {
	min-height: 0;
	padding: .38rem .56rem;
	font-size: .78rem;
}

.mpsc-workspace-editor .mpsc-advanced-layer-editor {
	max-height: none;
	overflow: visible;
	padding: .6rem;
}

.mpsc-workspace-editor .mpsc-advanced-layer-editor > summary {
	font-size: .86rem;
	font-weight: 700;
	cursor: pointer;
}

.mpsc-workspace-footer {
	display: flex;
	justify-content: flex-end;
	gap: .75rem;
	padding: .65rem .8rem;
	border-top: 1px solid #e1ddd4;
	background: #fff;
}

.mpsc-product-details-panel:not([hidden]) {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: block;
	width: min(390px, 92%);
	padding: .85rem;
	overflow: auto;
	border-left: 1px solid #d6d1c6;
	background: #fff;
	box-shadow: -10px 0 28px rgba(0, 0, 0, .16);
}

.mpsc-product-details-head {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	align-items: center;
	margin-bottom: .75rem;
}

.mpsc-product-details-head h3 {
	margin: 0;
}

.mpsc-product-details-image {
	aspect-ratio: 1 / 1;
	margin-bottom: .75rem;
	border: 1px solid #e1ddd4;
	border-radius: 7px;
	overflow: hidden;
	background: #f5f6f6;
}

.mpsc-product-details-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mpsc-product-details-panel dl {
	margin: 0;
}

.mpsc-product-details-panel dl > div {
	display: grid;
	grid-template-columns: minmax(90px, .4fr) minmax(0, .6fr);
	gap: .5rem;
	padding: .45rem 0;
	border-bottom: 1px solid #eeeae3;
}

.mpsc-product-details-panel dt {
	font-weight: 700;
}

.mpsc-product-details-panel dd {
	margin: 0;
}

/* The retired Preview/Edit mode must not reappear through legacy theme rules. */
.mpsc-mobile-editor-switch,
.mpsc-mobile-done-bar,
.mpsc-mobile-preview-action,
.mpsc-mobile-view-button,
.mpsc-mobile-show-preview,
.mpsc-mobile-show-edit {
	display: none !important;
}

.mpsc-component-editor[data-mobile-view] .mpsc-editor-controls,
.mpsc-component-editor[data-mobile-view] .mpsc-preview-panel {
	display: block !important;
}

@media (max-width: 899px) {
	.mpsc-design-workspace:not([hidden]) {
		padding: 0;
	}

	.admin-bar .mpsc-design-workspace:not([hidden]) {
		top: 46px;
	}

	.mpsc-workspace-shell {
		border: 0;
		border-radius: 0;
	}

	.mpsc-workspace-header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: .5rem;
	}

	.mpsc-workspace-header .button {
		padding: .42rem .5rem;
		font-size: .78rem;
	}

	.mpsc-workspace-product-thumb {
		width: 38px;
		height: 38px;
	}

	.mpsc-workspace-layout {
		display: block;
	}

	.mpsc-product-media {
		display: grid;
		grid-template-columns: minmax(90px, 126px) minmax(0, 1fr);
		gap: .55rem;
		padding: .55rem;
		border-right: 0;
		border-bottom: 1px solid #eeeae3;
	}

	.mpsc-product-media-thumbs {
		display: flex;
		align-items: flex-start;
		gap: .35rem;
		margin: 0;
		overflow-x: auto;
	}

	.mpsc-product-media-thumb {
		width: 52px;
		min-width: 52px;
	}

	.mpsc-workspace-editor {
		padding: .55rem;
	}

	.mpsc-workspace-editor .mpsc-editor-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "preview" "controls";
		gap: .55rem;
	}


	.mpsc-personalisation[data-starting-layout-incomplete="yes"] .mpsc-mobile-tool-tabs {
		display: none !important;
	}

	.mpsc-personalisation[data-starting-layout-incomplete="yes"] .mpsc-workspace-editor .mpsc-advanced-layer-editor {
		order: 5;
	}

	/* rc.241: an incomplete prepared layout is a fill task, not a fine-tuning
	 * task. The accepted preview remains visible, but base-image controls are
	 * temporarily withheld until every required prepared slot is resolved. */
	.mpsc-personalisation[data-starting-layout-incomplete="yes"] .mpsc-workspace-editor .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor) {
		display: none !important;
	}

	.mpsc-personalisation[data-starting-layout-incomplete="yes"] .mpsc-workspace-editor .mpsc-advanced-layer-editor {
		margin-top: 0;
	}

	.mpsc-workspace-editor .mpsc-preview-panel {
		position: static !important;
		top: auto !important;
		order: initial;
		margin: 0;
		box-shadow: none;
	}

	.mpsc-workspace-editor .mpsc-preview-wrap,
	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview-wrap {
		max-height: min(30vh, 260px);
	}

	.mpsc-workspace-editor .mpsc-preview,
	.mpsc-component-editor[data-mobile-view="edit"] .mpsc-preview {
		max-height: min(29vh, 250px);
	}

	.mpsc-workspace-editor .mpsc-editor-controls {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .4rem .55rem;
	}

	.mpsc-workspace-editor .mpsc-upload-row,
	.mpsc-workspace-editor .mpsc-fit-row,
	.mpsc-workspace-editor .mpsc-scale-row,
	.mpsc-workspace-editor .mpsc-editor-actions,
	.mpsc-workspace-editor .mpsc-quality-panel,
	.mpsc-workspace-editor .mpsc-advanced-layer-editor {
		grid-column: 1 / -1;
	}

	.mpsc-product-details-panel:not([hidden]) {
		top: auto;
		left: 0;
		bottom: 0;
		width: 100%;
		max-height: 78%;
		border-top: 1px solid #d6d1c6;
		border-left: 0;
		border-radius: 8px 8px 0 0;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
	}
}

@media (max-width: 520px) {
	.mpsc-workspace-product-identity {
		gap: .35rem;
	}

	.mpsc-workspace-product-thumb {
		display: none;
	}

	.mpsc-workspace-product-meta {
		max-width: 38vw;
	}


	.mpsc-product-media {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.mpsc-workspace-editor .mpsc-editor-controls {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-workspace-editor .mpsc-position-row {
		grid-column: 1;
	}

	.mpsc-workspace-footer {
		padding: .5rem;
	}
}

/* rc.25 split-shell workspace refinement.
 * Desktop is a precision workspace; mobile is a separate touch-first shell.
 * Both shells retain one design state, one manifest and one save path. */
.mpsc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Keep the three product-page choices concise and horizontal on desktop. */
.mpsc-customer-route-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Compact template carousel. */
.mpsc-template-selector {
	margin-bottom: .65rem;
	padding: .7rem;
}

.mpsc-template-selector > p {
	margin-bottom: .5rem;
}

.mpsc-template-carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: .4rem;
	align-items: stretch;
	min-width: 0;
}

.mpsc-template-viewport {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.mpsc-template-grid {
	display: flex;
	gap: .55rem;
	width: max-content;
	max-height: none;
	overflow: visible;
	padding: .15rem .2rem .35rem;
}

.mpsc-template-card,
.mpsc-template-card.is-selected {
	flex: 0 0 138px;
	width: 138px;
	min-width: 138px;
	grid-template-rows: 92px auto;
	gap: .35rem;
	padding: .42rem;
	scroll-snap-align: start;
}

.mpsc-template-card.is-selected {
	padding: calc(.42rem - 1px);
}

.mpsc-template-card img {
	max-height: 92px;
}

.mpsc-template-title {
	font-size: .8rem;
	line-height: 1.25;
}

.mpsc-template-carousel-prev,
.mpsc-template-carousel-next {
	float: none !important;
	align-self: center;
	width: 36px !important;
	min-width: 36px;
	height: 44px;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.45rem !important;
	line-height: 1 !important;
}

.mpsc-template-status {
	margin-top: .45rem !important;
	font-size: .78rem;
}

/* Desktop precision workspace. */
.mpsc-workspace-layout {
	grid-template-columns: minmax(128px, 160px) minmax(360px, 1.2fr) minmax(310px, .8fr);
	align-items: start;
}

.mpsc-product-media {
	position: sticky;
	top: 0;
	align-self: start;
}

.mpsc-workspace-preview-slot {
	position: sticky;
	top: 0;
	align-self: start;
	min-width: 0;
	padding: .65rem .35rem .65rem .65rem;
}

.mpsc-workspace-preview-slot:empty {
	display: none;
}

.mpsc-workspace-preview-slot .mpsc-preview-panel {
	position: static;
	top: auto;
	margin: 0;
	box-shadow: none;
}

.mpsc-workspace-preview-slot .mpsc-preview-wrap {
	max-height: min(68vh, 680px);
	padding: .35rem;
}

.mpsc-workspace-preview-slot .mpsc-preview {
	max-height: min(66vh, 660px);
}

.mpsc-workspace-editor {
	padding: .65rem .65rem .8rem .35rem;
}

.mpsc-workspace-editor .mpsc-editor-heading,
.mpsc-workspace-editor .mpsc-editor-status,
.mpsc-workspace-editor .mpsc-component-choice-note {
	margin: 0 0 .35rem;
}

.mpsc-workspace-editor .mpsc-component-editor {
	padding: .55rem;
}

.mpsc-workspace-editor .mpsc-editor-grid {
	display: block;
}

.mpsc-workspace-editor .mpsc-editor-controls {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .38rem .5rem;
	align-items: start;
}

/* UX Section 7 revision: desktop drag-and-drop artwork intake.
 * Mobile retains the compact native file picker and the same input/process path. */
.mpsc-desktop-upload-dropzone {
	display: none;
}

@media (min-width: 900px) {
	.mpsc-workspace-editor .mpsc-upload-row {
		position: relative;
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone {
		display: grid;
		place-items: center;
		gap: .28rem;
		min-height: 126px;
		padding: .85rem 1rem;
		border: 2px dashed var(--mpsc-ui-border);
		border-radius: 8px;
		background: var(--mpsc-ui-surface-muted);
		color: var(--mpsc-ui-ink);
		text-align: center;
		cursor: pointer;
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone:hover,
	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone:focus-visible,
	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone.is-dragover {
		border-color: var(--mpsc-ui-accent);
		background: var(--mpsc-ui-accent-soft);
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone:focus-visible {
		outline: 3px solid color-mix(in srgb, var(--mpsc-ui-focus) 32%, transparent);
		outline-offset: 2px;
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-dropzone[aria-disabled="true"] {
		opacity: .55;
		cursor: not-allowed;
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-choose {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		margin-top: .18rem;
		padding: .45rem .85rem;
		border: 1px solid var(--mpsc-ui-accent);
		border-radius: 6px;
		background: var(--mpsc-ui-surface);
		color: var(--mpsc-ui-ink);
		font-weight: 700;
	}

	.mpsc-workspace-editor .mpsc-desktop-upload-file-name {
		max-width: 100%;
		font-size: .82rem;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	.mpsc-workspace-editor .mpsc-upload-row > .mpsc-artwork-input {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

.mpsc-workspace-editor .mpsc-upload-row,
.mpsc-workspace-editor .mpsc-fit-row,
.mpsc-workspace-editor .mpsc-editor-actions,
.mpsc-workspace-editor .mpsc-quality-panel,
.mpsc-workspace-editor .mpsc-advanced-layer-editor {
	grid-column: 1 / -1;
}

.mpsc-workspace-editor .mpsc-position-row,
.mpsc-workspace-editor .mpsc-scale-row {
	grid-column: auto;
	margin: 0;
}

.mpsc-workspace-editor .mpsc-position-row label,
.mpsc-workspace-editor .mpsc-scale-row label {
	display: flex;
	justify-content: space-between;
	gap: .4rem;
}

.mpsc-focal-x-value,
.mpsc-focal-y-value,
.mpsc-scale-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.mpsc-workspace-editor .button,
.mpsc-workspace-editor button,
.mpsc-layer-toolbar .button,
.mpsc-layer-actions .button {
	width: auto;
	max-width: 100%;
	align-self: start;
	flex: 0 0 auto;
}

.mpsc-touch-stepper,
.mpsc-mobile-tool-tabs {
	display: none;
}

/* Slightly reduce the design canvas on laptop-height desktop viewports so the
 * sticky preview does not trigger a vertical scroll shift. */
@media (min-width: 900px) and (max-height: 900px) {
	.mpsc-workspace-preview-slot .mpsc-preview-wrap {
		max-height: min(63vh, 630px);
	}

	.mpsc-workspace-preview-slot .mpsc-preview {
		max-height: min(61vh, 610px);
	}
}

/* Put text editing immediately after Add text. Layer ordering is secondary. */
.mpsc-advanced-layer-editor {
	margin-top: .35rem;
	padding: .55rem;
}

.mpsc-layer-summary {
	margin: -.55rem -.55rem .45rem;
	padding: .55rem;
}

.mpsc-layer-toolbar {
	margin: .35rem 0;
}

.mpsc-layer-properties {
	margin-top: .4rem;
	padding-top: .4rem;
}

.mpsc-layer-properties-title {
	margin-bottom: .4rem;
	font-size: .9rem;
}

.mpsc-layer-properties .form-row {
	margin-bottom: .42rem;
}

.mpsc-layer-management {
	margin-top: .55rem;
	border: 1px solid rgba(15, 23, 42, .14);
	border-radius: 6px;
	background: #fff;
}

.mpsc-layer-management > summary {
	padding: .55rem .65rem;
	cursor: pointer;
	font-size: .84rem;
	font-weight: 700;
}

.mpsc-layer-management[open] > summary {
	border-bottom: 1px solid rgba(15, 23, 42, .12);
}

.mpsc-layer-management .mpsc-layer-list,
.mpsc-layer-management .mpsc-layer-actions {
	margin: .55rem;
}

/* Touch shell selected from the live viewport, not the browser user agent. */
@media (max-width: 899px) {
	.mpsc-customer-route-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Workspace geometry is defined once in the Section 3 mobile model below. */
	.mpsc-product-media {
		position: relative;
		top: auto;
		z-index: 19;
		display: block;
		padding: .3rem .5rem;
		border-right: 0;
		border-bottom: 1px solid #eeeae3;
		background: #fafafa;
	}

	.mpsc-product-media-main {
		display: none;
	}

	.mpsc-product-media-thumbs {
		display: flex;
		gap: .35rem;
		margin: 0;
		overflow-x: auto;
	}

	.mpsc-product-media-thumb {
		width: 44px;
		min-width: 44px;
		height: 44px;
		aspect-ratio: 1;
	}

	.mpsc-workspace-editor {
		min-height: 0;
		padding: .5rem;
		overflow: visible;
		touch-action: pan-y;
	}

	.mpsc-workspace-editor .mpsc-editor-heading,
	.mpsc-workspace-editor .mpsc-editor-status {
		margin-bottom: .3rem;
	}

	.mpsc-workspace-editor .mpsc-editor-controls {
		display: block !important;
	}

	.mpsc-mobile-tool-tabs {
		position: static;
		z-index: 8;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .35rem;
		margin: 0 0 .45rem;
		padding: .3rem;
		border: 1px solid #d6d1c6;
		border-radius: 8px;
		background: rgba(255, 255, 255, .98);
	}

	.mpsc-mobile-tool-button {
		min-height: 44px;
		padding: .55rem .45rem;
		border: 1px solid transparent;
		border-radius: 6px;
		background: transparent;
		font: inherit;
		font-weight: 700;
	}

	.mpsc-mobile-tool-button.is-selected,
	.mpsc-mobile-tool-button[aria-pressed="true"] {
		border-color: currentColor;
		background: #f6f7f7;
	}

	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-upload-row,
	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-fit-row,
	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-position-row,
	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-scale-row,
	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-editor-actions,
	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-quality-panel {
		display: none !important;
	}

	.mpsc-component-editor[data-mobile-tool-active="extras"] .mpsc-advanced-layer-editor:not([hidden]) {
		display: block !important;
	}

	/* rc.175: keep layer entry actions in the natural workflow after the base-image actions. */
	.mpsc-component-editor[data-mobile-tool-active="image"] .mpsc-advanced-layer-editor:not([hidden]) {
		display: block !important;
	}

	/* rc.188: background controls are part of the primary mobile image workflow; do not hide them with the advanced-layer child filter. */
	.mpsc-component-editor[data-mobile-tool-active="image"] .mpsc-advanced-layer-editor > :not(.mpsc-surface-background-controls):not(.mpsc-starting-layout-fill):not(.mpsc-layer-toolbar):not(.mpsc-composition-layouts):not(.mpsc-layer-image-source-chooser):not(.mpsc-layer-artwork-library):not(.mpsc-layer-error) {
		display: none !important;
	}

	.mpsc-component-editor[data-mobile-tool-active="image"] .mpsc-layer-toolbar {
		display: grid;
	}

	.mpsc-workspace-editor .mpsc-position-row,
	.mpsc-workspace-editor .mpsc-scale-row,
	.mpsc-workspace-editor .mpsc-fit-row,
	.mpsc-workspace-editor .mpsc-upload-row {
		margin-bottom: .55rem;
	}

	.mpsc-workspace-editor .mpsc-position-row > input[type="range"],
	.mpsc-workspace-editor .mpsc-scale-row > input[type="range"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.mpsc-touch-stepper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .4rem;
		margin-top: .3rem;
	}

	.mpsc-touch-stepper button {
		min-height: 46px;
		padding: .55rem;
		border: 1px solid #c3c4c7;
		border-radius: 7px;
		background: #fff;
		font: inherit;
		font-weight: 700;
	}

	/* Native range controls capture vertical swipe gestures on touch screens.
	 * Keep the real inputs in the form and state pipeline, but remove them from
	 * the touch hit area and expose deliberate step buttons instead. */
	.mpsc-layer-properties input[type="range"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.mpsc-layer-properties .mpsc-transform-inputs,
	.mpsc-template-arc-row {
		grid-template-columns: 1fr;
	}

	.mpsc-layer-properties .mpsc-transform-number,
	.mpsc-template-arc-number {
		min-height: 46px;
	}

	.mpsc-layer-properties .mpsc-layer-touch-stepper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .4rem;
		margin-top: .3rem;
	}

	.mpsc-layer-properties .mpsc-layer-touch-stepper button {
		min-width: 0;
		width: 100%;
	}

	.mpsc-workspace-editor .button,
	.mpsc-workspace-editor button,
	.mpsc-layer-toolbar .button,
	.mpsc-layer-actions .button {
		min-height: 44px;
		width: auto;
	}

	.mpsc-layer-toolbar,
	.mpsc-layer-actions {
		display: flex;
		flex-wrap: wrap;
	}

	.mpsc-template-card,
	.mpsc-template-card.is-selected {
		flex-basis: 118px;
		width: 118px;
		min-width: 118px;
		grid-template-rows: 78px auto;
	}

	.mpsc-template-card img {
		max-height: 78px;
	}

	.mpsc-product-details-panel:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 100002;
		width: 100%;
		max-height: none;
		padding: .75rem;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: #fff;
	}

	.mpsc-workspace-preview-slot .mpsc-preview-panel {
		z-index: 1;
	}

	.mpsc-workspace-footer .button {
		min-height: 46px;
	}

	.mpsc-workspace-footer {
		position: sticky;
		bottom: 0;
		z-index: 30;
		justify-content: flex-end;
		background: #fff;
	}
}

@media (max-width: 782px) {
	.admin-bar .mpsc-design-workspace:not([hidden]) {
		top: 46px;
	}
}

@media (max-width: 520px) {
	.mpsc-workspace-header {
		gap: .35rem;
		padding: .4rem;
	}


	.mpsc-workspace-shell {
		min-height: 100%;
	}

	.mpsc-workspace-layout {
		min-height: 0;
	}

	.mpsc-workspace-footer {
		gap: .4rem;
		padding: .4rem;
	}

	.mpsc-workspace-footer .button {
		flex: 1 1 0;
	}
}

/* Workspace follow-up correction, rc.27.
 * Desktop product context and preview stay fixed within the workspace row while
 * only the editor column scrolls. Mobile keeps one touch-scrollable shell, puts
 * optional text/image tools before reset actions, and covers the originating
 * product page completely. */
@media (min-width: 900px) {
	.mpsc-workspace-layout {
		align-items: stretch;
		overflow: hidden;
	}

	.mpsc-product-media {
		position: relative;
		top: auto;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mpsc-workspace-preview-slot {
		position: relative;
		top: auto;
		height: 100%;
		overflow: hidden;
	}

	.mpsc-workspace-editor {
		height: 100%;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.mpsc-product-details-image {
	width: min(180px, 45vw);
	margin: 0 auto .75rem;
}

@media (max-width: 899px) {
	.mpsc-design-workspace:not([hidden]),
	.admin-bar .mpsc-design-workspace:not([hidden]) {
		inset: 0 !important;
		top: 0 !important;
		height: 100dvh;
	}

	.mpsc-workspace-editor .mpsc-editor-controls {
		display: flex !important;
		flex-direction: column;
	}

	.mpsc-workspace-editor .mpsc-upload-row { order: 10; }
	.mpsc-workspace-editor .mpsc-fit-row { order: 20; }
	.mpsc-workspace-editor .mpsc-position-x-row { order: 30; }
	.mpsc-workspace-editor .mpsc-position-y-row { order: 40; }
	.mpsc-workspace-editor .mpsc-scale-row { order: 50; }
	.mpsc-workspace-editor .mpsc-advanced-layer-editor { order: 60; }
	.mpsc-workspace-editor .mpsc-editor-actions { order: 70; }
	.mpsc-workspace-editor .mpsc-quality-panel { order: 80; }
}

/* Mobile control contrast and header hierarchy correction, rc.28.
 * Keep secondary controls readable even when the parent theme uses white hover
 * text, and place the return action beneath the product identity on touch
 * layouts so the product title remains the primary header content. */
.mpsc-design-workspace .mpsc-workspace-editor .button:not(.alt):not(:disabled):hover,
.mpsc-design-workspace .mpsc-workspace-editor button:not(.alt):not(:disabled):hover,
.mpsc-design-workspace .mpsc-workspace-editor .button:not(.alt):not(:disabled):focus-visible,
.mpsc-design-workspace .mpsc-workspace-editor button:not(.alt):not(:disabled):focus-visible,
.mpsc-design-workspace .mpsc-template-carousel .button:not(:disabled):hover,
.mpsc-design-workspace .mpsc-template-carousel .button:not(:disabled):focus-visible {
	color: var(--mpsc-ui-ink) !important;
	background-color: var(--mpsc-ui-accent-soft) !important;
	border-color: var(--mpsc-ui-accent) !important;
}

@media (max-width: 899px) {
	.mpsc-workspace-header {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"identity details"
			"back back";
		row-gap: .35rem;
	}

	.mpsc-workspace-product-identity {
		grid-area: identity;
	}

	.mpsc-product-details-toggle {
		grid-area: details;
		align-self: center;
	}

	.mpsc-workspace-close {
		grid-area: back;
		justify-self: start;
		width: auto;
		min-height: 40px;
		padding: .38rem .58rem !important;
		border: 1px solid var(--mpsc-ui-accent) !important;
		background: #fff !important;
		color: var(--mpsc-ui-ink) !important;
		font-weight: 700;
	}

	.mpsc-workspace-close:not(:disabled):hover,
	.mpsc-workspace-close:not(:disabled):focus-visible {
		border-color: var(--mpsc-ui-accent) !important;
		background: var(--mpsc-ui-accent-soft) !important;
		color: var(--mpsc-ui-ink) !important;
	}
}

/* Mobile generated-editor preview visibility correction, rc.45.
 * A <details> element containing a flex child with height:0 can keep a painted
 * canvas at a customer-visible CSS size of 0 x 0. Allocate an explicit grid row
 * to the preview body and preserve the complete artwork aspect ratio. */
@media (max-width: 899px) {
	.mpsc-workspace-preview-slot .mpsc-preview-panel[open] {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.mpsc-workspace-preview-slot .mpsc-preview-wrap {
		display: flex;
		flex: none;
		height: auto;
		min-height: 0;
		max-height: none;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.mpsc-workspace-preview-slot .mpsc-preview {
		flex: 0 1 auto;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain;
	}
}

/* Keep blocked basket submissions visible after the product workspace closes. */
.mpsc-product-validation-status:not([hidden]) {
	display: block;
	margin: .65rem 0 0;
	padding: .65rem .75rem;
	border-left: 4px solid #b32d2e;
	background: #fcf0f1;
	font-weight: 600;
	line-height: 1.4;
}

.mpsc-generated-selection:not([hidden]) {
	display: grid;
	gap: 0.65rem;
	grid-column: 1 / -1;
	padding: 0.85rem;
	border: 1px solid rgba(29, 42, 68, 0.18);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.72);
}
.mpsc-generated-selection label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 600;
}
.mpsc-generated-selection input {
	margin-top: 0.2rem;
}
.mpsc-generated-selection-status {
	margin: 0;
}
@media (max-width: 782px) {
	.mpsc-generated-selection .mpsc-use-generated {
		width: 100%;
	}
}


/* Core 0.6.0-rc.50 component and preview-surface switcher.
 * The switcher changes only the browser editor surface. It does not alter the
 * Product Family component contract or the server-rendered production files. */
.mpsc-component-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: .25rem 0 .7rem;
	padding: .35rem;
	border: 1px solid color-mix(in srgb, var(--mpsc-ui-ink) 18%, transparent);
	border-radius: 0.5rem;
	background: var(--mpsc-ui-surface-muted);
}

.mpsc-component-switcher-button {
	appearance: none;
	min-height: 38px;
	padding: .5rem .75rem;
	border: 1px solid var(--mpsc-ui-border);
	border-radius: .42rem;
	background: #fff;
	color: var(--mpsc-ui-ink);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.mpsc-component-switcher-button.is-selected,
.mpsc-component-switcher-button[aria-pressed="true"] {
	border-color: var(--mpsc-ui-accent);
	background: var(--mpsc-ui-accent);
	color: var(--mpsc-ui-ink);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mpsc-ui-ink) 8%, transparent);
}

.mpsc-component-switcher-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mpsc-ui-focus) 32%, transparent);
	outline-offset: 2px;
}

.mpsc-component-editor[aria-hidden="true"],
.mpsc-workspace-preview-slot .mpsc-preview-panel[aria-hidden="true"] {
	display: none !important;
}

@media (max-width: 899px) {
	.mpsc-component-switcher {
		position: static;
		top: auto;
		z-index: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		margin: 0 0 .55rem;
		padding: .3rem;
		background: #fff;
	}

	.mpsc-component-switcher-label {
		grid-column: 1 / -1;
	}

	.mpsc-component-switcher-button {
		min-width: 0;
		min-height: 42px;
		white-space: normal;
	}
}

/* Core 0.6.0-rc.51 design readiness and hydrated surface controls. */
.mpsc-component-switcher[hidden],
.mpsc-product-approval[hidden],
.mpsc-mobile-tool-button[hidden] {
	display: none !important;
}

.mpsc-product-approval {
	margin: .75rem 0 0;
	padding: .75rem;
	border: 1px solid rgba(200, 155, 60, .55);
	border-radius: .5rem;
	background: #fffaf0;
}

.mpsc-product-approval label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-weight: 700;
}

.mpsc-product-approval input {
	margin-top: .2rem;
}

.mpsc-product-approval-status {
	margin: .35rem 0 0 1.6rem;
	font-size: .9rem;
}

/* Core 0.6.0-rc.52 mobile upload-first and complete-preview correction.
 * Empty preview space must not displace the first required action. Once usable
 * artwork exists, every product surface is fitted inside the available preview
 * body by both width and height without changing production geometry. */
@media (max-width: 899px) {
	.mpsc-personalisation[data-has-artwork="no"] .mpsc-workspace-preview-slot {
		display: none !important;
	}

	.mpsc-personalisation[data-has-artwork="no"][data-editor-structure-mode="single"] .mpsc-component-switcher {
		display: none !important;
	}

	.mpsc-workspace-editor .mpsc-upload-row {
		scroll-margin-top: calc(var(--mpsc-workspace-header-height, 64px) + .75rem);
	}

	.mpsc-workspace-preview-slot .mpsc-preview-panel[open] {
		min-width: 0;
		min-height: 0;
	}

	.mpsc-workspace-preview-slot .mpsc-preview-wrap {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		max-width: 100%;
		max-height: 100%;
		overflow: hidden;
	}

	.mpsc-workspace-preview-slot .mpsc-preview {
		display: block;
		width: 100% !important;
		height: 100% !important;
		min-width: 0;
		min-height: 0;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain;
		object-position: center center;
	}
}

/* Core 0.6.0-rc.60 mobile surface-choice placement. */
.mpsc-component-switcher-anchor[hidden] {
	display: none !important;
}

/* Core 0.6.0-rc.60 artwork assignment and editor-entry controls. */
.mpsc-artwork-assignment {
	display: grid;
	gap: .55rem;
	margin: .35rem 0 .55rem;
	padding: .65rem;
	border: 1px solid color-mix(in srgb, var(--mpsc-ui-ink) 18%, transparent);
	border-radius: 0.5rem;
	background: #fffaf0;
}

.mpsc-artwork-assignment[hidden],
.mpsc-layer-tools-launch[hidden] {
	display: none !important;
}

.mpsc-artwork-assignment-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mpsc-artwork-assignment-group legend {
	margin: 0 0 .35rem;
	padding: 0;
	font-weight: 700;
	color: var(--mpsc-ui-ink);
}

.mpsc-artwork-assignment-options {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.mpsc-artwork-assignment-options label {
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	min-width: 0;
	margin: 0;
	padding: .5rem .6rem;
	border: 1px solid var(--mpsc-ui-border);
	border-radius: .42rem;
	background: #fff;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.mpsc-artwork-assignment-options label:has(input:checked) {
	border-color: var(--mpsc-ui-accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mpsc-ui-accent) 35%, transparent);
}

.mpsc-artwork-assignment-options input {
	flex: 0 0 auto;
	margin-top: .15rem;
}

.mpsc-layer-tools-launch {
	display: block;
	width: 100%;
	margin: .55rem 0 .25rem !important;
	min-height: 44px;
	font-weight: 700 !important;
}

@media (max-width: 899px) {
	.mpsc-artwork-assignment {
		margin: 0 0 .45rem;
		padding: .55rem;
	}

	.mpsc-artwork-assignment-options {
		display: grid;
		grid-template-columns: 1fr;
	}

	.mpsc-artwork-assignment-options label {
		width: 100%;
	}
}

/* Exact production-font browser verification. */
.mpsc-layer-font-status {
	display: block;
	min-height: 1.25em;
	margin-top: .25rem;
	font-size: .82rem;
	line-height: 1.35;
	color: #475569;
}

.mpsc-personalisation[data-font-catalogue-state="error"] .mpsc-layer-font-status,
.mpsc-template-font-note[data-font-state="error"] {
	color: #9f1239;
	font-weight: 600;
}

.mpsc-template-font-note[data-font-state="ready"] {
	font-size: 1rem;
	line-height: 1.4;
}

/* Product Family-driven print coverage guidance. This presentation layer is
 * separate from the design canvas and never becomes production artwork. */
.mpsc-print-coverage-guide {
	margin: 0.75rem auto 1rem;
	padding: 0.75rem;
	max-width: 390px;
	border: 1px solid rgba(29, 42, 68, 0.18);
	border-radius: 8px;
	background: #fff;
}

.mpsc-print-coverage-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.mpsc-print-coverage-heading > span {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.mpsc-print-coverage-canvas {
	display: block;
	width: 100%;
	height: auto;
	max-width: 360px;
	margin: 0 auto;
}

.mpsc-print-coverage-guide figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin-top: 0.55rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #374151;
}

.mpsc-coverage-key {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 650;
}

.mpsc-coverage-key::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 2px;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.mpsc-coverage-key-product::before {
	background: #e5e7eb;
	border: 1px solid #374151;
}

.mpsc-coverage-key-print::before {
	background: rgba(200, 155, 60, 0.28);
	border: 2px dashed #9a6a12;
}

.mpsc-coverage-key-safe::before {
	background: transparent;
	border: 2px dashed #0f766e;
}

.mpsc-coverage-key-noprint::before {
	background: rgba(255, 255, 255, 0.94);
	border: 2px dashed #6b7280;
}

.mpsc-print-coverage-guide[data-safe-area-state="not-defined"] .mpsc-coverage-key-safe {
	color: #6b7280;
}

.mpsc-print-coverage-guide[data-safe-area-state="not-defined"] .mpsc-coverage-key-safe::before {
	border-color: #9ca3af;
}

.mpsc-print-coverage-size,
.mpsc-print-coverage-sheet,
.mpsc-print-coverage-note {
	flex-basis: 100%;
	color: #4b5563;
}

.mpsc-print-coverage-size,
.mpsc-print-coverage-sheet {
	font-weight: 650;
}

@media (max-width: 700px) {
	.mpsc-print-coverage-guide {
		margin: 0.5rem 0 0.75rem;
		padding: 0.6rem;
		max-width: none;
	}

	.mpsc-print-coverage-heading {
		margin-bottom: 0.35rem;
	}

	.mpsc-print-coverage-guide figcaption {
		font-size: 0.78rem;
	}
}

/* Circular browser-only component preview for Product Families whose physical
 * face differs from the rectangular editor coordinate system. The canvas data
 * and production geometry remain rectangular; only the customer-visible
 * component preview is clipped to the approved face. */
.mpsc-preview-panel[data-product-preview-shape="ellipse"] .mpsc-preview {
	border-radius: 50%;
	clip-path: circle(50% at 50% 50%);
}

@media (max-width: 899px) {
	.mpsc-workspace-preview-slot .mpsc-preview-panel[data-product-preview-shape="ellipse"] .mpsc-preview {
		width: auto !important;
		height: 100% !important;
		aspect-ratio: 1 / 1;
	}
}

/* Core 0.6.0-rc.90 restricted-editor UX closure.
 * Keep the browser-only editor concise, keyboard-visible and touch-safe without
 * altering Product Family, manifest, cart-gating or production contracts. */
.mpsc-font-select-shell {
	position: relative;
	display: block;
	width: 100%;
}

.mpsc-font-selected-preview {
	position: absolute;
	inset: 1px 2.5rem 1px 1px;
	z-index: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 .65rem;
	overflow: hidden;
	color: var(--mpsc-ui-ink);
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
}

.mpsc-font-select-shell .mpsc-layer-font {
	position: relative;
	z-index: 2;
	width: 100%;
	background-color: transparent;
}

.mpsc-font-select-shell.is-font-ready .mpsc-font-selected-preview {
	opacity: 1;
}

.mpsc-font-select-shell.is-font-ready .mpsc-layer-font {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.mpsc-font-select-shell.is-font-ready .mpsc-layer-font option {
	color: var(--mpsc-ui-ink) !important;
	-webkit-text-fill-color: var(--mpsc-ui-ink);
	background: #fff;
}

.mpsc-icon-button {
	display: inline-grid !important;
	place-items: center;
	width: 42px !important;
	min-width: 42px !important;
	height: 42px;
	min-height: 42px !important;
	padding: 0 !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.mpsc-icon-button > span[aria-hidden="true"] {
	display: block;
	line-height: 1;
}

.mpsc-icon-button-danger {
	border-color: #b32d2e !important;
	color: #b32d2e !important;
	background: #fff !important;
}

.mpsc-icon-button-danger:not(:disabled):hover,
.mpsc-icon-button-danger:not(:disabled):focus-visible {
	border-color: #8a2424 !important;
	color: #fff !important;
	background: #b32d2e !important;
}

.mpsc-personalisation :where(button, [href], input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--mpsc-ui-ink) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

.mpsc-save-to-product,
.mpsc-personalised-cart-form .single_add_to_cart_button {
	min-height: 48px !important;
	border: 1px solid var(--mpsc-ui-accent-dark) !important;
	background: var(--mpsc-ui-accent) !important;
	color: var(--mpsc-ui-ink) !important;
	font-weight: 800 !important;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--mpsc-ui-ink) 14%, transparent);
}

.mpsc-save-to-product:not(:disabled):hover,
.mpsc-personalised-cart-form .single_add_to_cart_button:not(:disabled):hover,
.mpsc-save-to-product:not(:disabled):focus-visible,
.mpsc-personalised-cart-form .single_add_to_cart_button:not(:disabled):focus-visible {
	border-color: var(--mpsc-ui-accent-dark) !important;
	background: var(--mpsc-ui-accent) !important;
	color: var(--mpsc-ui-ink) !important;
}

.mpsc-save-to-product:disabled,
.mpsc-personalised-cart-form .single_add_to_cart_button:disabled {
	border-color: #6b7280 !important;
	background: #6b7280 !important;
	color: #fff !important;
	box-shadow: none;
	cursor: not-allowed;
}

@media (max-width: 899px) {
	.mpsc-icon-button {
		width: 46px !important;
		min-width: 46px !important;
		height: 46px;
		min-height: 46px !important;
	}
}

/* My Artwork compatibility handoff. The panel remains visible until an exact
 * product option and design slot have been assessed. */
.mpsc-returned-artwork:not([hidden]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .75rem 1rem;
	align-items: end;
	margin: .75rem 0 0;
	padding: .8rem;
	border: 1px solid #d6d1c6;
	border-left-width: 4px;
	border-radius: 7px;
	background: #faf9f6;
}

.mpsc-returned-artwork[data-state="server_check"],
.mpsc-returned-artwork[data-state="checking"] {
	border-left-color: #6b7280;
}

.mpsc-returned-artwork[data-state="good_fit"] {
	border-left-color: #237a3b;
	background: #f1f8f3;
}

.mpsc-returned-artwork[data-state="crop_required"] {
	border-left-color: #b36b00;
	background: #fff8e8;
}

.mpsc-returned-artwork[data-state="not_suitable"],
.mpsc-returned-artwork[data-state="error"] {
	border-left-color: #b32d2e;
	background: #fcf0f1;
}

.mpsc-returned-artwork-copy {
	display: grid;
	gap: .15rem;
	min-width: 0;
}

.mpsc-returned-artwork-label {
	font-weight: 700;
}

.mpsc-returned-artwork-status {
	margin: 0;
	font-size: .88rem;
	line-height: 1.4;
}

.mpsc-returned-artwork-slot {
	display: grid;
	gap: .25rem;
	grid-column: 1 / -1;
	max-width: 28rem;
	font-weight: 600;
}

.mpsc-returned-artwork-slot[hidden] {
	display: none !important;
}

.mpsc-returned-artwork-slot select {
	width: 100%;
	min-height: 42px;
}

.mpsc-returned-artwork-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	justify-content: flex-end;
}

.mpsc-returned-artwork-use,
.mpsc-returned-artwork-clear {
	float: none !important;
	min-width: 10rem;
	margin: 0 !important;
}

@media (max-width: 782px) {
	.mpsc-returned-artwork:not([hidden]) {
		grid-template-columns: minmax(0, 1fr);
	}
	.mpsc-returned-artwork-actions {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.mpsc-returned-artwork-use,
	.mpsc-returned-artwork-clear {
		width: 100%;
	}
}


/* Neutral editor controls. Workspace geometry is owned by the single
 * Section 3 mobile model below; this block must not redefine scrolling. */
.mpsc-control-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 44px;
	border-radius: 7px !important;
	line-height: 1.2;
}

.mpsc-control-icon {
	display: block;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	object-fit: contain;
}

.mpsc-control-icon-fallback {
	display: inline;
	font-weight: 700;
}

.mpsc-control-icon-fallback + span {
	display: none;
}

.mpsc-layer-toolbar .mpsc-control-button,
.mpsc-layer-actions .mpsc-control-button {
	flex: 1 1 7.5rem;
}

.mpsc-layer-tools-launch.mpsc-control-button {
	width: 100%;
}

.mpsc-advanced-layer-editor,
.mpsc-layer-properties,
.mpsc-layer-toolbar,
.mpsc-layer-actions,
.mpsc-mobile-tool-tabs,
.mpsc-workspace-shell,
.mpsc-product-details-panel,
.mpsc-print-coverage-guide {
	border-radius: 8px;
}

/* UX Section 3: one mobile workspace model.
 * The header, preview and save action are stable rows. Only the dedicated
 * personalisation-controls region scrolls. This removes the conflicting
 * whole-workspace, layout-scroll and static-preview contracts that caused the
 * preview to leave the viewport on the real staging page. */
.mpsc-product-details-label-short {
	display: none;
}

.mpsc-control-icon-wrap {
	display: inline-grid;
	grid-template-areas: "icon";
	place-items: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

.mpsc-control-icon-wrap .mpsc-control-icon {
	grid-area: icon;
	margin: 0;
	transition: opacity 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.mpsc-control-icon-wrap .mpsc-control-icon,
	.mpsc-control-raster-icon {
		transition: none !important;
		animation: none !important;
	}
}

.mpsc-control-icon--active {
	opacity: 0;
}

.mpsc-icon-button:not(:disabled):hover .mpsc-control-icon--default,
.mpsc-icon-button:not(:disabled):focus-visible .mpsc-control-icon--default,
.mpsc-icon-button:not(:disabled):active .mpsc-control-icon--default,
.mpsc-icon-button.is-selected .mpsc-control-icon--default,
.mpsc-icon-button[aria-pressed="true"] .mpsc-control-icon--default,
.mpsc-control-button:not(:disabled):hover .mpsc-control-icon--default,
.mpsc-control-button:not(:disabled):focus-visible .mpsc-control-icon--default,
.mpsc-control-button:not(:disabled):active .mpsc-control-icon--default,
.mpsc-control-button.is-selected .mpsc-control-icon--default,
.mpsc-control-button[aria-pressed="true"] .mpsc-control-icon--default {
	opacity: 0;
}

.mpsc-icon-button:not(:disabled):hover .mpsc-control-icon--active,
.mpsc-icon-button:not(:disabled):focus-visible .mpsc-control-icon--active,
.mpsc-icon-button:not(:disabled):active .mpsc-control-icon--active,
.mpsc-icon-button.is-selected .mpsc-control-icon--active,
.mpsc-icon-button[aria-pressed="true"] .mpsc-control-icon--active,
.mpsc-control-button:not(:disabled):hover .mpsc-control-icon--active,
.mpsc-control-button:not(:disabled):focus-visible .mpsc-control-icon--active,
.mpsc-control-button:not(:disabled):active .mpsc-control-icon--active,
.mpsc-control-button.is-selected .mpsc-control-icon--active,
.mpsc-control-button[aria-pressed="true"] .mpsc-control-icon--active {
	opacity: 1;
}

.mpsc-layer-summary {
	justify-content: flex-start;
	margin: -.15rem 0 .45rem;
	padding: .3rem 0;
	border: 0;
	background: transparent;
	font-size: .9rem;
}

@media (max-width: 899px) {
	.mpsc-design-workspace:not([hidden]),
	.admin-bar .mpsc-design-workspace:not([hidden]) {
		position: fixed;
		inset: 0 !important;
		top: 0 !important;
		display: block;
		height: 100dvh;
		min-height: 0;
		padding: 0;
		overflow: hidden;
		overscroll-behavior: none;
		background: #fff;
	}

	.mpsc-workspace-shell {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		height: 100%;
		min-height: 0;
		overflow: hidden;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.mpsc-workspace-header {
		position: relative;
		top: auto;
		z-index: 30;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "back identity details";
		gap: .35rem;
		min-height: 48px;
		padding: .3rem .4rem;
		background: #fff;
	}

	.mpsc-workspace-close {
		grid-area: back;
		justify-self: start;
		min-height: 36px;
		padding: .25rem .35rem !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		font-size: .78rem;
		line-height: 1;
	}

	.mpsc-workspace-close > span[aria-hidden="true"] {
		font-size: 1.2rem;
		line-height: 1;
	}

	.mpsc-workspace-product-identity {
		grid-area: identity;
		gap: 0;
		min-width: 0;
	}

	.mpsc-workspace-product-thumb,
	.mpsc-workspace-product-meta {
		display: none !important;
	}

	.mpsc-workspace-product-name {
		display: block;
		font-size: .94rem;
		line-height: 1.18;
	}

	.mpsc-product-details-toggle {
		grid-area: details;
		align-self: center;
		min-height: 36px;
		padding: .28rem .48rem !important;
		font-size: .76rem !important;
		line-height: 1 !important;
	}

	.mpsc-product-details-label-full {
		display: none;
	}

	.mpsc-product-details-label-short {
		display: inline;
	}

	.mpsc-workspace-layout {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
		height: 100%;
		min-height: 0;
		overflow: hidden;
		overscroll-behavior: none;
	}

	.mpsc-workspace-preview-slot {
		position: sticky !important;
		top: 0 !important;
		z-index: 20;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 100%;
		height: clamp(175px, 27dvh, 230px);
		min-height: 175px;
		max-height: 230px;
		padding: .25rem .4rem;
		overflow: hidden;
		border-bottom: 1px solid #eeeae3;
		background: #fff;
		box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
	}

	.mpsc-personalisation[data-has-artwork="no"] .mpsc-workspace-preview-slot {
		display: none !important;
	}

	.mpsc-workspace-preview-slot .mpsc-preview-panel,
	.mpsc-workspace-preview-slot .mpsc-preview-panel[open] {
		position: static !important;
		inset: auto !important;
		display: grid;
		grid-template-rows: minmax(0, 1fr);
		height: 100%;
		min-height: 0;
		max-height: 100%;
		margin: 0;
		overflow: hidden;
		box-shadow: none;
	}

	.mpsc-workspace-preview-slot .mpsc-preview-panel > summary {
		display: none;
	}

	.mpsc-workspace-preview-slot .mpsc-preview-wrap {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		max-width: 100%;
		max-height: 100%;
		padding: .15rem;
		overflow: hidden;
	}

	.mpsc-workspace-preview-slot .mpsc-preview {
		display: block;
		width: 100% !important;
		height: 100% !important;
		min-width: 0;
		min-height: 0;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain;
		object-position: center center;
	}

	.mpsc-workspace-scroll-region {
		display: block;
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 0;
		height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
		scrollbar-gutter: stable;
	}

	.mpsc-workspace-scroll-region:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	.mpsc-product-media {
		position: relative;
		top: auto;
		z-index: auto;
	}

	.mpsc-workspace-editor {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 0;
		padding: .5rem .5rem .9rem;
		overflow: visible;
		touch-action: pan-y;
	}

	.mpsc-workspace-editor .mpsc-editor-grid,
	.mpsc-workspace-editor .mpsc-editor-controls {
		display: block !important;
		min-width: 0;
	}

	.mpsc-workspace-editor .mpsc-preview-panel {
		display: none !important;
	}

	.mpsc-workspace-editor .mpsc-advanced-layer-editor,
	.mpsc-workspace-editor .mpsc-layer-properties {
		max-height: none;
		overflow: visible;
	}

	.mpsc-workspace-footer {
		position: relative;
		bottom: auto;
		z-index: 30;
		flex: 0 0 auto;
		justify-content: flex-end;
		background: #fff;
	}

	.mpsc-control-button,
	.mpsc-touch-stepper button,
	.mpsc-layer-touch-stepper button {
		min-height: 46px;
		border-radius: 7px !important;
	}

	.mpsc-layer-summary {
		align-items: flex-start;
		flex-direction: row;
		gap: .35rem;
		margin: 0 0 .35rem;
		padding: .25rem 0;
	}
}

@media (max-width: 420px) {
	.mpsc-workspace-header {
		min-height: 46px;
		padding: .25rem .35rem;
	}

	.mpsc-workspace-close-label {
		display: none;
	}

	.mpsc-workspace-preview-slot {
		height: clamp(165px, 25dvh, 205px);
		min-height: 165px;
		max-height: 205px;
	}
}

/* Root-cause cure: persistent text labels and always-visible add-layer actions. */
.mpsc-advanced-layer-editor > .mpsc-layer-summary {
	display: flex;
	align-items: center;
	margin: 0 0 .45rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: default;
}

.mpsc-layer-toolbar,
.mpsc-layer-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
}

.mpsc-layer-toolbar .mpsc-control-button,
.mpsc-layer-actions .mpsc-control-button,
.mpsc-editor-actions .mpsc-control-button {
	width: 100%;
	min-width: 0;
	justify-content: flex-start;
	padding: .58rem .7rem;
	white-space: normal;
	text-align: left;
}

.mpsc-layer-action-button > span:last-child,
.mpsc-editor-action-button > span:last-child,
.mpsc-layer-toolbar .mpsc-control-button > span:last-child {
	display: inline !important;
	min-width: 0;
	font-weight: 700;
}

.mpsc-layer-management[open] > .mpsc-layer-actions {
	margin-top: .55rem;
}

@media (max-width: 420px) {
	.mpsc-layer-toolbar,
	.mpsc-layer-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* UX Section 3 revision: top-aligned desktop editor and compact responsive
 * mobile controls. This changes layout only. Existing inputs, actions, state
 * identifiers and save behaviour remain unchanged. */
@media (min-width: 900px) {
	.mpsc-product-media,
	.mpsc-workspace-preview-slot,
	.mpsc-workspace-editor {
		grid-row: 1;
	}

	.mpsc-workspace-editor {
		align-self: stretch;
		justify-self: stretch;
	}

	.mpsc-workspace-editor > :first-child {
		margin-top: 0;
	}
}

@media (max-width: 899px) {
	.mpsc-workspace-editor .mpsc-editor-controls {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem;
		align-items: start;
	}

	.mpsc-workspace-editor .mpsc-upload-row,
	.mpsc-workspace-editor .mpsc-print-coverage-guide,
	.mpsc-workspace-editor .mpsc-fit-row,
	.mpsc-workspace-editor .mpsc-scale-row,
	.mpsc-workspace-editor .mpsc-layer-tools-launch,
	.mpsc-workspace-editor .mpsc-advanced-layer-editor,
	.mpsc-workspace-editor .mpsc-editor-actions,
	.mpsc-workspace-editor .mpsc-quality-panel,
	.mpsc-workspace-editor .mpsc-generated-selection {
		grid-column: 1 / -1;
	}

	.mpsc-workspace-editor .mpsc-position-row {
		grid-column: auto;
		min-width: 0;
		margin: 0;
	}

	.mpsc-workspace-editor .mpsc-position-row > label,
	.mpsc-workspace-editor .mpsc-scale-row > label {
		min-width: 0;
	}

	.mpsc-editor-actions,
	.mpsc-layer-toolbar,
	.mpsc-layer-actions,
	.mpsc-layer-geometry-grid,
	.mpsc-layer-crop-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
	}

	.mpsc-editor-actions .mpsc-guide-toggle,
	.mpsc-editor-actions .mpsc-remove-component {
		grid-column: 1 / -1;
	}

	.mpsc-editor-actions .mpsc-control-button,
	.mpsc-layer-toolbar .mpsc-control-button,
	.mpsc-layer-actions .mpsc-control-button {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 339px) {
	.mpsc-workspace-editor .mpsc-editor-controls,
	.mpsc-editor-actions,
	.mpsc-layer-toolbar,
	.mpsc-layer-actions,
	.mpsc-layer-geometry-grid,
	.mpsc-layer-crop-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* UX Section 4: primary add-layer actions remain visible and compact.
 * Layer limits continue to come from the Product Family policy. The numerical
 * capacity status is assistive-only; customers see one short instruction and
 * two persistent labelled actions. */
.mpsc-advanced-layer-editor:not([hidden]) > .mpsc-layer-summary {
	display: block;
	margin: 0 0 .4rem;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.35;
}

.mpsc-advanced-layer-editor:not([hidden]) > .mpsc-layer-toolbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin: 0 0 .45rem;
}

.mpsc-layer-toolbar .mpsc-control-button:disabled {
	display: inline-flex;
	opacity: .58;
	cursor: not-allowed;
}

@media (max-width: 339px) {
	.mpsc-advanced-layer-editor:not([hidden]) > .mpsc-layer-toolbar {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mpsc-workspace-editor .mpsc-layer-toolbar .mpsc-control-button {
	min-height: 46px;
}

/* Consolidated mobile layer-entry containment. */
.mpsc-layer-tools-launch,
.mpsc-advanced-layer-editor {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.mpsc-advanced-layer-editor > .mpsc-layer-summary {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* UX Section 5: clear labelled layer and item actions.
 * One raster-painted icon node prevents duplicate default/active imagery.
 * Core remains brand-neutral; the active palette is supplied through the
 * existing editor variables and the Made Lore Experience layer. */
.mpsc-control-raster-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background-image: var(--mpsc-raster-icon-default, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	line-height: 0;
}

.mpsc-control-button:not(:disabled):hover .mpsc-control-raster-icon,
.mpsc-control-button:not(:disabled):focus-visible .mpsc-control-raster-icon,
.mpsc-control-button:not(:disabled):active .mpsc-control-raster-icon,
.mpsc-control-button.is-selected .mpsc-control-raster-icon,
.mpsc-control-button[aria-pressed="true"] .mpsc-control-raster-icon {
	background-image: var(--mpsc-raster-icon-active, var(--mpsc-raster-icon-default, none));
}

.mpsc-layer-management .mpsc-layer-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
}

.mpsc-layer-actions .mpsc-layer-action-button {
	display: grid !important;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	justify-content: stretch;
	gap: .55rem;
	min-height: 48px;
	width: 100%;
	min-width: 0;
	padding: .58rem .68rem;
	border: 1px solid var(--mpsc-ui-border);
	background: var(--mpsc-ui-surface);
	color: var(--mpsc-ui-ink);
	text-align: left;
	white-space: normal;
}

.mpsc-layer-actions .mpsc-layer-action-button .mpsc-control-label {
	display: block !important;
	min-width: 0;
	font-weight: 700;
	line-height: 1.2;
}

.mpsc-layer-actions .mpsc-layer-action-button:disabled {
	display: grid !important;
	opacity: .5;
	cursor: not-allowed;
}

@media (max-width: 339px) {
	.mpsc-layer-management .mpsc-layer-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The WooCommerce button reset uses a stronger minimum-height rule. Keep the
 * Section 5 action targets at a reliable touch size inside the real workspace. */
.mpsc-workspace-editor .mpsc-layer-actions .mpsc-layer-action-button {
	min-height: 48px !important;
	box-sizing: border-box;
}

/* UX Section 6: touch-safe image and layer adjustments.
 * Mobile keeps the real range inputs in the form/state pipeline but removes
 * their pointer hit area. Deliberate step buttons remain scroll-friendly and
 * use the compact two-column layout established in Section 3. */
@media (max-width: 899px) {
	.mpsc-workspace-editor .mpsc-position-row > input[type="range"],
	.mpsc-workspace-editor .mpsc-scale-row > input[type="range"],
	.mpsc-layer-properties input[type="range"] {
		pointer-events: none;
		opacity: 0;
	}

	.mpsc-touch-stepper {
		align-items: stretch;
	}

	.mpsc-touch-stepper button {
		min-width: 0;
		width: 100%;
		min-height: 46px;
		font-size: .84rem;
		line-height: 1.2;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
		touch-action: pan-y;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	.mpsc-touch-stepper button:focus-visible {
		outline: 3px solid currentColor;
		outline-offset: 2px;
	}
}


/* UX Section 7: clear product context, return navigation and save state.
 * The header uses one authoritative row at every viewport. The footer explains
 * why Save is unavailable without increasing the editor's scrolling surface. */
.mpsc-workspace-header {
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "back identity details";
	gap: .65rem;
	align-items: center;
	min-width: 0;
	padding: .55rem .7rem;
}

.mpsc-workspace-close,
.mpsc-product-details-toggle,
.mpsc-save-to-product {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	box-sizing: border-box;
	min-width: 0;
}

.mpsc-workspace-close {
	grid-area: back;
	justify-self: start;
	min-height: 42px;
	padding: .42rem .62rem !important;
	border: 1px solid var(--mpsc-ui-border) !important;
	background: var(--mpsc-ui-surface) !important;
	color: var(--mpsc-ui-ink) !important;
	font-weight: 700;
}

.mpsc-workspace-product-identity {
	grid-area: identity;
	min-width: 0;
}

.mpsc-product-details-toggle {
	grid-area: details;
	justify-self: end;
	min-height: 42px;
	padding: .42rem .62rem !important;
	border: 1px solid var(--mpsc-ui-border) !important;
	background: var(--mpsc-ui-surface) !important;
	color: var(--mpsc-ui-ink) !important;
	font-weight: 700;
}

.mpsc-workspace-close .mpsc-control-raster-icon,
.mpsc-product-details-toggle .mpsc-control-raster-icon,
.mpsc-save-to-product .mpsc-control-raster-icon {
	width: 20px;
	height: 20px;
	flex-basis: 20px;
}

.mpsc-workspace-close:not(:disabled):hover,
.mpsc-workspace-close:not(:disabled):focus-visible,
.mpsc-product-details-toggle:not(:disabled):hover,
.mpsc-product-details-toggle:not(:disabled):focus-visible,
.mpsc-save-to-product:not(:disabled):hover,
.mpsc-save-to-product:not(:disabled):focus-visible {
	border-color: var(--mpsc-ui-ink) !important;
	background: var(--mpsc-ui-ink) !important;
	color: #fff !important;
}

.mpsc-workspace-close:not(:disabled):hover .mpsc-control-raster-icon,
.mpsc-workspace-close:not(:disabled):focus-visible .mpsc-control-raster-icon,
.mpsc-product-details-toggle:not(:disabled):hover .mpsc-control-raster-icon,
.mpsc-product-details-toggle:not(:disabled):focus-visible .mpsc-control-raster-icon,
.mpsc-save-to-product:not(:disabled):hover .mpsc-control-raster-icon,
.mpsc-save-to-product:not(:disabled):focus-visible .mpsc-control-raster-icon,
.mpsc-save-to-product:disabled .mpsc-control-raster-icon {
	background-image: var(--mpsc-raster-icon-active, var(--mpsc-raster-icon-default, none));
}

.mpsc-workspace-close-label,
.mpsc-product-details-label-full,
.mpsc-product-details-label-short,
.mpsc-save-to-product-label {
	line-height: 1.15;
	white-space: nowrap;
}

.mpsc-workspace-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem;
	min-width: 0;
	padding: .5rem .7rem;
}

.mpsc-save-status {
	min-width: 0;
	margin: 0;
	color: #4b5563;
	font-size: .8rem;
	line-height: 1.25;
}

.mpsc-workspace-footer[data-save-state="ready"] .mpsc-save-status {
	color: var(--mpsc-ui-ink);
	font-weight: 700;
}

.mpsc-save-to-product {
	justify-self: end;
	min-width: 154px;
	padding-inline: .85rem !important;
}

@media (max-width: 899px) {
	.mpsc-workspace-header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "back identity details";
		row-gap: 0;
		gap: .35rem;
		min-height: 50px;
		padding: .3rem .4rem;
	}

	.mpsc-workspace-close,
	.mpsc-product-details-toggle {
		width: auto;
		min-height: 40px;
		padding: .32rem .42rem !important;
		font-size: .76rem !important;
	}

	.mpsc-workspace-close-label {
		display: inline !important;
	}

	.mpsc-workspace-product-identity {
		justify-content: center;
		text-align: center;
	}

	.mpsc-workspace-product-name {
		font-size: .88rem;
		line-height: 1.15;
	}

	.mpsc-workspace-footer {
		position: relative;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .45rem;
		min-height: 56px;
		padding: .35rem .5rem;
	}

	.mpsc-save-status {
		font-size: .72rem;
		line-height: 1.2;
	}

	.mpsc-save-to-product {
		min-width: 148px;
		min-height: 48px !important;
		padding: .45rem .65rem !important;
		font-size: .82rem !important;
	}
}

@media (max-width: 339px) {
	.mpsc-workspace-header {
		gap: .2rem;
		padding-inline: .25rem;
	}

	.mpsc-workspace-close,
	.mpsc-product-details-toggle {
		gap: .25rem;
		padding-inline: .3rem !important;
	}

	.mpsc-workspace-close .mpsc-control-raster-icon,
	.mpsc-product-details-toggle .mpsc-control-raster-icon {
		width: 18px;
		height: 18px;
		flex-basis: 18px;
	}

	.mpsc-workspace-product-name {
		font-size: .8rem;
	}

	.mpsc-workspace-footer {
		grid-template-columns: minmax(0, 1fr);
		gap: .25rem;
		padding: .3rem .4rem;
	}

	.mpsc-save-status {
		text-align: center;
	}

	.mpsc-save-to-product {
		justify-self: stretch;
		width: 100%;
	}
}

/* UX Section 10 final audit: keep the persistent editor actions at the same
 * minimum touch size as the image-adjustment and layer controls. */
@media (max-width: 899px) {
	.mpsc-workspace-editor .mpsc-editor-actions .mpsc-control-button {
		min-height: 46px;
		box-sizing: border-box;
	}
}

.mpsc-workspace-editor .mpsc-editor-actions .mpsc-control-button {
	min-height: 46px;
	box-sizing: border-box;
}


/* rc.142 editor clarity: the task tabs describe the customer action, normal
 * prose wraps only at sensible word boundaries, and added-image proportions
 * can be locked without adding anything to the saved production contract. */
.mpsc-mobile-tool-button {
	min-width: 0;
	white-space: normal;
	line-height: 1.2;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.mpsc-layer-aspect-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	align-items: center;
	gap: .55rem;
	min-width: 0;
	max-width: 100%;
	padding: .15rem 0 .35rem;
}

.mpsc-layer-aspect-row[hidden] {
	display: none !important;
}

.mpsc-layer-aspect-toggle {
	min-height: 44px;
	margin: 0 !important;
	white-space: normal;
}

.mpsc-layer-aspect-toggle[aria-pressed="true"] {
	font-weight: 700;
}

.mpsc-layer-aspect-status {
	min-width: 0;
	margin: 0;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 899px) {
	.mpsc-mobile-tool-button {
		font-size: clamp(.82rem, 3.65vw, .95rem);
	}

	.mpsc-layer-aspect-row {
		grid-template-columns: minmax(0, 1fr);
		gap: .3rem;
	}

	.mpsc-layer-aspect-toggle {
		width: 100% !important;
	}
}

/* rc.143 mobile editor compaction: keep touch targets clear without presenting
 * desktop-style geometry controls as a long phone form. Saved layer geometry,
 * range inputs and production contracts remain unchanged. */
@media (max-width: 899px) {
	.mpsc-layer-geometry-grid::before {
		content: "Position";
		grid-column: 1 / -1;
		font-weight: 700;
		line-height: 1.2;
		color: var(--mpsc-ui-ink);
	}

	.mpsc-layer-position-row {
		grid-column: 1 / -1;
		margin: 0;
	}

	.mpsc-layer-position-row > span:first-child,
	.mpsc-layer-position-row > input[type="range"] {
		display: none !important;
	}

	.mpsc-layer-position-row .mpsc-layer-touch-stepper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
	}

	.mpsc-layer-aspect-row {
		grid-template-columns: minmax(118px, .72fr) minmax(0, 1.28fr);
		align-items: center;
		gap: .45rem;
		padding: .2rem 0;
	}

	.mpsc-layer-aspect-toggle {
		width: auto !important;
		min-height: 44px;
		padding: .42rem .58rem !important;
		font-size: .8rem !important;
	}

	.mpsc-layer-aspect-status {
		font-size: .76rem;
		line-height: 1.25;
	}

	.mpsc-layer-properties.is-aspect-locked .mpsc-layer-width-row {
		grid-column: 1 / -1;
		margin: 0;
	}

	.mpsc-layer-properties.is-aspect-locked .mpsc-layer-width-value {
		display: none;
	}

	.mpsc-layer-width-row > input[type="range"],
	.mpsc-layer-height-row > input[type="range"],
	.mpsc-layer-rotation-label .mpsc-layer-rotation,
	.mpsc-layer-rotation-label .mpsc-layer-rotation-number {
		display: none !important;
	}

	.mpsc-layer-width-row .mpsc-layer-touch-stepper,
	.mpsc-layer-height-row .mpsc-layer-touch-stepper,
	.mpsc-layer-rotation-label .mpsc-layer-touch-stepper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
	}

	.mpsc-layer-rotation-label {
		grid-column: 1 / -1;
		margin: 0;
	}

	.mpsc-layer-rotation-label .mpsc-transform-inputs {
		display: none !important;
	}
}

@media (max-width: 389px) {
	.mpsc-layer-aspect-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-layer-aspect-toggle {
		justify-self: stretch;
		width: 100% !important;
	}
}

/* rc.144 desktop rotation containment: Rotation occupies its own geometry row
 * so its range, numeric input and step controls cannot overflow a narrow
 * desktop editor panel. Mobile already uses a full-width Rotation row. */
.mpsc-layer-rotation-label {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 100%;
}

.mpsc-layer-rotation-label .mpsc-transform-inputs,
.mpsc-layer-rotation-label .mpsc-layer-touch-stepper {
	min-width: 0;
	max-width: 100%;
}

.mpsc-layer-rotation-label .mpsc-transform-number {
	min-width: 0;
}


/* rc.145 added-text colour picker: preserve the existing colour_hex layer contract
 * while exposing the creative editor's explicitly permitted free colour choice. */
.mpsc-layer-colour-picker {
	display: grid;
	grid-template-columns: minmax(3rem, 4rem) minmax(0, 1fr);
	align-items: center;
	gap: 0.65rem;
	margin-top: 0.3rem;
}
.mpsc-layer-colour-picker input[type="color"] {
	width: 100%;
	min-width: 3rem;
	height: 2.75rem;
	padding: 0.2rem;
	border-radius: 6px;
	cursor: pointer;
}
.mpsc-layer-colour-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* rc.164 Scope Item 2 acceptance correction: one product-page Personalise entry
 * and a compact Artwork -> Design workspace with Save to product in Design.
 * Internal route contracts, editor state and production geometry remain unchanged. */
.mpsc-personalise-entry {
	margin: .7rem 0 0;
}

.mpsc-personalise-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-personalise-entry-status {
	margin: 0 0 .55rem;
	font-size: .82rem;
	line-height: 1.3;
	color: #4b5563;
}

.mpsc-personalisation[data-design-saved="yes"] .mpsc-personalise-entry {
	display: none !important;
}

.mpsc-workspace-shell {
	grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.mpsc-workspace-steps {
	position: relative;
	z-index: 24;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	min-width: 0;
	border-bottom: 1px solid var(--mpsc-ui-border, #d6d1c6);
	background: var(--mpsc-ui-surface, #fff);
}

.mpsc-workspace-step {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-width: 0;
	min-height: 46px;
	margin: 0;
	padding: .45rem .65rem;
	border: 0;
	border-right: 1px solid var(--mpsc-ui-border, #d6d1c6);
	border-radius: 0;
	background: transparent;
	color: #5f6368;
	font: inherit;
	font-size: .86rem;
	font-weight: 700;
	line-height: 1.15;
	cursor: pointer;
}

.mpsc-workspace-step:last-child {
	border-right: 0;
}

.mpsc-workspace-step-number {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: .74rem;
	line-height: 1;
}

.mpsc-workspace-step[aria-current="step"] {
	background: #f5f6f6;
	color: var(--mpsc-ui-ink, #0f172a);
}

.mpsc-workspace-step[aria-current="step"] .mpsc-workspace-step-number {
	background: var(--mpsc-ui-ink, #0f172a);
	color: #fff;
}

.mpsc-workspace-step:disabled {
	opacity: .42;
	cursor: not-allowed;
}

.mpsc-workspace-step:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.mpsc-workspace-step-panel[hidden] {
	display: none !important;
}

.mpsc-workspace-artwork-step .mpsc-customer-routes {
	max-width: 860px;
	margin: 0 auto;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card {
	min-height: 104px;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card p {
	margin-bottom: 0;
}

.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-preview-slot {
	display: none !important;
}

@media (min-width: 900px) {
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-editor {
		grid-column: 2 / 4;
	}
}

.mpsc-workspace-footer-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .45rem;
	min-width: 0;
}

.mpsc-workspace-footer-actions .button {
	min-width: 0;
	min-height: 44px;
	white-space: nowrap;
}

.mpsc-workspace-back[hidden],
.mpsc-workspace-next[hidden],
.mpsc-save-to-product[hidden] {
	display: none !important;
}

@media (max-width: 899px) {
	.mpsc-workspace-shell {
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}

	.mpsc-workspace-step {
		min-height: 44px;
		gap: .32rem;
		padding: .35rem .3rem;
		font-size: .78rem;
	}

	.mpsc-workspace-step-number {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
		font-size: .7rem;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-product-media {
		display: none !important;
	}

	.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: .45rem;
	}

	.mpsc-workspace-artwork-step .mpsc-customer-route-card {
		min-height: 0;
	}

	.mpsc-workspace-footer-actions .button {
		min-height: 48px !important;
		padding: .45rem .65rem !important;
		font-size: .82rem !important;
	}
}

@media (max-width: 420px) {
	.mpsc-workspace-footer {
		grid-template-columns: minmax(0, 1fr);
		gap: .3rem;
	}

	.mpsc-save-status {
		text-align: center;
	}

	.mpsc-workspace-footer-actions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		width: 100%;
	}

	.mpsc-workspace-footer-actions .button {
		width: 100%;
		white-space: normal;
	}
}

/* rc.166: completed Artwork is progress information, not a competing action. */
.mpsc-workspace-step.is-complete {
	opacity: 1;
	cursor: default;
	color: var(--mpsc-ui-ink, #0f172a);
	background: #f5f6f6;
}
.mpsc-workspace-step.is-complete .mpsc-workspace-step-number { font-size: 0; }
.mpsc-workspace-step.is-complete .mpsc-workspace-step-number::before { content: '✓'; font-size: .78rem; }
.single_add_to_cart_button.mpsc-is-submitting { pointer-events: none; opacity: .72; cursor: progress; }

/* rc.170 Scope Item 3 acceptance correction: load My Artwork when Artwork opens,
 * use compact metadata cards with an in-workspace preview, and keep product
 * identity in a dedicated non-overlapping row above the step banner. */
.mpsc-workspace-shell {
	grid-template-rows: minmax(58px, auto) auto minmax(0, 1fr) auto;
}

.mpsc-workspace-header {
	position: relative;
	z-index: 25;
	min-height: 58px;
	background: var(--mpsc-ui-surface, #fff);
}

.mpsc-workspace-steps {
	z-index: 20;
}

.mpsc-workspace-artwork-step .mpsc-customer-routes {
	max-width: 1080px;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .65rem;
	max-width: 610px;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card {
	min-height: 70px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card strong {
	margin: 0;
	padding: 0;
}

.mpsc-inline-artwork-library {
	display: grid;
	gap: .55rem;
	margin-top: .8rem;
	padding-top: .75rem;
	border-top: 1px solid #dcdcde;
}

.mpsc-inline-artwork-library[hidden] {
	display: none !important;
}

.mpsc-inline-artwork-library-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.mpsc-inline-artwork-library-head strong {
	font-size: .95rem;
}

.mpsc-inline-artwork-body {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(220px, 300px);
	gap: .8rem;
	align-items: start;
}

.mpsc-inline-artwork-list {
	display: grid;
	gap: .5rem;
	min-width: 0;
}

.mpsc-inline-artwork-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(110px, 150px));
	gap: .55rem;
	min-width: 0;
	justify-content: start;
}

.mpsc-inline-artwork-item {
	display: grid;
	grid-template-rows: auto auto auto;
	gap: .3rem;
	min-width: 0;
	padding: .3rem;
	border: 1px solid #c3c4c7;
	border-radius: 7px;
	background: #fff;
}

.mpsc-inline-artwork-item.is-selected {
	border: 2px solid currentColor;
	padding: calc(.3rem - 1px);
}

.mpsc-inline-artwork-thumb {
	appearance: none;
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 5px;
	overflow: hidden;
	background: #f6f7f7;
	cursor: zoom-in;
}

.mpsc-inline-artwork-thumb:hover,
.mpsc-inline-artwork-thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.mpsc-inline-artwork-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpsc-inline-artwork-item[data-thumbnail-state="loading"] .mpsc-inline-artwork-thumb::after {
	content: "";
	position: absolute;
	inset: 34%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mpsc-inline-artwork-spin .8s linear infinite;
	opacity: .45;
}

.mpsc-inline-artwork-item[data-thumbnail-state="error"] {
	opacity: .55;
}

@keyframes mpsc-inline-artwork-spin {
	to { transform: rotate(360deg); }
}

.mpsc-inline-artwork-meta {
	display: grid;
	gap: .05rem;
	min-width: 0;
}

.mpsc-inline-artwork-meta strong,
.mpsc-inline-artwork-meta span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpsc-inline-artwork-meta strong {
	font-size: .78rem;
	line-height: 1.2;
}

.mpsc-inline-artwork-meta span {
	font-size: .7rem;
	color: #5f6368;
}

.mpsc-inline-artwork-use.button {
	width: 100%;
	min-height: 36px;
	margin: 0 !important;
	padding: .3rem .45rem;
	font-size: .76rem;
	line-height: 1.15;
}

.mpsc-inline-artwork-preview-panel {
	display: grid;
	gap: .45rem;
	min-width: 0;
	padding: .55rem;
	border: 1px solid #dcdcde;
	border-radius: 7px;
	background: #faf9f6;
}

.mpsc-inline-artwork-preview-panel[hidden] {
	display: none !important;
}

.mpsc-inline-artwork-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	min-width: 0;
}

.mpsc-inline-artwork-preview-head strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .85rem;
}

.mpsc-inline-artwork-preview-close.button {
	min-height: 34px;
	margin: 0 !important;
	padding: .25rem .45rem;
	font-size: .72rem;
}

.mpsc-inline-artwork-preview-image {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	min-width: 0;
	overflow: hidden;
	border-radius: 5px;
	background: #f1efe9;
}

.mpsc-inline-artwork-preview-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mpsc-inline-artwork-preview-meta {
	font-size: .74rem;
	color: #5f6368;
}

.mpsc-inline-artwork-preview-use.button {
	width: 100%;
	min-height: 40px;
	margin: 0 !important;
}

.mpsc-inline-artwork-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

.mpsc-inline-artwork-pagination[hidden] {
	display: none !important;
}

.mpsc-inline-artwork-page.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: .2rem .55rem;
	font-size: 1.25rem;
	line-height: 1;
}

.mpsc-inline-artwork-page-label {
	min-width: 2ch;
	text-align: center;
	font-weight: 700;
}

.mpsc-inline-artwork-status:empty {
	display: none;
}

.mpsc-inline-artwork-status {
	margin: 0;
	font-size: .82rem;
}

.mpsc-customer-routes.is-source-ready .mpsc-inline-artwork-library {
	display: none !important;
}

@media (max-width: 899px) {
	.mpsc-workspace-shell {
		grid-template-rows: minmax(50px, auto) auto minmax(0, 1fr) auto;
	}

	.mpsc-workspace-header {
		min-height: 50px;
	}

	.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
		max-width: none;
	}

	.mpsc-workspace-artwork-step .mpsc-customer-route-card {
		min-height: 58px;
		padding: .7rem .55rem;
	}

	.mpsc-inline-artwork-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-inline-artwork-preview-panel {
		grid-row: 1;
	}

	.mpsc-inline-artwork-grid {
		grid-template-columns: repeat(2, minmax(0, 140px));
		justify-content: start;
	}
}

/* Core 0.6.0-rc.173 Scope Item 4: concise common editor controls.
 * These controls expose existing browser/editor state only. Production geometry remains unchanged.
 * rc.174 adds optional artwork flip flags to the existing manifest layer state. */
.mpsc-fit-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin: 0 0 .55rem;
}

.mpsc-fit-controls .mpsc-fit-choice {
	min-height: 42px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-fit-controls .mpsc-fit-choice.is-selected,
.mpsc-fit-controls .mpsc-fit-choice[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px currentColor;
}

.mpsc-layer-common-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin: .55rem 0;
}

.mpsc-layer-common-actions .button,
.mpsc-editor-actions .mpsc-editor-centre {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-component-switcher-label {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 .2rem;
	font-size: .82rem;
	font-weight: 700;
}

@media (max-width: 899px) {
	.mpsc-workspace-editor .mpsc-fit-controls {
		grid-column: 1 / -1;
		order: 20;
	}

	.mpsc-layer-common-actions .button,
	.mpsc-editor-actions .mpsc-editor-centre {
		min-height: 46px;
	}
}

@media (max-width: 339px) {
	.mpsc-fit-controls,
	.mpsc-layer-common-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Core 0.6.0-rc.175 Scope Item 4 workflow correction: touch-first
 * image/text controls, layer artwork source choice and production-safe flips. */
.mpsc-layer-image-source-chooser {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin: .45rem 0 .65rem;
}

.mpsc-layer-image-source-chooser[hidden] {
	display: none !important;
}

.mpsc-layer-image-source-chooser .button {
	min-height: 44px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-personalisation.is-layer-artwork-picker .mpsc-customer-route-grid,
.mpsc-personalisation.is-layer-artwork-picker .mpsc-source-summary,
.mpsc-personalisation.is-layer-artwork-picker .mpsc-customer-route-status {
	display: none !important;
}

.mpsc-layer-rotation-presets {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .35rem;
	margin-top: .45rem;
}

.mpsc-layer-rotation-presets button,
.mpsc-layer-flip-actions .button {
	box-sizing: border-box;
	min-width: 0;
	min-height: 42px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-layer-flip-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin-top: .45rem;
}

.mpsc-layer-flip-actions[hidden] {
	display: none !important;
}

.mpsc-layer-flip-actions .button[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px currentColor;
}

.mpsc-layer-properties.is-text-layer .mpsc-layer-rotation-value,
.mpsc-layer-properties.is-text-layer .mpsc-layer-rotation-label .mpsc-transform-inputs {
	display: none !important;
}

.mpsc-layer-properties.is-text-layer .mpsc-layer-rotation-heading {
	display: block;
	font-weight: 700;
}

.mpsc-editor-actions .mpsc-editor-centre {
	min-height: 46px !important;
	padding: .58rem .7rem !important;
	justify-content: flex-start;
}

@media (max-width: 899px) {
	.mpsc-layer-rotation-presets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mpsc-layer-properties.is-artwork-layer .mpsc-layer-rotation-label .mpsc-transform-inputs {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
	}

	.mpsc-layer-properties.is-artwork-layer .mpsc-layer-rotation-label .mpsc-layer-rotation {
		display: none !important;
	}

	.mpsc-layer-properties.is-artwork-layer .mpsc-layer-rotation-label .mpsc-layer-rotation-number {
		display: block !important;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
		font-size: 1rem;
	}

	.mpsc-layer-rotation-label .mpsc-layer-rotation-stepper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mpsc-layer-crop-grid .mpsc-touch-stepper button {
		font-size: .8rem;
	}
}

@media (max-width: 389px) {
	.mpsc-layer-image-source-chooser,
	.mpsc-layer-flip-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Core 0.6.0-rc.176 Scope Item 4 acceptance correction: semantic primary
 * image movement and an in-Design protected My Artwork picker for added images. */
.mpsc-layer-artwork-library {
	display: grid;
	gap: .55rem;
	margin: .45rem 0 .7rem;
	padding: .55rem;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fff;
}

.mpsc-layer-artwork-library[hidden] {
	display: none !important;
}

.mpsc-layer-artwork-library-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.mpsc-layer-artwork-library-head .button {
	min-height: 40px;
	margin: 0 !important;
}

.mpsc-layer-artwork-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(96px, 140px));
	gap: .5rem;
	justify-content: start;
}

.mpsc-layer-artwork-item {
	display: grid;
	grid-template-rows: auto auto auto;
	gap: .3rem;
	min-width: 0;
	padding: .3rem;
	border: 1px solid #c3c4c7;
	border-radius: 7px;
	background: #fff;
}

.mpsc-layer-artwork-item > img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
	background: #f6f7f7;
}

.mpsc-layer-artwork-item[data-thumbnail-state="loading"] > img {
	opacity: .35;
}

.mpsc-layer-artwork-item[data-thumbnail-state="error"] {
	opacity: .55;
}

.mpsc-layer-artwork-meta {
	display: grid;
	gap: .05rem;
	min-width: 0;
}

.mpsc-layer-artwork-meta strong,
.mpsc-layer-artwork-meta span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpsc-layer-artwork-meta strong {
	font-size: .78rem;
	line-height: 1.2;
}

.mpsc-layer-artwork-meta span {
	font-size: .7rem;
	color: #5f6368;
}

.mpsc-layer-artwork-add {
	width: 100%;
	min-height: 40px;
	margin: 0 !important;
	font-weight: 700;
}

.mpsc-layer-artwork-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
}

.mpsc-layer-artwork-pagination[hidden] {
	display: none !important;
}

.mpsc-layer-artwork-pagination .button {
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
}

.mpsc-layer-artwork-status:empty {
	display: none;
}

@media (max-width: 899px) {
	.mpsc-layer-artwork-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mpsc-component-editor[data-mobile-tool-active="image"] .mpsc-advanced-layer-editor:not([hidden]) > .mpsc-layer-artwork-library:not([hidden]) {
		display: grid !important;
	}
}

/* Core 0.6.0-rc.177 Scope Item 5: production-safe backgrounds and layouts. */
.mpsc-surface-background-controls { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }
.mpsc-surface-background-colour-button { box-sizing:border-box; display:inline-flex !important; align-items:center; height:46px !important; min-height:46px !important; flex:1 1 170px; }
.mpsc-surface-background-colour-button { justify-content:space-between; gap:.75rem; font-weight:700 !important; }
.mpsc-surface-background-swatch { width:26px; height:26px; flex:0 0 26px; border:1px solid currentColor; border-radius:5px; background:#fff; }
.mpsc-layer-layout-row { margin:.2rem 0 .8rem; padding:0; border:0; min-width:0; }
.mpsc-layer-layout-row legend { margin:0 0 .35rem; padding:0; font-weight:700; }
.mpsc-layer-layout-grid { display:grid; grid-template-columns:repeat(3, 48px); gap:7px; width:max-content; max-width:100%; }
.mpsc-layer-layout-option.button { box-sizing:border-box; width:48px; height:48px; min-width:48px; min-height:48px; margin:0 !important; padding:6px !important; display:grid !important; place-items:center; border:1px solid #b7bcc4 !important; background:#fff !important; }
.mpsc-layer-layout-option.button:hover, .mpsc-layer-layout-option.button:focus-visible { border-color:var(--mpsc-ui-accent, #2563eb) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--mpsc-ui-accent, #2563eb) 18%, transparent); }
.mpsc-layer-layout-option.button.is-selected, .mpsc-layer-layout-option.button[aria-pressed="true"] { border-color:var(--mpsc-ui-accent, #2563eb) !important; background:var(--mpsc-ui-accent-soft, #eff6ff) !important; box-shadow:inset 0 0 0 1px var(--mpsc-ui-accent, #2563eb); }
.mpsc-layer-layout-preview { position:relative; display:block; width:30px; height:30px; border:1px solid #9aa1aa; border-radius:4px; background:#f7f8fa; }
.mpsc-layer-layout-preview-item { position:absolute; width:9px; height:9px; border-radius:2px; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%); }
.mpsc-layer-layout-option[data-layout-preset*="left"] .mpsc-layer-layout-preview-item { left:4px; transform:translate(0,-50%); }
.mpsc-layer-layout-option[data-layout-preset*="right"] .mpsc-layer-layout-preview-item { left:auto; right:4px; transform:translate(0,-50%); }
.mpsc-layer-layout-option[data-layout-preset^="top"] .mpsc-layer-layout-preview-item { top:4px; transform:translate(-50%,0); }
.mpsc-layer-layout-option[data-layout-preset^="top"][data-layout-preset*="left"] .mpsc-layer-layout-preview-item { transform:none; }
.mpsc-layer-layout-option[data-layout-preset^="top"][data-layout-preset*="right"] .mpsc-layer-layout-preview-item { transform:none; }
.mpsc-layer-layout-option[data-layout-preset^="bottom"] .mpsc-layer-layout-preview-item { top:auto; bottom:4px; transform:translate(-50%,0); }
.mpsc-layer-layout-option[data-layout-preset^="bottom"][data-layout-preset*="left"] .mpsc-layer-layout-preview-item { transform:none; }
.mpsc-layer-layout-option[data-layout-preset^="bottom"][data-layout-preset*="right"] .mpsc-layer-layout-preview-item { transform:none; }
.mpsc-layer-layout-current { margin:.35rem 0 0; font-size:.82rem; color:#50575e; }
@media (max-width: 699px) {
  .mpsc-surface-background-colour-button { flex:1 1 150px; }
  .mpsc-layer-layout-grid { grid-template-columns:repeat(3, 52px); gap:8px; }
  .mpsc-layer-layout-option.button { width:52px; height:52px; min-width:52px; min-height:52px; }
}

/* Core 0.6.0-rc.178 Scope Item 5 access correction: Background starts in Artwork. */
.mpsc-start-background-panel {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-wrap: wrap;
	max-width: 610px;
	margin: .55rem 0 .15rem;
	padding: .65rem;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: var(--mpsc-ui-surface, #fff);
}
.mpsc-start-background-panel[hidden] { display: none !important; }
.mpsc-start-background-colour-button { box-sizing:border-box; height:46px !important; min-height:46px !important; }
.mpsc-start-background-colour-button { display:inline-flex !important; align-items:center; justify-content:space-between; gap:.75rem; min-width:190px; font-weight:700 !important; }
.mpsc-start-background-swatch { width:26px; height:26px; flex:0 0 26px; border:1px solid currentColor; border-radius:5px; background:#fff; }
.mpsc-background-choice.is-configured::after { content:'✓'; margin-left:.35rem; font-weight:700; }
@media (max-width: 899px) {
	.mpsc-start-background-panel { align-items: stretch; max-width:none; }
	.mpsc-start-background-colour-button { flex:1 1 190px; width:100%; }
}

/* Core 0.6.0-rc.179 Scope Item 5 acceptance correction: make Background an
 * unmistakable Artwork-stage button and keep ready-made designs in the same
 * source workflow. */
.mpsc-workspace-artwork-step .mpsc-background-choice.button {
	cursor: pointer;
	border-color: var(--mpsc-ui-accent, #2563eb) !important;
	background: var(--mpsc-ui-accent-soft, #eff6ff) !important;
	color: var(--mpsc-ui-ink, #1f2937) !important;
	font-weight: 700;
}
.mpsc-workspace-artwork-step .mpsc-background-choice.button:hover,
.mpsc-workspace-artwork-step .mpsc-background-choice.button:focus-visible,
.mpsc-workspace-artwork-step .mpsc-background-choice.button[aria-expanded="true"] {
	border-color: var(--mpsc-ui-accent-dark, #1d4ed8) !important;
	background: var(--mpsc-ui-accent, #2563eb) !important;
	color: var(--mpsc-ui-ink, #1f2937) !important;
}
.mpsc-artwork-template-selector {
	margin: .65rem 0 .15rem;
	max-width: 610px;
}
@media (max-width: 899px) {
	.mpsc-artwork-template-selector { max-width: none; }
}


/* Core 0.6.0-rc.185: keep common background choices inside the editor. */
.mpsc-background-palette {
	flex: 1 0 100%;
	box-sizing: border-box;
	padding: 10px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: var(--mpsc-ui-surface, #fff);
}
.mpsc-background-palette[hidden] { display: none !important; }
.mpsc-background-palette-swatches {
	display: grid;
	grid-template-columns: repeat(6, minmax(42px, 1fr));
	gap: 8px;
	margin-bottom: 9px;
}
.mpsc-background-palette-option {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 4px;
	border: 2px solid #c7c9cc;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.mpsc-background-palette-option > span {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
}
.mpsc-background-palette-option.is-selected,
.mpsc-background-palette-option[aria-pressed="true"] {
	border-color: var(--mpsc-ui-accent, #2563eb);
	box-shadow: 0 0 0 2px var(--mpsc-ui-accent-soft, #eff6ff);
}
.mpsc-background-palette-option:focus-visible {
	outline: 3px solid var(--mpsc-ui-accent, #2563eb);
	outline-offset: 2px;
}
/* Core 0.6.0-rc.187: reuse the proven added-text direct colour-control pattern
 * for an exact custom background colour without a programmatic hidden-input proxy. */
.mpsc-background-custom-colour {
	display: grid;
	grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
	align-items: center;
	gap: .75rem;
	padding-top: 10px;
	border-top: 1px solid #dcdcde;
	font-weight: 700;
}
.mpsc-background-custom-colour-picker {
	display: grid;
	grid-template-columns: minmax(3rem, 4rem) minmax(0, 1fr);
	align-items: center;
	gap: .65rem;
}
.mpsc-background-custom-colour-picker input[type="color"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 3rem;
	height: 2.75rem;
	padding: .2rem;
	border-radius: 6px;
	cursor: pointer;
}
.mpsc-background-custom-colour-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .02em;
}
@media (max-width: 699px) {
	.mpsc-background-palette-swatches { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
	.mpsc-background-custom-colour { grid-template-columns: 1fr; gap: .4rem; }
}


/* Core 0.6.0-rc.189: no printed background is a first-class palette choice. */
.mpsc-background-transparent-option > .mpsc-background-transparent-swatch,
.mpsc-start-background-swatch.is-transparent,
.mpsc-surface-background-swatch.is-transparent {
	background-color: #fff !important;
	background-image:
		linear-gradient(135deg, transparent 46%, #d63638 47%, #d63638 53%, transparent 54%),
		linear-gradient(45deg, #e4e4e4 25%, transparent 25%),
		linear-gradient(-45deg, #e4e4e4 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e4e4e4 75%),
		linear-gradient(-45deg, transparent 75%, #e4e4e4 75%) !important;
	background-position: 0 0, 0 0, 0 5px, 5px -5px, -5px 0 !important;
	background-size: 100% 100%, 10px 10px, 10px 10px, 10px 10px, 10px 10px !important;
}

/* Core 0.6.0-rc.196 mobile base-less composition preview correction.
 * The historical upload-first rule hides the preview while no primary image exists.
 * A first-class composition can intentionally have no primary image, so Design must
 * retain its live surface preview while Artwork remains preview-free. */
@media (max-width: 899px) {
	.mpsc-personalisation[data-has-artwork="no"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot {
		display: block !important;
	}
}

/* rc.202: optional Artwork-stage starting layouts and a compact Design fill-first workflow. */
.mpsc-starting-layouts {
	margin: .75rem 0;
	padding: .7rem;
	border: 1px solid rgba(15, 23, 42, .14);
	border-radius: 8px;
	background: #fff;
}

.mpsc-starting-layouts-heading {
	display: grid;
	gap: .14rem;
	margin-bottom: .6rem;
}

.mpsc-starting-layouts-heading strong {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: baseline;
	font-size: .94rem;
}

.mpsc-starting-layouts-heading strong span {
	font-size: .72rem;
	font-weight: 600;
	opacity: .68;
}

.mpsc-starting-layouts-heading small,
.mpsc-starting-layout-note,
.mpsc-starting-layout-choice-summary,
.mpsc-starting-layout-prepared,
.mpsc-starting-layout-status,
.mpsc-starting-layout-fill-status {
	font-size: .8rem;
	line-height: 1.4;
}

.mpsc-starting-layout-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mpsc-starting-layout-group + .mpsc-starting-layout-group {
	margin-top: .8rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(15, 23, 42, .1);
}

.mpsc-starting-layout-group > legend {
	margin-bottom: .4rem;
	font-weight: 700;
}

.mpsc-starting-layout-manual {
	width: 100%;
	margin: 0 0 .45rem;
	padding: .6rem .7rem;
	border: 1px solid #c3c4c7;
	border-radius: 7px;
	background: #fff;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.mpsc-starting-layout-manual.is-selected,
.mpsc-starting-layout-card.is-selected {
	border-color: currentColor;
	box-shadow: 0 0 0 2px currentColor inset;
}

.mpsc-starting-layout-category {
	margin: .38rem 0;
	border: 1px solid rgba(15, 23, 42, .12);
	border-radius: 7px;
	background: rgba(15, 23, 42, .018);
}

.mpsc-starting-layout-category > summary {
	padding: .55rem .65rem;
	font-size: .84rem;
	font-weight: 700;
	cursor: pointer;
}

.mpsc-starting-layout-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .45rem;
	padding: 0 .55rem .55rem;
}

.mpsc-starting-layout-card {
	display: grid;
	grid-template-rows: minmax(54px, auto) auto;
	gap: .35rem;
	align-items: center;
	min-width: 0;
	min-height: 98px;
	padding: .42rem;
	border: 1px solid #c3c4c7;
	border-radius: 7px;
	background: #fff;
	font: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.mpsc-starting-layout-card:hover,
.mpsc-starting-layout-card:focus-visible,
.mpsc-starting-layout-manual:hover,
.mpsc-starting-layout-manual:focus-visible {
	border-color: currentColor;
}

.mpsc-starting-layout-note,
.mpsc-starting-layout-choice-summary,
.mpsc-starting-layout-prepared,
.mpsc-starting-layout-status {
	margin: .5rem 0 0;
}

.mpsc-starting-layout-fill {
	margin: .55rem 0 .7rem;
	padding: .65rem;
	border: 1px solid rgba(15, 23, 42, .18);
	border-radius: 8px;
	background: #fff;
}

.mpsc-starting-layout-fill:focus {
	outline: 2px solid transparent;
}

.mpsc-starting-layout-fill-heading {
	display: grid;
	gap: .12rem;
	margin-bottom: .55rem;
}

.mpsc-starting-layout-fill-heading strong {
	font-size: .92rem;
}

.mpsc-starting-layout-fill-heading small {
	font-size: .78rem;
	line-height: 1.35;
}

.mpsc-starting-layout-fill-grid {
	display: grid;
	gap: .4rem;
}

.mpsc-starting-layout-fill-row {
	display: grid;
	grid-template-columns: minmax(76px, .55fr) minmax(120px, 1fr) auto auto;
	gap: .4rem;
	align-items: center;
	min-width: 0;
	padding: .4rem;
	border: 1px solid rgba(15, 23, 42, .1);
	border-radius: 6px;
}

.mpsc-starting-layout-fill-row[data-slot-ready="no"] {
	border-style: dashed;
}

.mpsc-starting-layout-fill-label {
	font-size: .8rem;
}

.mpsc-starting-layout-text-input {
	width: 100%;
	min-width: 0;
}

.mpsc-starting-layout-slot-ready {
	min-width: 0;
	overflow: hidden;
	font-size: .78rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpsc-starting-layout-fill-row .button,
.mpsc-starting-layout-fill-row .button-link-delete {
	min-width: 0;
	white-space: nowrap;
}

.mpsc-starting-layout-fill-status {
	margin: .5rem 0 0;
}

@media (max-width: 899px) {
	.mpsc-starting-layout-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mpsc-starting-layout-card {
		min-height: 104px;
	}

	.mpsc-starting-layout-fill-row {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.mpsc-starting-layout-fill-label,
	.mpsc-starting-layout-text-input,
	.mpsc-starting-layout-slot-ready {
		grid-column: 1 / -1;
	}

	.mpsc-starting-layout-fill-row .button-link-delete {
		justify-self: end;
	}
}

@media (max-width: 420px) {
	.mpsc-starting-layout-card-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: .35rem;
	}

	.mpsc-starting-layout-card {
		padding: .35rem;
	}
}



/* rc.242: an unresolved prepared artwork row must stay usable on desktop.
 * Keep its label on its own line and give the three actions equal bounded
 * columns so My Artwork cannot collide with Remove in narrower editor panes. */
@media (min-width: 900px) {
	.mpsc-starting-layout-fill-row[data-slot-role="artwork"][data-slot-ready="no"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mpsc-starting-layout-fill-row[data-slot-role="artwork"][data-slot-ready="no"] > .mpsc-starting-layout-fill-label {
		grid-column: 1 / -1;
	}

	.mpsc-starting-layout-fill-row[data-slot-role="artwork"][data-slot-ready="no"] > .mpsc-starting-layout-photo-upload,
	.mpsc-starting-layout-fill-row[data-slot-role="artwork"][data-slot-ready="no"] > .mpsc-starting-layout-photo-library,
	.mpsc-starting-layout-fill-row[data-slot-role="artwork"][data-slot-ready="no"] > .mpsc-starting-layout-remove-slot {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		justify-content: center;
		white-space: normal;
	}
}

/* rc.197: shape-aware composition layouts for the existing added-item layer system. */
.mpsc-composition-layouts {
	margin: .65rem 0 .8rem;
	padding: .65rem;
	border: 1px solid rgba(15, 23, 42, .14);
	border-radius: 8px;
	background: #fff;
}

.mpsc-composition-layouts-heading {
	display: grid;
	gap: .12rem;
	margin-bottom: .55rem;
}

.mpsc-composition-layouts-heading strong {
	font-size: .92rem;
}

.mpsc-composition-layouts-heading small,
.mpsc-composition-layout-status {
	font-size: .8rem;
	line-height: 1.35;
}

.mpsc-composition-layout-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
}

.mpsc-composition-layout-card {
	display: grid;
	grid-template-rows: minmax(58px, auto) auto;
	gap: .4rem;
	align-items: center;
	min-width: 0;
	min-height: 104px;
	padding: .45rem;
	border: 1px solid #c3c4c7;
	border-radius: 7px;
	background: #fff;
	font: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.mpsc-composition-layout-card:hover,
.mpsc-composition-layout-card:focus-visible {
	border-color: currentColor;
	outline: 2px solid transparent;
}

.mpsc-composition-layout-preview {
	position: relative;
	display: block;
	width: min(100%, 116px);
	min-height: 48px;
	max-height: 80px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, .35);
	border-radius: 4px;
	background: rgba(15, 23, 42, .035);
}

.mpsc-composition-layout-slot {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2px;
	min-height: 2px;
	border-radius: 2px;
}

.mpsc-composition-layout-slot.is-artwork {
	border: 1px solid rgba(15, 23, 42, .52);
	background: rgba(15, 23, 42, .14);
}

.mpsc-composition-layout-slot.is-text {
	flex-direction: column;
	gap: 15%;
	padding: 12%;
	border: 1px dashed rgba(15, 23, 42, .42);
	background: rgba(255, 255, 255, .82);
}

.mpsc-composition-layout-slot.is-text i {
	display: block;
	width: 82%;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	opacity: .58;
}

.mpsc-composition-layout-slot.is-text i:nth-child(2) { width: 64%; }
.mpsc-composition-layout-slot.is-text i:nth-child(3) { width: 74%; }

.mpsc-composition-layout-label {
	display: block;
	font-size: .76rem;
	line-height: 1.2;
}

.mpsc-composition-layout-status {
	margin: .55rem 0 0;
}

@media (max-width: 899px) {
	.mpsc-composition-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mpsc-composition-layout-card {
		min-height: 112px;
		padding: .5rem;
	}
}

/* rc.203: staging UX correction after real mobile rc.202 review.
 * Starting layouts are a first-class Artwork choice, not a child of Background.
 * Prepared layouts use a fill-first sequence with the generic add-layer controls
 * withheld until every planned slot is filled or removed. */
.mpsc-workspace-artwork-step .mpsc-layout-choice.button {
	cursor: pointer;
	border-color: var(--mpsc-ui-accent, #2563eb) !important;
	background: var(--mpsc-ui-surface, #fff) !important;
	color: var(--mpsc-ui-ink, #1f2937) !important;
	font-weight: 700;
}
.mpsc-workspace-artwork-step .mpsc-layout-choice:hover,
.mpsc-workspace-artwork-step .mpsc-layout-choice:focus-visible,
.mpsc-workspace-artwork-step .mpsc-layout-choice.is-selected,
.mpsc-workspace-artwork-step .mpsc-layout-choice[aria-expanded="true"] {
	border-color: var(--mpsc-ui-accent-dark, #1d4ed8) !important;
	background: var(--mpsc-ui-accent-soft, #eff6ff) !important;
	color: var(--mpsc-ui-ink, #1f2937) !important;
}
.mpsc-workspace-artwork-step .mpsc-background-choice.is-selected {
	border-color: var(--mpsc-ui-accent-dark, #1d4ed8) !important;
	background: var(--mpsc-ui-accent-soft, #eff6ff) !important;
}

.mpsc-starting-layouts {
	max-width: 760px;
	margin: .7rem 0 .15rem;
}

/* The planned-slot form is the next task. Do not show a second, competing
 * Add image/Add text/layout toolset until the plan is complete. */
.mpsc-personalisation[data-starting-layout-incomplete="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-starting-layout-fill):not(.mpsc-layer-artwork-library):not(.mpsc-layer-error) {
	display: none !important;
}

.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-upload,
.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-library,
.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-adjust,
.mpsc-starting-layout-fill-row[data-slot-role="text"] .mpsc-starting-layout-text-style {
	width: 100%;
	min-width: 0;
	justify-content: center;
	box-sizing: border-box;
}

/* rc.204: prepared-layout discoverability. Customers do not need to know the
 * layer model to reach the existing styling/adjustment controls. */
.mpsc-starting-layout-text-style,
.mpsc-starting-layout-photo-adjust {
	font-weight: 700;
}

@media (max-width: 899px) {
	/* Upload starts with the picker, not a large empty preview. Once a base image
	 * exists the normal sticky preview returns. Base-less composition layouts keep
	 * their preview because the preview itself is useful content there. */
	.mpsc-personalisation[data-start-source="upload"][data-has-artwork="no"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot {
		display: none !important;
	}

	.mpsc-starting-layouts {
		max-width: none;
		padding: .6rem;
	}

	.mpsc-starting-layout-fill {
		margin-top: 0;
		padding: .55rem;
	}

	.mpsc-starting-layout-fill-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .42rem;
		align-items: stretch;
		padding: .5rem;
	}

	.mpsc-starting-layout-fill-label,
	.mpsc-starting-layout-text-input,
	.mpsc-starting-layout-slot-ready {
		grid-column: 1 / -1;
	}

	.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-upload {
		grid-column: 1;
	}

	.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-library {
		grid-column: 2;
	}

	.mpsc-starting-layout-fill-row[data-slot-role="artwork"] .mpsc-starting-layout-photo-adjust,
	.mpsc-starting-layout-fill-row[data-slot-role="text"] .mpsc-starting-layout-text-style {
		grid-column: 1 / -1;
	}

	.mpsc-starting-layout-fill-row .mpsc-starting-layout-remove-slot {
		grid-column: 1 / -1;
		justify-self: start;
		min-height: 38px;
		padding: .3rem .1rem;
	}
}

/* rc.205 upload-quality Auto-fix. Customer uploads remain local-only; the
 * provider preparation path is reserved for Creator-generated artwork. */
.mpsc-auto-quality {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.mpsc-quality-panel .mpsc-quality-auto-fix,
.mpsc-quality-panel .mpsc-choose-another {
	float: none !important;
	clear: both;
	position: static !important;
	max-width: 100%;
	white-space: normal;
}

.mpsc-quality-auto-status {
	margin: .65rem 0 0;
	font-weight: 600;
}

@media (max-width: 700px) {
	.mpsc-quality-actions {
		width: 100%;
		grid-template-columns: 1fr;
	}

	.mpsc-quality-panel .mpsc-quality-auto-fix,
	.mpsc-quality-panel .mpsc-choose-another {
		width: 100%;
		justify-content: center;
	}
}

/* rc.207: roster capability is disclosed before personalisation without
 * turning the ordinary product journey into a roster-specific flow. */
.mpsc-roster-capability {
	display: grid;
	gap: .35rem;
	margin: 0 0 1rem;
	padding: .9rem 1rem;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: .75rem;
	background: rgba(0, 0, 0, .025);
	box-sizing: border-box;
	max-width: 100%;
}

.mpsc-roster-capability-title {
	display: block;
	font-size: 1.05em;
	line-height: 1.3;
}

.mpsc-roster-capability p {
	margin: 0;
	line-height: 1.45;
}

.mpsc-roster-capability-signin {
	font-weight: 600;
}

@media (max-width: 700px) {
	.mpsc-roster-capability {
		padding: .8rem .85rem;
		margin-bottom: .8rem;
	}
}

/* rc.211: guided Team/Guild planning keeps the roster journey ahead of the
 * general editor while still using the existing Product Family geometry and
 * layered composition runtime underneath. */
.mpsc-roster-capability-summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.mpsc-roster-capability-summary > div {
	min-width: 0;
}

.mpsc-roster-guided {
	display: grid;
	gap: 1rem;
	padding-top: .85rem;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.mpsc-roster-guided[hidden] {
	display: none;
}

.mpsc-roster-guided-step {
	display: grid;
	gap: .55rem;
}

.mpsc-roster-guided-step > p,
.mpsc-roster-guided-status,
.mpsc-roster-guided-layout-status {
	margin: 0;
}

.mpsc-roster-size-options {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.mpsc-roster-size-options label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .75rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: .6rem;
	cursor: pointer;
}

.mpsc-roster-layout-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .65rem;
}

.mpsc-roster-layout-card,
.mpsc-roster-mode-card {
	position: relative;
	display: block;
	min-width: 0;
	cursor: pointer;
}

.mpsc-roster-layout-card > input,
.mpsc-roster-mode-card > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mpsc-roster-layout-card-body,
.mpsc-roster-mode-card > span {
	display: grid;
	gap: .42rem;
	height: 100%;
	box-sizing: border-box;
	padding: .65rem;
	border: 2px solid rgba(0, 0, 0, .15);
	border-radius: .75rem;
	background: rgba(255, 255, 255, .7);
}

.mpsc-roster-layout-card input:checked + .mpsc-roster-layout-card-body,
.mpsc-roster-mode-card input:checked + span {
	border-color: currentColor;
	box-shadow: 0 0 0 1px currentColor;
}

.mpsc-roster-layout-card input:focus-visible + .mpsc-roster-layout-card-body,
.mpsc-roster-mode-card input:focus-visible + span {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.mpsc-roster-layout-card small,
.mpsc-roster-mode-card small {
	line-height: 1.35;
}

.mpsc-roster-layout-preview {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1.35 / 1;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .45rem;
	background: rgba(0, 0, 0, .025);
	overflow: hidden;
}

.mpsc-roster-layout-slot {
	position: absolute;
	box-sizing: border-box;
	border-radius: .25rem;
	border: 1px solid rgba(0, 0, 0, .35);
	background: rgba(0, 0, 0, .08);
}

.mpsc-roster-layout-slot.is-text {
	background: rgba(0, 0, 0, .18);
}

.mpsc-roster-mode-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
}

.mpsc-roster-design-guidance {
	display: grid;
	gap: .35rem;
	margin: 0 0 .85rem;
	padding: .75rem .85rem;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: .65rem;
	background: rgba(0, 0, 0, .025);
}

.mpsc-roster-design-guidance p {
	margin: 0;
}

@media (max-width: 900px) {
	.mpsc-roster-layout-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mpsc-roster-mode-options {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.mpsc-roster-capability-summary {
		display: grid;
	}
	.mpsc-roster-guided-toggle,
	.mpsc-roster-guided-start {
		width: 100%;
		box-sizing: border-box;
	}
	.mpsc-roster-layout-options {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
		padding: .1rem 0 .4rem;
	}
	.mpsc-roster-layout-card {
		flex: 0 0 min(78vw, 270px);
		scroll-snap-align: start;
	}
	.mpsc-roster-size-options label {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* Core 0.6.0-rc.236: mobile Design workspace fit-entire-surface model.
 * The mobile editor must never enlarge a surface beyond the space available and
 * then crop it. The authoritative flat canvas keeps its intrinsic aspect ratio,
 * is bounded by both viewport width and a usable share of viewport height, and
 * the controls scroller receives the remaining workspace. This supersedes the
 * fixed-height preview experiment from rc.235 without changing editor state,
 * mock-up rendering or production geometry. */
@media (max-width: 899px) {
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-shell {
		grid-template-rows: minmax(48px, auto) auto minmax(0, 1fr) auto;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-header {
		min-height: 48px;
		padding-block: .22rem;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-step {
		min-height: 40px;
		padding-block: .25rem;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-step-number {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	/* Let the active surface determine preview height. Wide wraps stay shallow;
	 * square and portrait surfaces grow until the viewport-height cap is reached. */
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot {
		position: sticky !important;
		top: 0 !important;
		z-index: 20;
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: .2rem .3rem;
		overflow: hidden;
		border-bottom: 1px solid #eeeae3;
		background: #fff;
		box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-panel,
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-panel[open] {
		display: block;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 0;
		overflow: hidden;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview {
		display: block;
		flex: 0 1 auto;
		width: auto !important;
		height: auto !important;
		min-width: 0;
		min-height: 0;
		max-width: 100% !important;
		max-height: min(36dvh, 320px) !important;
		object-fit: contain;
		object-position: center center;
	}

	/* The controls remain a dedicated vertical scroller directly below the
	 * complete preview. Do not allow the document itself to become the scroller. */
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-scroll-region {
		flex: 1 1 auto;
		min-height: 0;
		height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
		scrollbar-gutter: auto;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-product-media {
		padding: .2rem .4rem;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-product-media-thumb {
		width: 40px;
		min-width: 40px;
		height: 40px;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor {
		padding: .38rem .5rem .75rem;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-heading {
		margin: 0 0 .18rem;
		font-size: 1.25rem;
		line-height: 1.15;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-status,
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-component-choice-note {
		margin: 0 0 .28rem;
		font-size: .88rem;
		line-height: 1.35;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer {
		min-height: 54px;
		padding-block: .28rem;
	}
}

/* Short-height phones prioritise a usable controls viewport while still showing
 * the complete active surface. Width remains a secondary constraint. */
@media (max-width: 899px) and (max-height: 680px) {
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview {
		max-height: min(32dvh, 220px) !important;
	}
}


/* Core 0.6.0-rc.237: mobile Design workspace density balance.
 * The rc.236 fit-entire-surface rule is retained, but the height budget now
 * belongs to the contextual product/surface rather than to the canvas inside
 * it. This prevents a square or portrait surface from being reduced inside a
 * full-width white stage, so the visible editor shrink-wraps the complete
 * design surface while preserving the controls viewport. Introductory chrome
 * is compacted without hiding controls or changing editor state. */
@media (max-width: 899px) {
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot {
		padding: .1rem .22rem;
	}

	/* Contextual editor shells own their aspect ratio. The first width is a
	 * conservative fallback; current browsers additionally cap width from the
	 * height budget and the Product Family-derived product aspect ratio. */
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-contextual-preview-product {
		width: 100%;
		width: min(100%, calc(min(36dvh, 320px) * var(--mpsc-context-product-aspect)));
		height: auto;
		max-width: 100%;
		max-height: none;
		padding: 0;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-contextual-preview-surface {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: none !important;
	}

	/* Keep useful context, but reduce the vertical tax before the controls. */
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor {
		padding: .28rem .5rem .7rem;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-heading {
		margin-bottom: .12rem;
		font-size: 1.12rem;
		line-height: 1.12;
	}

	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-status,
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-component-choice-note {
		margin-bottom: .2rem;
		font-size: .8rem;
		line-height: 1.25;
	}
}

@media (max-width: 899px) and (max-height: 680px) {
	.mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-contextual-preview-product {
		width: min(100%, calc(min(32dvh, 220px) * var(--mpsc-context-product-aspect)));
	}
}

/* rc.243: four-route novice task model. Presentation only.
 * The editor state, Product Family geometry, renderer and saved design contract
 * remain authoritative beneath these task-scoped visibility rules. */
.mpsc-editor-task-note {
	margin: -.15rem 0 .7rem;
	font-size: .92rem;
	line-height: 1.4;
	color: #4b5563;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card {
	align-content: start;
	gap: .28rem;
	text-align: left;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card > span:not(.mpsc-customer-route-number) {
	display: block;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.35;
	color: inherit;
	opacity: .82;
}

.mpsc-personalisation[data-editor-task="upload-awaiting-image"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="layout-fill"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="layout-review"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="blank-build"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs,
.mpsc-personalisation[data-editor-task="freeform-more"] .mpsc-component-editor[data-task-active="yes"] .mpsc-mobile-tool-tabs {
	display: none !important;
}

/* Upload begins with one bounded action rather than a full empty editor. */
.mpsc-personalisation[data-editor-task="upload-awaiting-image"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-upload-row):not(.mpsc-quality-panel):not(.mpsc-component-switcher) {
	display: none !important;
}

/* Once an image exists, the large picker and technical coverage diagram stop
 * competing with the placement controls. Replace remains explicit. */
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-upload-row,
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-print-coverage-guide,
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor {
	display: none !important;
}

.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-replace-primary-image,
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-layer-tools-launch {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	white-space: normal;
}

/* rc.248 image-placement primary-action alignment. Desktop grid spacing and
 * mobile control gaps own separation between these sibling actions; the older
 * Add more launch margin must not push it below Replace image. */
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-replace-primary-image,
.mpsc-personalisation[data-editor-task="image-placement"] .mpsc-component-editor[data-task-active="yes"] .mpsc-layer-tools-launch {
	margin: 0 !important;
	min-height: 44px;
	align-self: start;
}

/* Prepared-layout tasks own the control pane until the task is complete. */
.mpsc-personalisation[data-editor-task="layout-fill"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher),
.mpsc-personalisation[data-editor-task="layout-review"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher),
.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher),
.mpsc-personalisation[data-editor-task="blank-build"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher),
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher),
.mpsc-personalisation[data-editor-task="freeform-more"] .mpsc-component-editor[data-task-active="yes"] .mpsc-editor-controls > :not(.mpsc-advanced-layer-editor):not(.mpsc-component-switcher) {
	display: none !important;
}

.mpsc-personalisation[data-editor-task="layout-fill"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-starting-layout-fill):not(.mpsc-layer-artwork-library):not(.mpsc-layer-error),
.mpsc-personalisation[data-editor-task="layout-review"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-starting-layout-fill):not(.mpsc-layer-artwork-library):not(.mpsc-layer-error) {
	display: none !important;
}

.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-layer-properties):not(.mpsc-editor-task-actions):not(.mpsc-layer-error),
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-layer-properties):not(.mpsc-editor-task-actions):not(.mpsc-layer-error) {
	display: none !important;
}

.mpsc-personalisation[data-editor-task="blank-build"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor > :not(.mpsc-surface-background-controls):not(.mpsc-layer-toolbar):not(.mpsc-layer-image-source-chooser):not(.mpsc-layer-artwork-library):not(.mpsc-layer-error) {
	display: none !important;
}

.mpsc-personalisation[data-editor-task="freeform-more"] .mpsc-component-editor[data-task-active="yes"] .mpsc-starting-layout-fill {
	display: none !important;
}

.mpsc-editor-task-actions {
	display: flex;
	gap: .5rem;
	margin: .7rem 0 0;
}

.mpsc-editor-task-actions[hidden],
.mpsc-editor-task-actions .button[hidden],
.mpsc-starting-layout-replace-actions[hidden] {
	display: none !important;
}

.mpsc-editor-task-actions .button {
	min-height: 44px;
	min-width: 0;
	max-width: 100%;
}

/* Review rows use short, bounded actions. No source filename may take the
 * width needed by Adjust, Replace or Remove. */
.mpsc-starting-layout-fill-row[data-slot-ready="yes"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-fill-label,
.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-slot-ready,
.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-text-input {
	grid-column: 1 / -1;
	max-width: 100%;
}

.mpsc-starting-layout-fill-row .mpsc-starting-layout-photo-adjust,
.mpsc-starting-layout-fill-row .mpsc-starting-layout-photo-replace,
.mpsc-starting-layout-fill-row .mpsc-starting-layout-text-style,
.mpsc-starting-layout-fill-row .mpsc-starting-layout-remove-slot {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
}

.mpsc-starting-layout-replace-actions {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .4rem;
	padding-top: .25rem;
}

.mpsc-starting-layout-replace-actions .button {
	width: 100%;
	white-space: normal;
}

/* The active task should read as one pane rather than a generic editor dump. */
.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-layer-properties,
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-layer-properties {
	margin-top: 0;
	padding-top: .25rem;
}

.mpsc-personalisation[data-editor-task="blank-build"] .mpsc-layer-toolbar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
}

.mpsc-personalisation[data-editor-task="blank-build"] .mpsc-surface-background-controls {
	margin-bottom: .55rem;
}

/* Laptop is a distinct constrained-height class. Keep task actions compact
 * without changing the accepted workspace or preview architecture. */
@media (min-width: 900px) and (max-height: 800px) {
	.mpsc-editor-task-note {
		margin-bottom: .45rem;
	}
	.mpsc-personalisation[data-editor-task="layout-fill"] .mpsc-starting-layout-fill,
	.mpsc-personalisation[data-editor-task="layout-review"] .mpsc-starting-layout-fill,
	.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-layer-properties,
	.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-layer-properties {
		margin-top: .25rem;
	}
}

/* Tablet portrait behaves as a touch-first stacked task. Tablet landscape may
 * retain the existing split workspace, but controls still stay within the task. */
@media (min-width: 600px) and (max-width: 899px) {
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-fill-label,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-slot-ready,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-text-input {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.mpsc-editor-task-note {
		font-size: .88rem;
	}
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-fill-label,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-slot-ready,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-text-input,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-remove-slot {
		grid-column: 1 / -1;
	}
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-remove-slot {
		justify-self: start;
	}
	.mpsc-starting-layout-replace-actions {
		grid-template-columns: minmax(0, 1fr);
	}
	.mpsc-editor-task-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.mpsc-editor-task-actions .button,
	.mpsc-replace-primary-image,
	.mpsc-layer-tools-launch {
		width: 100% !important;
	}
}

/* rc.243 tablet-landscape task containment. At 900-1100px the accepted
 * split workspace leaves a deliberately narrow editor column, so prepared
 * layout review rows use one information line followed by three bounded
 * actions rather than inheriting the wider desktop five-column row. */
@media (min-width: 900px) and (max-width: 1100px) {
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-fill-label,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-slot-ready,
	.mpsc-starting-layout-fill-row[data-slot-ready="yes"] > .mpsc-starting-layout-text-input {
		grid-column: 1 / -1;
	}
}

/* rc.243 Artwork choices are four equal customer decisions. Keep them in a
 * predictable 4-across desktop/laptop row and 2-by-2 touch layout rather than
 * inheriting the older three-choice grid. */
.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	max-width: 900px;
}

.mpsc-workspace-artwork-step .mpsc-customer-route-card {
	align-items: stretch;
	justify-content: flex-start;
	height: 100%;
	box-sizing: border-box;
}

@media (max-width: 899px) {
	.mpsc-workspace-artwork-step .mpsc-customer-route-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
}

/* rc.243 adjustment tasks keep the exit action at the top of the bounded
 * controls. It remains sticky while the customer moves through longer image
 * or text controls, so returning to Review/Build never requires hunting. */
.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor,
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor,
.mpsc-personalisation[data-editor-task="freeform-more"] .mpsc-component-editor[data-task-active="yes"] .mpsc-advanced-layer-editor {
	display: flex !important;
	flex-direction: column;
}

.mpsc-personalisation[data-editor-task="layout-adjust"] .mpsc-editor-task-actions,
.mpsc-personalisation[data-editor-task="blank-adjust"] .mpsc-editor-task-actions,
.mpsc-personalisation[data-editor-task="freeform-more"] .mpsc-editor-task-actions {
	order: -1;
	position: sticky;
	top: 0;
	z-index: 4;
	margin: 0 0 .55rem;
	padding: .2rem 0 .55rem;
	background: rgba(248, 250, 252, .98);
	border-bottom: 1px solid rgba(15, 23, 42, .12);
}


/* rc.244 focused staging correction: keep the four Artwork choices equal,
 * hide the top-level saved-artwork source while a layout/blank subtask owns
 * Artwork, and keep prepared-layout actions readable in the actual editor pane. */
.mpsc-personalisation[data-composition-start-mode="layout"] .mpsc-workspace-artwork-step .mpsc-inline-artwork-library,
.mpsc-personalisation[data-composition-start-mode="blank"] .mpsc-workspace-artwork-step .mpsc-inline-artwork-library {
	display: none !important;
}

.mpsc-starting-layout-fill-row[data-slot-role="artwork"] > .button,
.mpsc-starting-layout-fill-row[data-slot-role="artwork"] > .button-link-delete {
	min-height: 40px;
	padding: .34rem .4rem;
	font-size: .78rem;
	line-height: 1.15;
	text-align: center;
	justify-content: center;
	overflow-wrap: anywhere;
}

.mpsc-layer-image-adjust-help,
.mpsc-layer-crop-help {
	margin: .25rem 0 .55rem;
	font-size: .82rem;
	line-height: 1.4;
	color: #4b5563;
}

.mpsc-layer-image-adjust-help[hidden] {
	display: none !important;
}

.mpsc-layer-crop-panel > summary {
	font-weight: 700;
}

/* rc.268 Creator artwork scene expansion */
.mpsc-expand-scene-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 12px;
	align-items: center;
	margin: 12px 0;
	padding: 12px;
	border: 1px solid rgba(7, 17, 43, 0.2);
	border-radius: 8px;
	background: rgba(250, 247, 238, 0.78);
}
.mpsc-expand-scene-panel[hidden] { display: none !important; }
.mpsc-expand-scene-copy { min-width: 0; grid-column: 1 / -1; }
.mpsc-expand-scene-warning { grid-column: 1 / -1; margin: 0; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.mpsc-expand-scene-button,
.mpsc-expand-scene-stop-waiting { justify-self: start; max-width: 100%; white-space: normal; }
.mpsc-expand-scene-copy strong,
.mpsc-expand-scene-copy span { display: block; }
.mpsc-expand-scene-copy span,
.mpsc-expand-scene-note { font-size: 0.88em; line-height: 1.4; }
.mpsc-expand-scene-note { grid-column: 1 / -1; margin: 0; }
.mpsc-expand-credit-link { grid-column: 1 / -1; justify-self: start; font-weight: 650; }
.mpsc-expand-credit-link[hidden] { display: none !important; }
.mpsc-expand-scene-progress {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 24px;
}
.mpsc-expand-scene-progress[hidden] { display: none !important; }
.mpsc-expand-scene-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(7, 17, 43, 0.25);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: mpsc-expand-scene-spin 0.8s linear infinite;
	flex: 0 0 auto;
}
.mpsc-expand-scene-panel[data-expand-scene-state="ready"] { border-color: rgba(32, 118, 75, 0.55); }
.mpsc-expand-scene-panel[data-expand-scene-state="failed"] { border-color: rgba(170, 39, 39, 0.55); }
@keyframes mpsc-expand-scene-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
	.mpsc-expand-scene-panel { grid-template-columns: 1fr; }
	.mpsc-expand-scene-button,
	.mpsc-expand-scene-stop-waiting { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.mpsc-expand-scene-spinner { animation-duration: 1.8s; }
}

/* rc.268 approved source crop controls for scene expansion. */
.mpsc-expand-scene-crop {
	grid-column: 1 / -1;
	padding: .55rem .65rem;
	border: 1px solid rgba(7, 17, 43, .14);
	border-radius: 6px;
	background: rgba(255, 255, 255, .62);
}
.mpsc-expand-scene-crop > summary {
	cursor: pointer;
	font-weight: 700;
}
.mpsc-expand-scene-crop > p {
	margin: .45rem 0 .65rem;
	font-size: .82rem;
	line-height: 1.4;
}
.mpsc-expand-scene-crop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem .9rem;
}
.mpsc-expand-scene-crop-grid label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .25rem .5rem;
	align-items: center;
	font-size: .82rem;
	font-weight: 600;
}
.mpsc-expand-scene-crop-grid input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
}
@media (max-width: 600px) {
	.mpsc-expand-scene-crop-grid { grid-template-columns: minmax(0, 1fr); }
}

/* rc351: mobile double-sided T-shirt presentation correction.
 * This is presentation-only. It does not alter Product Family geometry,
 * artwork state, saved design data, preview calibration or production output. */
@media (max-width: 899px) {
	body.mpsc-workspace-open,
	html.mpsc-workspace-open {
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace:not([hidden]) {
		z-index: 2147483000 !important;
		background: #fff;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-shell {
		grid-template-rows: minmax(44px, auto) 40px minmax(0, 1fr) auto !important;
		min-height: 0;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-header {
		min-height: 44px;
		padding: .2rem .35rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-step {
		min-height: 40px;
		padding: .25rem .3rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-layout {
		min-height: 0;
		overflow: hidden;
	}

	/* Portrait A3 Front/Back surfaces must not consume most of a phone screen.
	 * Keep the complete surface visible but reserve the majority of the viewport
	 * for the actual editing controls. */
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot {
		position: relative !important;
		top: auto !important;
		flex: 0 0 auto;
		height: auto;
		min-height: 0;
		max-height: min(28dvh, 184px);
		padding: .12rem .22rem;
		box-shadow: none;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-panel,
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-wrap {
		height: auto;
		min-height: 0;
		max-height: min(28dvh, 184px);
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: min(27dvh, 176px) !important;
		object-fit: contain;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-contextual-preview-product {
		width: min(100%, calc(min(27dvh, 176px) * var(--mpsc-context-product-aspect))) !important;
		height: auto;
		max-height: min(27dvh, 176px) !important;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-preview {
		width: 100% !important;
		height: auto !important;
		max-height: 100% !important;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-scroll-region {
		min-height: 0;
		padding-bottom: max(.75rem, env(safe-area-inset-bottom));
		scroll-padding-top: 3.5rem;
		scroll-padding-bottom: max(4rem, env(safe-area-inset-bottom));
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor {
		padding: .3rem .45rem .8rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-heading {
		margin: 0 0 .08rem;
		font-size: 1rem;
		line-height: 1.15;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-editor .mpsc-editor-status {
		margin: 0 0 .22rem;
		font-size: .76rem;
		line-height: 1.25;
	}

	/* The selected surface and the selector already communicate the Front/Back
	 * requirement. The longer duplicate note is visual clutter on a phone. */
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-component-choice-note {
		display: none !important;
	}

	/* Keep Front/Back available while the controls scroll, but present it as one
	 * compact segmented row rather than a second large card. */
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-component-switcher {
		position: sticky;
		top: 0;
		z-index: 18;
		grid-template-columns: auto repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: .3rem;
		margin: .1rem 0 .4rem;
		padding: .22rem;
		border-radius: 7px;
		box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-component-switcher-label {
		grid-column: auto;
		padding: 0 .15rem;
		font-size: .74rem;
		font-weight: 700;
		white-space: nowrap;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-component-switcher-button {
		min-height: 44px;
		padding: .38rem .45rem;
		font-size: .9rem;
		line-height: 1.1;
	}

	/* Front/Back is already shown by the persistent selector. Flatten the active
	 * fieldset so the selected surface name is not repeated as a large second
	 * heading and the controls align cleanly to the phone width. */
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-component-editor {
		position: relative;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-component-editor > legend {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-mobile-tool-tabs {
		display: flex;
		gap: .3rem;
		margin: 0 0 .35rem;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-mobile-tool-button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 40px;
		padding: .38rem .45rem;
		border: 1px solid var(--mpsc-ui-border);
		background: #fff;
		font-size: .84rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-workspace-editor .mpsc-upload-row {
		margin-bottom: .4rem;
		padding: .45rem;
		border: 1px solid var(--mpsc-ui-border);
		border-radius: 7px;
		background: #fff;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-workspace-editor .mpsc-upload-row > label,
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-workspace-editor .mpsc-upload-row > small {
		font-size: .76rem;
		line-height: 1.25;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-workspace-editor input[type="file"] {
		padding: .25rem;
		border: 1px solid var(--mpsc-ui-border);
		border-radius: 6px;
		background: #fff;
		font-size: .78rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-workspace-editor input[type="file"]::file-selector-button {
		min-height: 36px;
		margin-right: .4rem;
		padding: .35rem .55rem;
		border: 1px solid var(--mpsc-ui-border);
		border-radius: 5px;
		background: var(--mpsc-ui-surface-muted);
		color: var(--mpsc-ui-ink);
		font: inherit;
		font-weight: 700;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-quality-panel {
		margin-top: .45rem;
		padding: .55rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer {
		position: relative;
		min-height: 52px;
		padding: .3rem .4rem max(.3rem, env(safe-area-inset-bottom));
		border-top: 1px solid var(--mpsc-ui-border);
		box-shadow: 0 -2px 7px rgba(15, 23, 42, .08);
	}
}

@media (max-width: 899px) and (max-height: 700px) {
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot,
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-panel,
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview-wrap {
		max-height: min(23dvh, 150px);
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-preview {
		max-height: min(22dvh, 142px) !important;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-preview-slot .mpsc-editor-contextual-preview .mpsc-contextual-preview-product {
		width: min(100%, calc(min(22dvh, 142px) * var(--mpsc-context-product-aspect))) !important;
		max-height: min(22dvh, 142px) !important;
	}
}

/* rc351: compact the real optional Front/Back assignment controls on phones.
 * This closes the presentation gap exposed by staging, where the real T-shirt
 * Product Family renders the shared/separate assignment choice above Surface. */
@media (max-width: 899px) {
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment {
		gap: .22rem;
		margin: .05rem 0 .32rem;
		padding: .34rem;
		border-radius: 7px;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment-group legend {
		margin: 0 0 .18rem;
		font-size: .82rem;
		line-height: 1.15;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment-options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .28rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment-options label {
		align-items: center;
		width: auto;
		min-height: 48px;
		padding: .3rem .34rem;
		gap: .3rem;
		font-size: .77rem;
		line-height: 1.15;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment-options input {
		width: 18px;
		height: 18px;
		margin: 0;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer {
		display: block;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-save-status:empty {
		display: none;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .4rem;
		width: 100%;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer-actions .button:not([hidden]) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		max-width: none;
		padding: .42rem .35rem;
		font-size: .78rem;
		line-height: 1.15;
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 370px) {
	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-artwork-assignment-options label {
		font-size: .72rem;
		padding: .28rem;
	}

	.mpsc-personalisation[data-editor-structure-mode="double-sided"] .mpsc-design-workspace[data-step="design"] .mpsc-workspace-footer-actions .button:not([hidden]) {
		font-size: .73rem;
	}
}

/* rc352: mobile Artwork/source chooser containment correction.
 * The Artwork step must fit the actual phone viewport before a source is
 * selected. This is presentation-only and does not alter artwork state,
 * Product Family geometry, calibration or production output. */
@media (max-width: 899px) {
	.mpsc-design-workspace[data-step="artwork"],
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-shell,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-layout,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-scroll-region,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-editor,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-artwork-step,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-routes,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-grid,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-library,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-body,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-list,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-grid {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-workspace-editor {
		padding-inline: .5rem;
		overflow-x: hidden;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-card {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-card strong,
	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-card > span:not(.mpsc-customer-route-number) {
		display: block;
		min-width: 0;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-item {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}

/* A phone is not wide enough for four verbose source decisions in a forced
 * 2-by-2 layout once real browser/theme button metrics are applied. Keep the
 * cards single-column on phone widths. The dedicated scroll region makes the
 * extra vertical length safe and predictable. */
@media (max-width: 520px) {
	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: .5rem;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-customer-route-card {
		height: auto;
		min-height: 0;
		padding: .72rem .75rem;
		align-items: stretch;
		justify-content: flex-start;
		text-align: left;
	}

	.mpsc-design-workspace[data-step="artwork"] .mpsc-inline-artwork-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .55rem;
		justify-content: stretch;
	}
}

/* rc354: browser top-layer workspace containment correction.
 * The product workspace is promoted with the Popover API when supported so
 * theme/site ancestors cannot establish a containing block for the fixed
 * overlay. Existing fixed positioning remains the non-Popover fallback. */
.mpsc-design-workspace[popover] {
	box-sizing: border-box;
	margin: 0;
	border: 0;
	max-width: none;
	max-height: none;
}

.mpsc-design-workspace[popover]:popover-open {
	position: fixed;
	inset: 0 !important;
	width: 100vw;
	height: 100dvh;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
}

.mpsc-design-workspace[popover]::backdrop {
	background: transparent;
}

@media (min-width: 900px) {
	.mpsc-design-workspace[popover]:popover-open {
		padding: 20px;
		background: transparent;
	}
}