/* =========================================================
   00. DESIGN SYSTEM
========================================================= */
:root {
	--mp-color-primary: #464646;
	--mp-color-secondary: #616161;
	--mp-color-accent: #eeb027;
	--mp-color-brand: #026c7c;
	--mp-color-ink: #101828;
	--mp-color-black: #000000;
	--mp-color-surface: #ffffff;
	--mp-color-primary-tint: color-mix(in srgb, var(--mp-color-primary) 3%, var(--mp-color-surface));
	--mp-color-secondary-24: color-mix(in srgb, var(--mp-color-secondary) 24%, var(--mp-color-surface));
	--mp-color-secondary-24a: rgb(from var(--mp-color-secondary) r g b / 0.24);
	--mp-color-secondary-30: rgb(from var(--mp-color-secondary) r g b / 0.3);
	--mp-color-secondary-35: rgb(from var(--mp-color-secondary) r g b / 0.35);
	--mp-color-secondary-40: rgb(from var(--mp-color-secondary) r g b / 0.4);
	--mp-color-secondary-65: rgb(from var(--mp-color-secondary) r g b / 0.65);
	--mp-color-secondary-78: rgb(from var(--mp-color-secondary) r g b / 0.78);
	--mp-color-brand-tint: color-mix(in srgb, var(--mp-color-brand) 18%, var(--mp-color-surface));
	--mp-color-brand-06: rgb(from var(--mp-color-brand) r g b / 0.06);
	--mp-color-brand-08: rgb(from var(--mp-color-brand) r g b / 0.08);
	--mp-color-brand-14: rgb(from var(--mp-color-brand) r g b / 0.14);
	--mp-color-brand-16: rgb(from var(--mp-color-brand) r g b / 0.16);
	--mp-color-brand-42: rgb(from var(--mp-color-brand) r g b / 0.42);
	--mp-color-accent-10: rgb(from var(--mp-color-accent) r g b / 0.1);
	--mp-color-accent-14: rgb(from var(--mp-color-accent) r g b / 0.14);
	--mp-color-ink-18: rgb(from var(--mp-color-ink) r g b / 0.18);
	--mp-color-ink-44: rgb(from var(--mp-color-ink) r g b / 0.44);
	--mp-color-black-04: color-mix(in srgb, var(--mp-color-black) 4%, var(--mp-color-surface));
	--mp-color-black-04a: rgb(from var(--mp-color-black) r g b / 0.04);
	--mp-color-black-10: rgb(from var(--mp-color-black) r g b / 0.1);
	--mp-color-black-72: rgb(from var(--mp-color-black) r g b / 0.72);
	--mp-color-black-84: rgb(from var(--mp-color-black) r g b / 0.84);

	--mp-font-family-base: "Montserrat", Arial, sans-serif;
	--mp-font-weight-regular: 400;
	--mp-font-weight-medium: 500;
	--mp-font-weight-semibold: 600;
	--mp-font-weight-bold: 700;
	--mp-font-size-xs: 1rem;
	--mp-line-height-xs: 1.5rem;
	--mp-font-size-sm: 1.125rem;
	--mp-line-height-sm: 1.75rem;
	--mp-font-size-base: 1.25rem;
	--mp-line-height-base: 1.875rem;
	--mp-font-size-xl: 2rem;
	--mp-line-height-xl: 2.625rem;
	--mp-font-size-2xl: 2.625rem;
	--mp-line-height-2xl: 3.25rem;
	--mp-font-size-3xl: 3.75rem;
	--mp-line-height-3xl: 4.375rem;
	--mp-line-height-none: 1lh;
	--mp-font-size-h1: var(--mp-font-size-3xl);
	--mp-line-height-h1: var(--mp-line-height-3xl);
	--mp-font-size-h2: var(--mp-font-size-2xl);
	--mp-line-height-h2: var(--mp-line-height-2xl);
	--mp-font-size-h3: var(--mp-font-size-xl);
	--mp-line-height-h3: var(--mp-line-height-xl);
	--mp-font-size-body: var(--mp-font-size-base);
	--mp-line-height-body: var(--mp-line-height-base);
	--mp-font-size-body-sm: var(--mp-font-size-sm);
	--mp-line-height-body-sm: var(--mp-line-height-sm);
	--mp-font-size-label: var(--mp-font-size-xs);
	--mp-line-height-label: var(--mp-line-height-xs);

	--mp-space-1: 4px;
	--mp-space-2: 8px;
	--mp-space-3: 12px;
	--mp-space-4: 16px;
	--mp-space-5: 20px;
	--mp-space-6: 24px;
	--mp-space-7: 28px;
	--mp-space-8: 32px;
	--mp-space-10: 40px;
	--mp-space-12: 48px;
	--mp-space-20: 80px;
	--mp-space-24: 96px;

	--mp-radius-sm: 6px;
	--mp-radius-md: 8px;
	--mp-radius-pill: 100px;
	--mp-shadow-card: 0 0 20px var(--mp-color-black-10);
	--mp-shadow-modal: 0 24px 64px var(--mp-color-ink-18);
	--mp-shadow-drag: 0 12px 28px var(--mp-color-brand-16);
	--mp-transition-fast: 160ms ease;
	--mp-transition-button: .2s .15s;
}

@media (max-width: 767px) {
	:root {
		--mp-font-size-xs: 1.125rem;
		--mp-line-height-xs: 1.75rem;
		--mp-font-size-sm: 1.125rem;
		--mp-line-height-sm: 1.75rem;
		--mp-font-size-base: 1.125rem;
		--mp-line-height-base: 1.75rem;
		--mp-font-size-xl: 1.5rem;
		--mp-line-height-xl: 2.125rem;
		--mp-font-size-2xl: 2.25rem;
		--mp-line-height-2xl: 2.875rem;
		--mp-font-size-3xl: 2.25rem;
		--mp-line-height-3xl: 2.875rem;
		--mp-font-size-h1: var(--mp-font-size-3xl);
		--mp-line-height-h1: var(--mp-line-height-3xl);
		--mp-font-size-h2: var(--mp-font-size-2xl);
		--mp-line-height-h2: var(--mp-line-height-2xl);
		--mp-font-size-h3: var(--mp-font-size-xl);
		--mp-line-height-h3: var(--mp-line-height-xl);
		--mp-font-size-body: var(--mp-font-size-base);
		--mp-line-height-body: var(--mp-line-height-base);
		--mp-font-size-label: var(--mp-font-size-xs);
		--mp-line-height-label: var(--mp-line-height-xs);
	}
}

/* =========================================================
   01. CONTAINER BASE
========================================================= */
.mp-shell {
	color: var(--mp-color-primary);
	font-family: var(--mp-font-family-base);
	margin: 0 auto;
	max-width: 1180px;
	width: 100%;
}

.mp-header {
	height: 100%;
	align-content: end;
}

.mp-header h2,
.mp-header h3 {
	letter-spacing: 0;
	margin: 0;
}

.mp-eyebrow {
	color: var(--mp-color-brand);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	letter-spacing: 0;
	margin: 0 0 var(--mp-space-2);
	text-transform: uppercase;
}

.mp-notice {
	background: var(--mp-color-brand-tint);
	border: 1px solid var(--mp-color-brand);
	border-radius: var(--mp-radius-sm);
	padding: var(--mp-space-3) var(--mp-space-4);
}

.mp-grid {
	display: grid;
	gap: var(--mp-space-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mp-options {
	display: grid;
	gap: var(--mp-space-4);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mp-shell label {
	display: grid;
	font-weight: var(--mp-font-weight-semibold);
	gap: var(--mp-space-2);
}

.mp-shell input,
.mp-shell select,
.mp-shell textarea {
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	font: inherit;
	font-size: var(--mp-font-size-label);
	line-height: 1.4;
	padding: var(--mp-space-3) var(--mp-space-3);
	width: 100%;
}


/* =========================================================
   02. AÇÕES E STATUS
========================================================= */
.mp-actions {
	align-items: center;
	display: flex;
	gap: var(--mp-space-4);
	justify-content: flex-start;
	padding-top: var(--mp-space-5);
}

.mp-button {
	width: max-content;
	position: relative;
	overflow: hidden;
	border-radius: var(--mp-radius-pill);
	border: 2px solid var(--mp-color-primary) !important;
	padding: var(--mp-space-2) var(--mp-space-4);
	background: transparent !important;
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-semibold);
	color: var(--mp-color-surface) !important;
	fill: currentColor;
	line-height: var(--mp-line-height-xs);
	overflow-wrap: anywhere;
	text-align: center;
	text-wrap: wrap;
	transition: var(--mp-transition-button);
	z-index: 1;
}

.mp-button::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: var(--mp-radius-pill);
	transition: var(--mp-transition-button);
	background: var(--mp-color-primary);
	transform: translateX(0);
	z-index: -1;
}

.mp-button:hover {
	transform: translateY(-3px);
	color: var(--mp-color-primary) !important;
}

.mp-button:hover::before {
	transform: translateX(-100%);
}

.mp-button--ghost {
	background: transparent !important;
	border-color: var(--mp-color-secondary-35) !important;
	color: var(--mp-color-secondary) !important;
}

.mp-button--ghost::before {
	background: transparent;
}

.mp-button--ghost:hover {
	color: var(--mp-color-brand) !important;
}

.mp-button--ghost:hover::before {
	transform: none;
}

[type=button]:is(:focus, :hover), 
[type=submit]:is(:focus, :hover), 
button:is(:focus, :hover, .is-active) {
	background-color: transparent !important;
}

.mp-status {
	color: var(--mp-color-brand);
	font-weight: var(--mp-font-weight-bold);
}

.mp-status.is-error {
	color: var(--mp-color-accent);
}


/* =========================================================
   03. WIZARD - BASE FINAL
========================================================= */
.mp-wizard {
	color: var(--mp-color-secondary);
	font-family: var(--mp-font-family-base);
	display: none;
}

.mp-wizard.is-visible {
	display: block;
}

.mp-wizard__form {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--mp-color-surface-overlay) !important;
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
}

.mp-wizard-card {
	background: var(--mp-color-surface);
	border: 0;
	border-radius: var(--mp-radius-sm);
	box-shadow: var(--mp-shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-7);
	overflow: visible;
	padding: var(--mp-space-12);
	position: relative;
	width: 100%;
	max-width: 1070px;
}

.mp-wizard__chrome {
	align-items: flex-start;
	display: flex;
	justify-content: center;
	min-height: 48px;
	position: relative;
}

.mp-wizard__header {
	margin-bottom: var(--mp-space-5);
	min-height: 68px;
	padding-left: var(--mp-space-12);
}

.mp-wizard__header h2 {
	font-size: var(--mp-font-size-xl);
	line-height: var(--mp-line-height-xl);
}

.mp-wizard__body {
	display: grid;
	flex: 1;
	min-height: 0;
}

.mp-wizard .mp-step {
	display: none;
	min-height: 0;
	padding: 0;
}

.mp-wizard .mp-step.is-active {
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-5);
}

.mp-wizard .mp-step h3 {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-h3);
	font-weight: var(--mp-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--mp-line-height-h3);
	margin: 0 auto;
	text-align: center;
}


/* =========================================================
   04. LOGO / NAVEGAÇÃO DO WIZARD
========================================================= */
.mp-wizard-logo {
	align-items: baseline;
	display: inline-flex;
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	gap: var(--mp-space-1);
	letter-spacing: 0;
	line-height: 1;
}

.mp-wizard-logo span,
.mp-wizard-logo strong {
	color: var(--mp-color-brand);
}

.mp-wizard-logo em {
	color: var(--mp-color-accent);
	font-size: var(--mp-font-size-label);
	font-style: normal;
}

.mp-wizard-logo-img {
	display: block;
	height: 48px !important;
	object-fit: contain;
}

.mp-wizard-logo-stack {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: var(--mp-space-1);
}

.mp-wizard-logo-tagline {
	display: block;
	height: 8px;
	object-fit: contain;
}

.mp-wizard-logo-stack + .mp-step-close {
	top: 2px;
}

.mp-wizard .mp-step-back,
.mp-wizard .mp-step-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	color: var(--mp-color-primary);
	display: inline-flex;
	font-family: Arial, sans-serif;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 2px;
}

.mp-wizard .mp-step-back {
	font-size: var(--mp-font-size-sm);
	height: 18px;
	left: 0;
	line-height: var(--mp-line-height-none);
	width: 12px;
}

.mp-wizard .mp-step-close {
	font-size: var(--mp-font-size-base);
	font-weight: 300;
	height: 20px;
	right: 0;
	transform: rotate(45deg);
	width: 20px;
}

.mp-wizard .mp-step-back img,
.mp-wizard .mp-step-close img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.mp-shell .mp-step-back:hover,
.mp-shell .mp-step-close:hover {
	background: transparent;
	color: var(--mp-color-brand);
}

.mp-step-back[hidden],
.mp-wizard__actions [hidden] {
	display: none;
}


/* =========================================================
   05. PROGRESSO
========================================================= */
.mp-step-meter {
	margin: auto;
	max-width: 690px;
	width: 100%;
}

.mp-step-meter__labels {
	color: var(--mp-color-secondary);
	display: flex;
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	justify-content: space-between;
	line-height: var(--mp-line-height-xs);
	margin-bottom: var(--mp-space-2);
	opacity: 0.6;
}

.mp-progress {
	background: var(--mp-color-secondary-24);
	border-radius: 100px;
	height: 16px;
	left: auto;
	overflow: hidden;
	position: static;
	right: auto;
	top: auto;
	width: 100%;
}

.mp-progress span {
	background: var(--mp-color-brand);
	display: block;
	height: 100%;
	transition: width 180ms ease;
	width: 0;
}


/* =========================================================
   06. TEXTOS E APOIO
========================================================= */
.mp-step-copy {
	margin: auto;
	max-width: 970px;
	text-align: center;
}

.mp-step-copy p {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-body-sm);
	font-weight: var(--mp-font-weight-regular);
	line-height: var(--mp-line-height-body-sm);
	margin: var(--mp-space-5) auto 0;
	max-width: 802px;
	opacity: 1;
	text-align: center;
}

.mp-helper-link {
	color: var(--mp-color-brand);
	display: inline-block;
	font-size: var(--mp-font-size-body-sm);
	font-weight: var(--mp-font-weight-regular);
	line-height: var(--mp-line-height-body-sm);
	margin-top: var(--mp-space-5);
	text-align: center;
	text-decoration: underline;
}

.mp-marble-preview {
    border-radius: var(--mp-radius-sm);
    height: 183px;
    margin: var(--mp-space-2) auto;
    max-width: 454px;
    overflow: hidden;
    width: 100%;
}

.mp-marble-preview img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}


/* =========================================================
   07. CAMPOS DE FORMULÁRIO
========================================================= */
.mp-contact-fields {
	display: grid;
	gap: var(--mp-space-4);
	margin: 0 auto;
	max-width: 690px;
	width: 100%;
}

.mp-contact-fields label,
.mp-project-name,
.mp-wizard .mp-step > label:not(.mp-other-format) {
	color: var(--mp-color-secondary);
	display: grid;
	font-size: var(--mp-font-size-body);
	font-weight: var(--mp-font-weight-bold);
	gap: var(--mp-space-3);
	line-height: var(--mp-line-height-body);
	max-width: 690px;
	width: 100%;
	margin: 0 auto;
}

.mp-contact-fields input,
.mp-project-name input,
.mp-wizard .mp-step > label input {
	border: 1px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	font-weight: var(--mp-font-weight-regular);
	padding: var(--mp-space-2) var(--mp-space-4);
	width: 100%;
}

.mp-wizard .mp-step > label input[type="file"] {
	padding: var(--mp-space-3);
}

.mp-contact-fields input::placeholder,
.mp-project-name input::placeholder,
.mp-wizard .mp-step > label input::placeholder {
	color: var(--mp-color-secondary-65);
}


/* =========================================================
   08. OPÇÕES COM IMAGEM
========================================================= */
.mp-image-options {
	display: grid;
	gap: var(--mp-space-5);
}

.mp-image-options--formats {
	grid-template-columns: repeat(4, 1fr);
}

.mp-image-options:not(.mp-image-options--formats) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 926px;
}

.mp-image-options--binary {
	grid-template-columns: repeat(2, minmax(120px, 180px));
}

.mp-shell .mp-image-option {
	display: block;
	font-weight: var(--mp-font-weight-bold);
}

.mp-image-option input,
.mp-pill-options input {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.mp-image-option__box {
	align-content: space-between;
	aspect-ratio: auto;
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-sm);
	box-shadow: none;
	color: var(--mp-color-secondary);
	cursor: pointer;
	display: grid;
	gap: var(--mp-space-4);
	justify-items: center;
	padding: var(--mp-space-4);
	text-align: center;
	transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.mp-image-option__box img {
	aspect-ratio: 7 / 5;
	display: block;
	max-width: 180px;
	object-fit: contain;
	object-position: top;
	width: 100%;
}

.mp-image-option__box strong {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-body);
	font-weight: var(--mp-font-weight-bold);
	order: -1;
}

.mp-image-options--appliances .mp-image-option__box img {
	max-height: 80px;
	object-fit: contain;
}

.mp-image-options--appliances .mp-image-option__box strong {
	font-weight: var(--mp-font-weight-regular);
	order: 1;
}

.mp-image-option input:checked + .mp-image-option__box {
	border-color: var(--mp-color-brand);
	box-shadow: inset 0 0 0 1px var(--mp-color-brand);
}

.mp-other-format {
	width: 100%;
}

.mp-other-format input {
	border: 1px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-body);
	font-weight: var(--mp-font-weight-bold);
	height: 45px;
	line-height: var(--mp-line-height-xs);
	padding: var(--mp-space-2) var(--mp-space-24);
	width: 100%;
}

.mp-other-format input::placeholder {
	color: var(--mp-color-secondary);
	opacity: 1;
}


/* =========================================================
   09. MEDIDAS / PAREDES / UPLOAD
========================================================= */
.mp-measure-stage {
	align-items: start;
	display: grid;
	gap: var(--mp-space-20);
	grid-template-columns: 330px minmax(0, 1fr);
	margin: 0 auto;
	max-width: 820px;
}

.mp-measure-preview {
	border: 0;
	border-radius: var(--mp-radius-sm);
	padding: 0;
}

.mp-measure-preview img {
	display: block;
	object-fit: contain;
	width: 100%;
}

.mp-wall-inputs {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-wall-row {
	border: 0;
	border-radius: 6px;
	display: grid;
	gap: var(--mp-space-2);
	grid-template-columns: 1fr;
	padding: 0;
}

.mp-wall-row strong {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-body-sm);
	font-weight: var(--mp-font-weight-medium);
	grid-column: 1 / -1;
	line-height: var(--mp-line-height-xs);
}

.mp-wall-row label {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	gap: var(--mp-space-1);
	line-height: var(--mp-line-height-xs);
}

.mp-wall-row input {
	border: 1px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-sm);
}

.mp-file-field {
	margin: var(--mp-space-5) auto 0;
	max-width: 690px;
}


/* =========================================================
   10. OPÇÕES EM PILLS
========================================================= */
.mp-pill-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-3);
	justify-content: center;
	margin: 0 auto;
}

.mp-pill-options--binary {
	max-width: 500px;
}

.mp-shell .mp-pill-options label {
	display: block;
}

.mp-pill-options span {
	align-items: center;
	background: var(--mp-color-surface);
	border: 2px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-pill);
	color: var(--mp-color-secondary);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--mp-font-size-body);
	font-weight: var(--mp-font-weight-medium);
	height: 53px;
	justify-content: center;
	line-height: var(--mp-line-height-base);
	min-width: 236px;
	padding: var(--mp-space-2) var(--mp-space-4);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mp-pill-options input:checked + span {
	border-color: var(--mp-color-brand);
	box-shadow: inset 0 0 0 1px var(--mp-color-brand);
}

.mp-counter-depth-other {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	line-height: var(--mp-line-height-xs);
	margin: var(--mp-space-3) auto 0;
	max-width: 690px;
	width: 100%;
}

.mp-counter-depth-other[hidden] {
	display: none !important;
}

.mp-counter-depth-other input {
	border: 1px solid var(--mp-color-secondary-40);
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	font-weight: var(--mp-font-weight-regular);
	padding: var(--mp-space-2) var(--mp-space-4);
	width: 100%;
}


/* =========================================================
   11. AÇÕES DO WIZARD
========================================================= */
.mp-wizard__actions {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	min-height: 55px;
	padding-top: 0;
}

.mp-wizard__actions .mp-status {
	color: var(--mp-color-brand);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	margin-right: auto;
}


/* =========================================================
   12. PLANNER / LAYOUT / SIDEBAR
========================================================= */
.mp-planner__layout {
	align-items: start;
	display: grid;
	gap: var(--mp-space-3) var(--mp-space-5);
	grid-template-columns: 2fr 1fr;
}

.mp-sidebar {
	padding: var(--mp-space-3) var(--mp-space-5);
}

.mp-sidebar h3 {
	margin-top: 0;
}

.mp-planner-sidebar {
	align-self: stretch;
	background: var(--mp-color-surface);
	display: flex;
	flex-direction: column;
	gap: var(--mp-space-3);
	min-height: 520px;
}

.mp-price-card {
	background: #F0F0F0;
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-2);
	padding: var(--mp-space-4);
}

.mp-price-card__value {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-h2);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-none);
}

.mp-project-card {
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-3);
	padding: var(--mp-space-4);
}

.mp-project-card h3 {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xs);
	margin: 0;
}

.mp-project-card__list {
	display: grid;
	gap: var(--mp-space-1);
	margin: 0;
}

.mp-project-card__list div {
	align-items: baseline;
	display: flex;
	gap: var(--mp-space-2);
	justify-content: space-between;
}

.mp-project-card__list dt,
.mp-project-card__list dd {
	margin: 0;
}

.mp-project-card__list dt {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-semibold);
	line-height: var(--mp-line-height-xs);
}

.mp-project-card__list dd {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xs);
	text-align: right;
}

.mp-stone-card {
	gap: var(--mp-space-4);
}

.mp-stone-card__header {
	align-items: start;
	display: flex;
	gap: var(--mp-space-3);
	justify-content: space-between;
}

.mp-stone-card__header .mp-button {
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
	padding: var(--mp-space-2) var(--mp-space-3);
}

.mp-stone-card__wall {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
	margin: 0;
}

.mp-stone-form {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-stone-form__grid {
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-stone-form__grid label {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
}

.mp-stone-items {
	display: grid;
	gap: var(--mp-space-2);
}

.mp-stone-items__row {
	align-items: center;
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: flex;
	gap: var(--mp-space-3);
	justify-content: space-between;
	padding: var(--mp-space-3);
}

.mp-stone-items__row span {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-semibold);
	line-height: var(--mp-line-height-label);
}

.mp-stone-items__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	justify-content: flex-end;
}

.mp-stone-items__actions .mp-button {
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
	padding: var(--mp-space-2) var(--mp-space-3);
}

.mp-stone-placement {
	background: var(--mp-color-primary-tint);
	border: 1px solid var(--mp-color-brand-42);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-2);
	padding: var(--mp-space-3);
}

.mp-stone-placement p {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
	margin: 0;
}

.mp-sidebar__head {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-sidebar__head h3 {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-xl);
	font-weight: var(--mp-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--mp-line-height-none);
	margin: 0;
}

.mp-category-select {
	color: var(--mp-color-secondary);
	display: grid;
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	gap: var(--mp-space-2);
	line-height: var(--mp-line-height-xs);
	position: relative;
}

.mp-category-select::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  position: absolute;
  right: 10px;
  transition: 0.3s;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
}

.mp-category-select:has(select:focus-visible)::after {
	transform: rotate(180deg);
}

.mp-category-select select {
	appearance: none;
	border: 0;
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	font: inherit;
	font-weight: var(--mp-font-weight-medium);
	padding: 0;
	width: 100%;
}

.mp-category-select select:focus-visible {
	outline: none;
}

.mp-module-grid {
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, 1fr);
	overflow: hidden;
}

.mp-module-grid.is-moving-next .mp-module {
	animation: mp-module-slide-next var(--mp-transition-fast) both;
}

.mp-module-grid.is-moving-prev .mp-module {
	animation: mp-module-slide-prev var(--mp-transition-fast) both;
}

.is-loading-modules .mp-module-grid {
	opacity: 0.72;
	pointer-events: none;
}

@keyframes mp-module-slide-next {
	from {
		transform: translateX(calc(2 * var(--mp-space-24)));
	}

	to {
		transform: translateX(0);
	}
}

@keyframes mp-module-slide-prev {
	from {
		transform: translateX(calc(-2 * var(--mp-space-24)));
	}

	to {
		transform: translateX(0);
	}
}

.mp-module {
	align-items: start;
	background: var(--mp-color-primary-tint) !important;
	border: 1px solid var(--mp-color-secondary-35);
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	cursor: grab;
	display: grid;
	gap: var(--mp-space-2);
	min-width: 0;
	overflow: hidden;
	padding: var(--mp-space-3);
	position: relative;
	text-align: center;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	width: 100%;
	aspect-ratio: 9.5/10;
}

.mp-module__edit {
	align-items: center;
	background: var(--mp-color-black-72) !important;
	border: 0 !important;
	border-radius: var(--mp-radius-pill) !important;
	color: var(--mp-color-surface) !important;
	cursor: pointer;
	display: inline-flex;
	height: 24px;
	justify-content: center;
	opacity: 0;
	padding: 0 !important;
	position: absolute;
	right: var(--mp-space-2);
	top: var(--mp-space-2);
	transition: opacity var(--mp-transition-fast), transform var(--mp-transition-fast);
	width: 24px;
	z-index: 2;
}

.mp-module__edit svg {
	fill: currentColor;
	height: 14px;
	width: 14px;
}

.mp-module:hover .mp-module__edit,
.mp-module:focus .mp-module__edit,
.mp-module:focus-within .mp-module__edit {
	opacity: 1;
}

.mp-module__edit:hover,
.mp-module__edit:focus {
	background: var(--mp-color-black-84) !important;
	transform: scale(1.05);
}

.mp-module__image {
	aspect-ratio: 7/5;
	align-items: center;
	background: var(--mp-color-primary-tint);
	border-radius: var(--mp-radius-sm);
	display: grid;
	justify-items: center;
	margin-bottom: var(--mp-space-1);
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	width: 100%;
	margin: 0;
}

.mp-module__image img {
	display: block;
	height: 100% !important;
	max-height: 100% !important;
	max-width: 100% !important;
	min-height: 0;
	min-width: 0;
	object-fit: contain !important;
	object-position: center;
	width: 100% !important;
}

.mp-module strong {
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	letter-spacing: 0;
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-wrap: wrap;
}

.mp-module span {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	line-height: var(--mp-line-height-xs);
	overflow-wrap: anywhere;
	text-wrap: wrap;
}

.mp-module.is-selected {
	background: var(--mp-color-surface);
	border-color: var(--mp-color-brand);
	box-shadow: inset 0 0 0 1px var(--mp-color-brand);
	color: var(--mp-color-brand);
}

.mp-module--placeholder {
	pointer-events: none;
	visibility: hidden;
}

.mp-pager {
	align-items: center;
	display: flex;
	gap: var(--mp-space-2);
	justify-content: center;
}

.mp-pager__dots {
	align-items: center;
	display: flex;
	gap: var(--mp-space-2);
	justify-content: center;
	min-width: 48px;
}

.mp-pager__button {
	align-items: center;
	background: var(--mp-color-surface) !important;
	border: 1px solid var(--mp-color-secondary-35) !important;
	border-radius: var(--mp-radius-pill) !important;
	color: var(--mp-color-secondary) !important;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--mp-font-size-xl);
	font-weight: var(--mp-font-weight-bold);
	height: 40px;
	justify-content: center;
	line-height: var(--mp-line-height-none);
	padding: 0 !important;
	transition: background var(--mp-transition-fast), border-color var(--mp-transition-fast), color var(--mp-transition-fast), transform var(--mp-transition-fast);
	width: 40px;
}

.mp-pager__button svg {
	color: currentColor;
	height: 20px;
	width: 20px;
}

.mp-pager__button:disabled {
	cursor: default;
	opacity: 0.45;
	transform: none !important;
}

.mp-pager__dot {
	background: var(--mp-color-secondary-24a) !important;
	border: 0 !important;
	border-radius: var(--mp-radius-pill);
	cursor: pointer;
	display: block;
	height: 10px;
	padding: 0 !important;
	transition: background var(--mp-transition-fast), transform var(--mp-transition-fast), width var(--mp-transition-fast);
	width: 10px;
}

.mp-pager__dot.is-active {
	background: var(--mp-color-secondary) !important;
	width: 24px;
}

.mp-add-cart-button {
	align-items: center;
	justify-content: center;
	margin-top: auto;
}


/* =========================================================
   13. CANVAS / PAREDES / RESUMO
========================================================= */
.mp-canvas-area {
	position: relative;
	align-content: start;
	display: grid;
	gap: var(--mp-space-4);
	justify-items: stretch;
	min-width: 0;
	width: 100%;
}

.mp-plan-view {
	background: var(--mp-color-black-04);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: none;
	min-height: 420px;
	overflow: hidden;
	padding: var(--mp-space-4);
	position: relative;
	width: 100%;
}

.mp-plan-view.is-active {
	display: block;
}

.mp-plan-canvas {
	height: 100%;
	min-height: 360px;
	position: relative;
	width: 100%;
}

.mp-planner button,
.mp-planner select {
	box-shadow: none;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.mp-planner button {
	appearance: none;
	-webkit-appearance: none;
	background-image: none;
	text-decoration: none;
}

.mp-planner.is-syncing {
	cursor: progress;
}

.mp-view-switcher {
	align-items: center;
	justify-self: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-1);
	justify-content: center;
	margin: 0;
	padding: var(--mp-space-2);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-pill);
}

.mp-canvas-controls {
	align-items: center;
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: 1fr 3fr 1fr;
	margin: 0 auto;
	width: 100%;
}

.mp-dimension-toggle {
	display: inline-flex;
	justify-self: start;
}

.mp-dimension-toggle input {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.mp-dimension-toggle span {
	align-items: center;
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: 999px;
	color: var(--mp-color-secondary);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	line-height: var(--mp-line-height-none);
	padding: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
	width: 44px;
}

.mp-dimension-toggle span svg {
	display: block;
	height: 20px;
	width: 20px;
}

.mp-dimension-toggle input:checked + span {
	box-shadow: inset 0 0 0 3px var(--mp-color-accent);
	color: var(--mp-color-primary);
}

.mp-view-switcher button {
	align-items: center;
	background: var(--mp-color-surface);
	border-radius: var(--mp-radius-pill);
	border: none;
	color: var(--mp-color-secondary);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	justify-content: center;
	line-height: var(--mp-line-height-xs);
	min-width: 92px;
	padding: var(--mp-space-2) var(--mp-space-4);
	transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.mp-view-switcher button:is(:hover, :focus, .is-active) {
	box-shadow: inset 0 0 0 3px var(--mp-color-accent);
	color: var(--mp-color-primary);
	background-color: transparent !important;
}

.mp-wall {
	background: var(--mp-color-black-04);
	align-items: stretch;
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: none;
	flex-direction: column;
	gap: var(--mp-space-3);
	/* isolation: isolate; */
	justify-content: center;
	overflow-x: hidden;
	overflow-y: hidden;
	padding: var(--mp-space-8);
	width: 100%;
}

.mp-wall.is-active {
	display: flex;
}

.mp-wall.is-focused {
	border-color: var(--mp-color-brand);
	box-shadow: inset 0 0 0 1px var(--mp-color-brand);
	display: flex;
}

.mp-wall.is-zoomed {
	overflow-x: auto;
}

.mp-wall__zoom {
	align-items: center;
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-pill);
	display: inline-flex;
	gap: var(--mp-space-1);
	justify-self: end;
	padding: var(--mp-space-1);
}

.mp-wall__zoom button {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--mp-radius-pill) !important;
	color: var(--mp-color-secondary) !important;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	height: 32px;
	justify-content: center;
	line-height: var(--mp-line-height-none);
	min-width: 32px;
	padding: 0 var(--mp-space-2) !important;
	transition: background var(--mp-transition-fast), color var(--mp-transition-fast);
}

.mp-wall__zoom button svg {
	display: block;
	height: 16px;
	width: 16px;
}

.mp-wall__zoom button:hover,
.mp-wall__zoom button:focus {
	background: var(--mp-color-brand-06) !important;
	color: var(--mp-color-brand) !important;
}

.mp-wall__zoom button:disabled {
	cursor: default;
	opacity: 0.45;
}

.mp-wall-track {
	background: var(--mp-color-black-04);
	border: 2px solid var(--mp-color-secondary);
	border-radius: var(--mp-radius-sm);
	box-sizing: content-box;
	display: block;
	flex: none;
	margin: 0 auto;
	max-width: none;
	position: relative;
	touch-action: none;
}

.mp-wall-track::before,
.mp-wall-track::after {
	background: var(--mp-color-brand-06);
	content: '';
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transition: background-color 160ms ease, opacity 160ms ease;
}

.mp-wall-track::before {
	height: 50%;
	top: 0;
}

.mp-wall-track::after {
	height: 50%;
	top: 50%;
}

.mp-planner.is-dragging-module .mp-wall-track::before,
.mp-planner.is-dragging-module .mp-wall-track::after {
	opacity: 0.12;
}

.mp-wall-track.is-drag-active {
	box-shadow: 0 0 0 3px var(--mp-color-brand-08);
}

.mp-wall-track.is-zone-upper::before,
.mp-wall-track.is-zone-base::after {
	background: var(--mp-color-brand-16);
	opacity: 1;
}

.mp-wall-track.is-zone-invalid {
	box-shadow: 0 0 0 3px var(--mp-color-accent-10);
}

.mp-wall-track.is-zone-invalid::before,
.mp-wall-track.is-zone-invalid::after {
	background: var(--mp-color-accent-14);
}

.mp-wall-track.is-zone-invalid.is-zone-upper::before,
.mp-wall-track.is-zone-invalid.is-zone-base::after {
	opacity: 1;
}

.mp-wall-reserve {
	background: var(--mp-color-secondary);
	bottom: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 1;
}

.mp-wall-stone {
	background: var(--mp-color-secondary-35);
	border-radius: var(--mp-radius-sm);
	position: absolute;
	z-index: 1;
}

.mp-layout-item {
	background: transparent;
	border: 0;
	border-radius: var(--mp-radius-sm);
	cursor: grab;
	left: 0;
	overflow: visible;
	position: absolute;
	top: 0;
	touch-action: none;
	user-select: none;
	will-change: left;
	z-index: auto;
}

.mp-layout-item__dimensions {
	color: var(--mp-color-black);
	display: none;
	inset: 0;
	/* mix-blend-mode: difference; */
	pointer-events: none;
	position: absolute;
	z-index: 99;
}

.mp-planner.is-show-dimensions .mp-layout-item__dimensions {
	display: block;
}

.mp-layout-item__measure {
	position: absolute;
}

.mp-layout-item__measure::before,
.mp-layout-item__measure::after {
	background: currentColor;
	content: '';
	position: absolute;
}

.mp-layout-item__measure-value {
	color: currentColor;
	font-size: var(--mp-font-size-label);
	line-height: 1;
	position: absolute;
	text-shadow: none;
	white-space: nowrap;
}

.mp-layout-item__measure--width {
	border-top: 1px solid currentColor;
	inset: -10px 1px auto 1px;
}

.mp-layout-item__measure--width::before,
.mp-layout-item__measure--width::after {
	height: 20px;
	top: -5px;
	width: 1px;
}

.mp-layout-item__measure--width::before {
	left: 0;
}

.mp-layout-item__measure--width::after {
	right: 0;
}

.mp-layout-item__measure--width .mp-layout-item__measure-value {
	left: 50%;
	top: -4px;
	transform: translate(-50%, -100%);
}

.mp-layout-item__measure--height {
	border-left: 1px solid currentColor;
	bottom: 1px;
	left: -10px;
	top: 1px;
}

.mp-layout-item__measure--height::before,
.mp-layout-item__measure--height::after {
	height: 1px;
	left: -5px;
	width: 20px;
}

.mp-layout-item__measure--height::before {
	top: 0;
}

.mp-layout-item__measure--height::after {
	bottom: 0;
}

.mp-layout-item__measure--height .mp-layout-item__measure-value {
	left: 14px;
	top: 50%;
	transform: translate(-100%, -50%) rotate(-90deg);
}

.mp-layout-item.is-dragging {
	filter: drop-shadow(var(--mp-shadow-drag));
	cursor: grabbing;
	opacity: 0.94;
	z-index: 3;
}

.mp-layout-item.is-dragging .mp-layout-item__dimensions {
	color: var(--mp-color-black);
}

.mp-layout-item.is-stone-positioned {
	cursor: pointer;
}

.mp-plan-wall,
.mp-plan-stone,
.mp-plan-item {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--mp-radius-sm);
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
}

.mp-plan-wall {
	background: color-mix(in srgb, var(--mp-color-secondary) 18%, var(--mp-color-surface));
	border: 1px solid var(--mp-color-secondary-35);
	cursor: pointer;
}

.mp-plan-wall.is-active {
	box-shadow: inset 0 0 0 2px var(--mp-color-brand);
}

.mp-plan-wall__label {
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-pill);
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
	padding: 0 var(--mp-space-2);
}

.mp-plan-stone {
	background: var(--mp-color-secondary-35);
	border: 1px solid var(--mp-color-secondary);
	cursor: crosshair;
}

.mp-plan-stone.is-target {
	box-shadow: inset 0 0 0 2px var(--mp-color-brand);
}

.mp-plan-stone.is-disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.mp-plan-stone.is-active {
	box-shadow: inset 0 0 0 2px var(--mp-color-brand);
}

.mp-plan-item {
	background: var(--mp-color-brand-16);
	border: 1px solid var(--mp-color-brand);
	color: var(--mp-color-secondary);
	cursor: grab;
	font-size: 12px;
	font-weight: var(--mp-font-weight-bold);
	line-height: 1.1;
	overflow: hidden;
	padding: var(--mp-space-2);
}

.mp-plan-item.is-selected {
	box-shadow: inset 0 0 0 2px var(--mp-color-accent);
}

.mp-plan-item--preview {
	border-style: dashed;
	cursor: default;
	opacity: 0.8;
	pointer-events: none;
}

.mp-layout-item__remove {
	align-items: center;
	background: var(--mp-color-black-72) !important;
	border: 0;
	border-radius: 999px;
	color: var(--mp-color-surface) !important;
	cursor: pointer;
	display: inline-flex;
	font-size: var(--mp-font-size-sm);
	height: 24px;
	justify-content: center;
	line-height: var(--mp-line-height-none);
	opacity: 0;
	padding: 0;
	position: absolute;
	right: 6px;
	top: 6px;
	transition: opacity 160ms ease, transform 160ms ease;
	width: 24px;
	z-index: 4;
}

.mp-layout-item:hover .mp-layout-item__remove,
.mp-layout-item:focus-within .mp-layout-item__remove,
.mp-layout-item.is-dragging .mp-layout-item__remove {
	opacity: 1;
}

.mp-layout-item__remove:hover,
.mp-layout-item__remove:focus {
	background: var(--mp-color-black-84) !important;
	transform: scale(1.05);
}

.mp-layout-item img {
	display: block;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	width: 100%;
}

.mp-modal[hidden] {
	display: none !important;
}

.mp-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: var(--mp-space-6);
	position: fixed;
	z-index: 9999;
}

.mp-modal__backdrop {
	background: var(--mp-color-ink-44);
	inset: 0;
	position: absolute;
}

.mp-modal__dialog {
	background: var(--mp-color-surface);
	border-radius: var(--mp-radius-sm);
	box-shadow: var(--mp-shadow-modal);
	display: grid;
	gap: var(--mp-space-5);
	max-width: 520px;
	padding: var(--mp-space-7);
	position: relative;
	width: min(100%, 520px);
}

.mp-modal__close {
	align-items: center;
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24a);
	border-radius: 999px;
	color: var(--mp-color-secondary);
	display: inline-flex;
	font-size: var(--mp-font-size-base);
	height: 36px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 18px;
	top: 18px;
	width: 36px;
}

.mp-dimension-form {
	display: grid;
	gap: var(--mp-space-4);
}

.mp-dimension-fields {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-dimension-row {
	align-items: center;
	border: 1px solid var(--mp-color-secondary-24a);
	border-radius: var(--mp-radius-sm);
	color: var(--mp-color-secondary);
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: 1fr minmax(140px, auto);
	margin: 0;
	padding: var(--mp-space-3);
}

.mp-dimension-row span {
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
}

.mp-dimension-row strong {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
	text-align: right;
}

.mp-dimension-row input {
	background: var(--mp-color-surface) !important;
	border: 1px solid var(--mp-color-secondary-40) !important;
	border-radius: var(--mp-radius-sm) !important;
	box-shadow: none !important;
	color: var(--mp-color-secondary) !important;
	font-family: var(--mp-font-family-base) !important;
	font-size: var(--mp-font-size-label) !important;
	font-weight: var(--mp-font-weight-medium) !important;
	line-height: var(--mp-line-height-label) !important;
	min-height: 40px;
	padding: var(--mp-space-2) var(--mp-space-3) !important;
	width: 100%;
}

.mp-dimension-form .mp-actions {
	justify-content: flex-end;
	margin-top: var(--mp-space-2);
}

.mp-button--secondary {
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-30);
	color: var(--mp-color-secondary);
}

.mp-layout-item.is-empty {
	background: var(--mp-color-black-04);
}

.mp-planner .mp-module:hover,
.mp-planner .mp-module:focus {
	border-color: var(--mp-color-brand);
	box-shadow: inset 0 0 0 1px var(--mp-color-brand);
	color: var(--mp-color-brand);
}

.mp-planner .mp-view-switcher button:hover,
.mp-planner .mp-view-switcher button:focus {
	background: var(--mp-color-surface) !important;
}

.mp-planner .mp-pager__button:hover,
.mp-planner .mp-pager__button:focus {
	border-color: var(--mp-color-brand) !important;
	color: var(--mp-color-brand) !important;
	transform: translateY(-1px);
}

.mp-planner .mp-pager__dot:hover,
.mp-planner .mp-pager__dot:focus {
	background: var(--mp-color-secondary) !important;
	transform: scale(1.1);
}

.mp-list {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-list-item {
	align-items: center;
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: 3fr 3fr 1fr auto;
	justify-content: space-between;
	padding: var(--mp-space-4);
}

.mp-list-item__main,
.mp-list-item__meta {
	display: grid;
	gap: var(--mp-space-1);
	min-width: 0;
}

.mp-list-item__main strong,
.mp-list-item__price {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xs);
}

.mp-list-item__main span,
.mp-list-item__meta span {
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	line-height: var(--mp-line-height-label);
}

.mp-list-item__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.mp-list-item__price {
	white-space: nowrap;
	text-align: right;
}

.mp-list-item a.mp-button {
	min-height: 40px;
	text-align: center;
}

.mp-list-item .mp-button {
	min-height: 40px;
	text-align: center;
}

.mp-list-item__actions {
	display: flex;
	gap: var(--mp-space-2);
	justify-self: end;
}

.mp-shortcode-card {
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-4);
	padding: var(--mp-space-5);
}

.mp-empty-state {
	background: var(--mp-color-primary-tint);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-2);
	padding: var(--mp-space-5);
}

.mp-empty-state strong {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xs);
}

.mp-empty-state p {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
	margin: 0;
}

.mp-summary {
	display: grid;
	gap: var(--mp-space-2) var(--mp-space-4);
	grid-template-columns: max-content 1fr;
}

.mp-summary dt {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
	margin: 0;
}

.mp-summary dd {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	line-height: var(--mp-line-height-label);
	margin: 0;
	text-align: right;
}

.mp-summary-hero {
	background: var(--mp-color-primary-tint);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	display: grid;
	gap: var(--mp-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: var(--mp-space-5);
}

.mp-summary-hero div,
.mp-summary-card {
	display: grid;
	gap: var(--mp-space-3);
}

.mp-summary-hero span {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
}

.mp-summary-hero strong {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-xl);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xl);
}

.mp-summary-grid {
	display: grid;
	gap: var(--mp-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-summary-card {
	background: var(--mp-color-surface);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-sm);
	padding: var(--mp-space-4);
}

.mp-summary-card h3 {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-xs);
	margin: 0;
}

.mp-summary-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
}

.mp-summary-chips span, .mp-list-item__meta > span {
	color: var(--mp-color-secondary);
	background: var(--mp-color-primary-tint);
	border: 1px solid var(--mp-color-secondary-24);
	border-radius: var(--mp-radius-pill);
	padding: var(--mp-space-1) var(--mp-space-3);
}
.mp-summary-chips span {
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-medium);
	line-height: var(--mp-line-height-label);
}

.mp-summary--totals {
	border-top: 1px solid var(--mp-color-secondary-24);
	padding-top: var(--mp-space-3);
}

.mp-summary--totals dt:last-of-type,
.mp-summary--totals dd:last-of-type {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-sm);
	font-weight: var(--mp-font-weight-bold);
}

.mp-summary-lines {
	display: grid;
	gap: var(--mp-space-2);
}

.mp-summary-lines div {
	align-items: center;
	border-top: 1px solid var(--mp-color-secondary-24);
	display: grid;
	gap: var(--mp-space-3);
	grid-template-columns: minmax(0, 1fr) auto auto;
	justify-content: stretch;
	padding-top: var(--mp-space-2);
}

.mp-summary-lines span {
	color: var(--mp-color-secondary-78);
	font-size: var(--mp-font-size-label);
	line-height: var(--mp-line-height-label);
}

.mp-summary-lines strong {
	color: var(--mp-color-secondary);
	font-size: var(--mp-font-size-label);
	font-weight: var(--mp-font-weight-bold);
	line-height: var(--mp-line-height-label);
	white-space: nowrap;
}

.mp-cart-drawer .mp-actions {
	justify-content: flex-end;
}


/* =========================================================
   14. RESPONSIVO
========================================================= */
@media (max-width: 1120px) {
	.mp-wizard {
		max-width: calc(100vw - 32px);
	}

	.mp-wizard-card {
		padding-left: var(--mp-space-10);
		padding-right: var(--mp-space-10);
	}

	.mp-image-options--formats,
	.mp-image-options:not(.mp-image-options--formats) {
		grid-template-columns: repeat(2, minmax(0, 216px));
		justify-content: center;
	}

	.mp-image-options--appliances {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.mp-planner__layout {
		grid-template-columns: 1fr;
	}

	.mp-canvas-controls {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
	}

	.mp-dimension-toggle,
	.mp-view-switcher,
	.mp-wall__zoom {
		justify-self: center;
	}

	.mp-summary-grid,
	.mp-summary-hero {
		grid-template-columns: 1fr;
	}

	.mp-my-projects .mp-list-item,
	.mp-cart-drawer .mp-list-item {
		align-items: start;
		grid-template-areas:
			"main price"
			"meta action";
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.mp-my-projects .mp-list-item__main,
	.mp-cart-drawer .mp-list-item__main {
		grid-area: main;
	}

	.mp-my-projects .mp-list-item__meta,
	.mp-cart-drawer .mp-list-item__meta {
		grid-area: meta;
	}

	.mp-my-projects .mp-list-item__price,
	.mp-cart-drawer .mp-list-item__price {
		grid-area: price;
	}

	.mp-my-projects .mp-list-item__actions,
	.mp-cart-drawer .mp-list-item__actions {
		grid-area: action;
	}

	.mp-my-projects .mp-list-item__price,
	.mp-cart-drawer .mp-list-item__price {
		justify-self: end;
	}

	.mp-my-projects .mp-list-item__actions,
	.mp-cart-drawer .mp-list-item__actions {
		justify-self: end;
	}

	.mp-module-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.mp-wizard-card {
		min-height: auto;
		padding: var(--mp-space-5);
	}

	.mp-wizard .mp-step h3 {
		font-size: var(--mp-font-size-base);
		line-height: var(--mp-line-height-base);
	}

	.mp-image-options--formats,
	.mp-image-options:not(.mp-image-options--formats) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-image-options--appliances {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-image-option__box {
		height: 160px;
	}

	.mp-image-option__box strong {
		font-size: var(--mp-font-size-sm);
		line-height: var(--mp-line-height-xs);
	}

	.mp-measure-stage {
		grid-template-columns: 1fr;
	}

	.mp-pill-options span {
		min-width: 0;
		width: 100%;
	}

	.mp-pill-options label {
		width: 100%;
	}

	.mp-wizard__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.mp-wizard__actions .mp-status {
		margin-right: 0;
	}
}

@media (max-width: 640px) {
	.mp-wizard-card {
		padding: var(--mp-space-10) var(--mp-space-5) var(--mp-space-6);
	}

	.mp-wizard__header {
		padding-left: var(--mp-space-10);
	}

	.mp-image-options,
	.mp-image-options--formats,
	.mp-image-options--binary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mp-measure-stage {
		grid-template-columns: 1fr;
	}

	.mp-module {
		aspect-ratio: 9/10;
	}

	.mp-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, 1fr);
	}

	.mp-actions,
	.mp-list-item {
		align-items: stretch;
		flex-direction: column;
	}

	.mp-my-projects .mp-list-item,
	.mp-cart-drawer .mp-list-item {
		grid-template-areas:
			"main"
			"meta"
			"price"
			"action";
		grid-template-columns: minmax(0, 1fr);
	}

	.mp-my-projects .mp-list-item__price,
	.mp-cart-drawer .mp-list-item__price {
		justify-self: start;
		text-align: left;
	}

	.mp-my-projects .mp-list-item__actions,
	.mp-cart-drawer .mp-list-item__actions {
		justify-self: stretch;
		width: 100%;
	}

	.mp-my-projects .mp-list-item__actions,
	.mp-cart-drawer .mp-list-item__actions {
		flex-direction: column;
	}

	.mp-project-summary .mp-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.mp-project-summary .mp-summary dd {
		text-align: left;
	}

	.mp-project-summary .mp-summary-lines div {
		display: grid;
		gap: var(--mp-space-1);
		justify-content: start;
		grid-template-columns: minmax(0, 1fr);
	}

	.mp-project-summary .mp-summary-lines strong {
		text-align: left;
	}
}