.mud-designer {
	max-width: 1520px;
	margin: 0 auto;
	padding: 20px 16px 32px;
	color: #262321;
	font-family: Inter, Manrope, system-ui, sans-serif;
}

.mud-designer__header,
.mud-designer__footer,
.mud-designer__layout {
	display: grid;
	gap: 24px;
}

.mud-designer__header {
	grid-template-columns: 1fr auto;
	align-items: start;
	padding-bottom: 28px;
	border-bottom: 1px solid #ded7d0;
}

.mud-designer__eyebrow {
	margin: 0 0 8px;
	color: #b89b7a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mud-designer h1 {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 500;
	line-height: 1;
}

.mud-designer__back {
	color: #514b47;
	font-size: 14px;
	text-decoration: none;
}

.mud-designer__layout {
	grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
	align-items: start;
	margin: 20px 0;
}

.mud-designer__panel {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	height: clamp(540px, 62vh, 660px);
	padding: 0;
	border: 1px solid #ded7d0;
	border-radius: 8px;
	background: #faf8f5;
	overflow: hidden;
}

.mud-designer__tabs {
	display: grid;
	grid-auto-rows: min-content;
	align-content: start;
	gap: 8px;
	padding: 10px 8px;
	background: #302d2b;
}

.mud-designer__tabs button {
	display: grid;
	gap: 5px;
	min-height: 60px;
	place-items: center;
	padding: 8px 2px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: #d8d1ca;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.mud-designer__tabs button.is-active {
	background: #514b47 !important;
	color: #fff !important;
}

.mud-designer__tabs button:hover:not(.is-active) {
	background: #403c39 !important;
	color: #fff !important;
}

.mud-designer__tabs button span {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border: 0;
}

.mud-designer__tabs button svg,
.mud-designer__layers-toggle svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.mud-designer__tabs button small {
	font: inherit;
	font-size: 10px;
}

.mud-designer__panel-content {
	min-width: 0;
	padding: 20px;
	overflow-y: auto;
}

.mud-designer__tab-panel[hidden] {
	display: none;
}

.mud-designer__upload {
	display: grid;
	gap: 4px;
	padding: 15px 16px;
	border: 1px dashed #b7a99a;
	border-radius: 5px;
	background: #fff;
	color: #262321;
	cursor: pointer;
}

.mud-designer__upload:hover {
	border-color: #b89b7a;
	background: #fdfbf8;
}

.mud-designer__upload span {
	font-size: 14px;
	font-weight: 700;
}

.mud-designer__upload small,
.mud-designer__upload-note {
	color: #6f6862;
	font-size: 12px;
	line-height: 1.5;
}

.mud-designer__upload-note {
	margin: 11px 0 0;
}

.mud-designer__design-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.mud-designer__design-grid button {
	display: grid;
	gap: 5px;
	min-height: 82px;
	place-items: center;
	padding: 9px 5px;
	border: 1px solid #ded7d0 !important;
	border-radius: 5px;
	background: #fdfbf8 !important;
	color: #3e3936 !important;
	font: inherit;
	cursor: pointer;
}

.mud-designer__design-grid button:hover:not(:disabled) {
	border-color: #b89b7a !important;
	background: #fff !important;
	box-shadow: 0 3px 12px rgba(38, 35, 33, .08);
}

.mud-designer__design-grid button:disabled {
	opacity: .45;
	cursor: wait;
}

.mud-designer__design-grid button > span {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
}

.mud-designer__design-grid button[data-mud-design-template] > span {
	width: 52px;
	height: 52px;
}

.mud-designer__design-grid button > span::before {
	width: 16px;
	height: 16px;
	border: 2px solid #c8b9aa;
	border-top-color: #514b47;
	border-radius: 50%;
	content: "";
	animation: mud-design-spinner .8s linear infinite;
}

.mud-designer__design-grid button.is-loaded > span::before {
	display: none;
}

.mud-designer__design-grid svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

.mud-designer__design-grid small {
	display: none;
}

.mud-designer__design-note {
	margin: 16px 0 0;
	color: #6f6862;
	font-size: 12px;
	line-height: 1.5;
}

@keyframes mud-design-spinner {
	to { transform: rotate(360deg); }
}

.mud-designer__layers {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #ded7d0;
}

.mud-designer__layers-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 13px;
}

.mud-designer__layers-heading span {
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	border-radius: 50%;
	background: #eee8e1;
	color: #6f6862;
	font-size: 11px;
}

.mud-designer__layers-toggle {
	position: absolute;
	z-index: 5;
	top: 16px;
	right: 16px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	padding: 0 !important;
	border: 1px solid #ded7d0;
	border-radius: 5px;
	background: rgba(255, 255, 255, .94);
	color: #262321;
	font-size: 21px;
	line-height: 0;
	box-shadow: 0 3px 14px rgba(38, 35, 33, .08);
	cursor: pointer;
}

.mud-designer__layers-toggle svg {
	position: absolute;
	inset: 0;
	margin: auto;
}

.mud-designer__layers-toggle:hover,
.mud-designer__layers-toggle[aria-expanded="true"] {
	border-color: #b89b7a;
	background: #fff;
}

.mud-designer__layers-overlay {
	position: absolute;
	z-index: 6;
	top: 16px;
	right: 16px;
	width: min(280px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	overflow: auto;
	padding: 14px;
	border: 1px solid #ded7d0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 14px 38px rgba(38, 35, 33, .16);
}

.mud-designer__layers-overlay[hidden] {
	display: none;
}

.mud-designer__layers-overlay .mud-designer__layers-heading {
	gap: 8px;
	margin-bottom: 12px;
}

.mud-designer__layers-close {
	display: grid;
	width: 25px;
	height: 25px;
	place-items: center;
	margin-left: auto;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #6f6862 !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mud-designer__layers-close:hover {
	background: #eee8e1 !important;
	color: #262321 !important;
}

.mud-designer__layer-list {
	display: grid;
	gap: 7px;
}

.mud-designer__layer-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	border: 1px solid #ded7d0;
	border-radius: 4px;
	background: #fff;
}

.mud-designer__layer-row.is-selected {
	border-color: #b89b7a;
	box-shadow: 0 0 0 2px rgba(184, 155, 122, .12);
}

.mud-designer__layer-select {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	color: #262321;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mud-designer__layer-select span {
	font-size: 11px;
	font-weight: 700;
}

.mud-designer__layer-select small {
	overflow: hidden;
	color: #6f6862;
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mud-designer__layer-actions {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	border-left: 1px solid #ded7d0;
}

.mud-designer__layer-actions button {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	padding: 0;
	border: 1px solid #ded7d0 !important;
	border-radius: 3px;
	background: #fff !important;
	color: #6f6862 !important;
	font: inherit;
	cursor: pointer;
}

.mud-designer__layer-actions button:hover {
	border-color: #b89b7a !important;
	background: #faf8f5 !important;
	color: #262321 !important;
}

.mud-designer__layer-actions svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.mud-designer__layer-select:hover,
.mud-designer__swatch:hover,
.mud-designer__layers-toggle:hover {
	background: #faf8f5 !important;
	color: #262321 !important;
}

.mud-designer__layers-close {
	background: transparent !important;
}

.mud-designer__remove-layer {
	margin-top: 11px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9b4c44;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}


.mud-designer__variants {
	margin: 0 0 22px;
	padding: 0 0 20px;
	border: 0;
	border-bottom: 1px solid #ded7d0;
}

.mud-designer__variants legend,
.mud-designer__variation-field > span {
	display: block;
	margin: 0 0 9px;
	color: #514b47;
	font-size: 12px;
	font-weight: 700;
}

.mud-designer__variation-field {
	display: grid;
	margin: 0 0 14px;
}


.mud-designer__variation-field select {
	width: 100%;
	min-height: 48px;
	padding: 10px;
	border: 1px solid #b7a99a;
	border-radius: 4px;
	background: #fff;
	color: #514b47;
	font: inherit;
}

.mud-designer__native-select {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}

.mud-designer__swatches {
	display: grid;
	gap: 8px;
}

.mud-designer__swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 8px 10px;
	border: 1px solid #ded7d0;
	border-radius: 4px;
	background: #fff;
	color: #262321;
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.mud-designer__swatch:hover,
.mud-designer__swatch.is-selected {
	border-color: #b89b7a;
	box-shadow: 0 0 0 2px rgba(184, 155, 122, .12);
}

.mud-designer__swatch:disabled {
	opacity: .38;
	cursor: not-allowed;
}

.mud-designer__swatch-dot {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 1px solid rgba(38, 35, 33, .2);
	border-radius: 50%;
}

.mud-designer__swatch-dot.is-gold { background: #c7a15c; }
.mud-designer__swatch-dot.is-rose { background: #ba7774; }
.mud-designer__swatch-dot.is-silver { background: #b2b8c0; }

.mud-designer__variation-status {
	margin: 0;
	color: #6f6862;
	font-size: 12px;
	line-height: 1.5;
}

.mud-designer__step {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.mud-designer__variation-label {
	display: grid;
	gap: 7px;
	margin: 0 0 22px;
	color: #514b47;
	font-size: 12px;
	font-weight: 700;
}

.mud-designer__variation-label select {
	width: 100%;
	padding: 10px;
	border: 1px solid #b7a99a;
	border-radius: 4px;
	background: #fff;
	color: #262321;
	font: inherit;
}

.mud-designer__step > span {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	background: #262321;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.mud-designer__step strong,
.mud-designer__footer strong {
	display: block;
	font-size: 15px;
}

.mud-designer__step p,
.mud-designer__footer span {
	margin: 5px 0 0;
	color: #6f6862;
	font-size: 13px;
	line-height: 1.5;
}

.mud-designer__add-text,
.mud-designer__checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	border: 0;
	border-radius: 5px;
	background: #262321;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mud-designer__add-text {
	width: 100%;
}

.mud-designer__add-text:hover,
.mud-designer__checkout:hover:not(:disabled) {
	background: #514b47;
}

.mud-designer__controls {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ded7d0;
}

.mud-designer__controls label {
	display: grid;
	gap: 7px;
	margin-bottom: 14px;
	color: #514b47;
	font-size: 12px;
	font-weight: 700;
}

.mud-designer__font-field {
	display: grid;
	gap: 7px;
	margin-bottom: 14px;
	color: #514b47;
	font-size: 12px;
	font-weight: 700;
}

.mud-designer__font-picker {
	position: relative;
}

.mud-designer__font-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	padding: 9px 12px;
	border: 1px solid #b7a99a !important;
	border-radius: 4px;
	background: #fff !important;
	color: #262321 !important;
	font: inherit;
	cursor: pointer;
}

.mud-designer__font-trigger:hover,
.mud-designer__font-trigger[aria-expanded="true"] {
	border-color: #b89b7a !important;
	background: #fdfbf8 !important;
}

.mud-designer__font-options {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	right: auto;
	display: grid;
	max-height: 310px;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid #b7a99a;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(38, 35, 33, .16);
}

.mud-designer__font-options[hidden] {
	display: none;
}

.mud-designer__font-options button {
	display: grid;
	gap: 2px;
	width: 100%;
	padding: 9px 10px;
	border: 1px solid transparent !important;
	border-radius: 3px;
	background: transparent !important;
	color: #262321 !important;
	text-align: left;
	cursor: pointer;
}

.mud-designer__font-options button:hover,
.mud-designer__font-options button.is-selected {
	border-color: #ded7d0 !important;
	background: #faf8f5 !important;
}

.mud-designer__font-options small {
	color: #6f6862;
	font-family: Inter, Arial, sans-serif;
	font-size: 10px;
	font-weight: 500;
}

.mud-font-preview {
	display: block;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.1;
}

.mud-font-preview.is-serif { font-family: "Cormorant Garamond", Georgia, serif; }
.mud-font-preview.is-playfair { font-family: "Playfair Display", Georgia, serif; }
.mud-font-preview.is-dm-serif { font-family: "DM Serif Display", Georgia, serif; }
.mud-font-preview.is-baskerville { font-family: "Libre Baskerville", Georgia, serif; font-size: 15px; }
.mud-font-preview.is-sans { font-family: Inter, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-manrope { font-family: Manrope, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-montserrat { font-family: Montserrat, Arial, sans-serif; font-size: 14px; }
.mud-font-preview.is-lora { font-family: Lora, Georgia, serif; }
.mud-font-preview.is-eb-garamond { font-family: "EB Garamond", Georgia, serif; }
.mud-font-preview.is-crimson-pro { font-family: "Crimson Pro", Georgia, serif; }
.mud-font-preview.is-bodoni-moda { font-family: "Bodoni Moda", Georgia, serif; }
.mud-font-preview.is-prata { font-family: Prata, Georgia, serif; font-size: 16px; }
.mud-font-preview.is-cinzel { font-family: Cinzel, Georgia, serif; font-size: 15px; }
.mud-font-preview.is-marcellus { font-family: Marcellus, Georgia, serif; }
.mud-font-preview.is-cardo { font-family: Cardo, Georgia, serif; }
.mud-font-preview.is-spectral { font-family: Spectral, Georgia, serif; }
.mud-font-preview.is-fraunces { font-family: Fraunces, Georgia, serif; }
.mud-font-preview.is-yeseva-one { font-family: "Yeseva One", Georgia, serif; font-size: 16px; }
.mud-font-preview.is-italiana { font-family: Italiana, Georgia, serif; }
.mud-font-preview.is-raleway { font-family: Raleway, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-poppins { font-family: Poppins, Arial, sans-serif; font-size: 14px; }
.mud-font-preview.is-jost { font-family: Jost, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-dm-sans { font-family: "DM Sans", Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-work-sans { font-family: "Work Sans", Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-figtree { font-family: Figtree, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-outfit { font-family: Outfit, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-urbanist { font-family: Urbanist, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-quicksand { font-family: Quicksand, Arial, sans-serif; font-size: 15px; }
.mud-font-preview.is-great-vibes { font-family: "Great Vibes", cursive; font-size: 24px; }
.mud-font-preview.is-allura { font-family: Allura, cursive; font-size: 25px; }
.mud-font-preview.is-dancing-script { font-family: "Dancing Script", cursive; font-size: 19px; }
.mud-font-preview.is-parisienne { font-family: Parisienne, cursive; font-size: 23px; }
.mud-font-preview.is-sacramento { font-family: Sacramento, cursive; font-size: 25px; }

.mud-designer__controls textarea,
.mud-designer__controls select,
.mud-designer__controls input {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #b7a99a;
	border-radius: 4px;
	background: #fff;
	color: #262321;
	font: inherit;
}

.mud-designer__controls textarea,
.mud-designer__controls select {
	padding: 10px;
}

.mud-designer__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mud-designer__controls input[type="range"] {
	accent-color: #b89b7a;
}

.mud-designer__remove-text {
	padding: 0;
	border: 0;
	background: transparent;
	color: #9b4c44;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.mud-designer__resize-help {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	margin: 0 0 16px;
	color: #6f6862;
	font-size: 12px;
	line-height: 1.45;
}

.mud-designer__resize-help span {
	color: #287565;
	font-weight: 700;
}

.mud-designer__tip {
	display: flex;
	gap: 9px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #ded7d0;
	color: #6f6862;
	font-size: 12px;
	line-height: 1.55;
}

.mud-designer__tip span {
	color: #b89b7a;
}

.mud-designer__preview-column {
	min-width: 0;
}

.mud-designer__preview {
	position: relative;
	display: flex;
	min-height: 540px;
	height: clamp(540px, 62vh, 660px);
	align-items: center;
	justify-content: center;
	place-items: center;
	overflow: hidden;
	border: 1px solid #ded7d0;
	border-radius: 8px;
	background-color: #f5f1ec;
	background-image: radial-gradient(circle at center, #fff 0, #faf8f5 65%, #eee8e1 100%);
}

.mud-designer__preview > img {
	display: block;
	width: auto;
	max-width: min(100%, 660px);
	max-height: min(100%, 600px);
	height: auto;
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.mud-designer__objects,
.mud-designer__zone-hint,
.mud-designer__colour-layer {
	position: absolute;
	inset: 0;
}

.mud-designer__snap-guide {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: none;
	pointer-events: none;
}

.mud-designer__snap-guide::before,
.mud-designer__snap-guide::after {
	position: absolute;
	display: none;
	content: "";
	background: rgba(184, 155, 122, .86);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .65);
}

.mud-designer__snap-guide.is-x::before {
	display: block;
	top: 0;
	bottom: 0;
	left: var(--mud-snap-x);
	width: 1px;
}

.mud-designer__snap-guide.is-y::after {
	display: block;
	left: 0;
	right: 0;
	top: var(--mud-snap-y);
	height: 1px;
}

.mud-designer__colour-layer {
	display: none;
	right: auto;
	bottom: auto;
	pointer-events: none;
	mix-blend-mode: color;
	opacity: .72;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.mud-designer__zone-hint {
	pointer-events: none;
}

.mud-designer__zone-hint.is-circle {
	border: 1.5px dashed rgba(40, 117, 101, .75);
	border-radius: 50%;
	background: rgba(40, 117, 101, .04);
}

.mud-designer__zone-hint.is-rectangle {
	border: 1.5px dashed rgba(40, 117, 101, .75);
	background: rgba(40, 117, 101, .04);
}

.mud-designer__zone-hint.is-warning {
	border: 3px solid #b8352d;
	background: rgba(184, 53, 45, .16);
	box-shadow: 0 0 0 6px rgba(184, 53, 45, .16), 0 0 24px rgba(184, 53, 45, .5);
	animation: mud-zone-warning .75s ease-in-out infinite alternate;
}

@keyframes mud-zone-warning {
	from { opacity: .72; }
	to { opacity: 1; }
}

.mud-designer__layer {
	position: absolute;
	touch-action: none;
	user-select: none;
}

.mud-designer__text {
	max-width: none;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 3px;
	color: #262321;
	line-height: 1.1;
	text-align: center;
	white-space: pre;
	word-break: normal;
	cursor: grab;
}

.mud-designer__image {
	cursor: grab;
}

.mud-designer__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1) contrast(1.45);
	mix-blend-mode: multiply;
	opacity: .62;
	pointer-events: none;
}

.mud-designer__layer.is-selected {
	border-color: #287565;
	box-shadow: 0 0 0 3px rgba(40, 117, 101, .14);
}

.mud-designer__layer.is-invalid {
	border-color: #a45249;
	box-shadow: 0 0 0 3px rgba(164, 82, 73, .16);
}

.mud-designer__layer.is-invalid::before {
	background: #a45249;
	content: "Aanpassen";
}

.mud-designer__layer.is-selected::before {
	position: absolute;
	top: -23px;
	left: 50%;
	padding: 4px 8px;
	transform: translateX(-50%);
	border-radius: 9px;
	background: #287565;
	color: #fff;
	content: "Laag";
	font-family: Inter, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
}

.mud-designer__layer.is-dragging {
	cursor: grabbing;
}

.mud-designer__resize-handle {
	position: absolute;
	z-index: 2;
	width: 12px;
	height: 12px;
	border: 2px solid #287565;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(38, 35, 33, .2);
	touch-action: none;
}

.mud-designer__layer.is-invalid .mud-designer__resize-handle {
	border-color: #a45249;
}

.mud-designer__resize-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.mud-designer__resize-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.mud-designer__resize-handle--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.mud-designer__resize-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }

.mud-designer__preview-note {
	margin: 10px 0 0;
	color: #6f6862;
	font-size: 13px;
	text-align: center;
}

.mud-designer__footer {
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 22px 0 0;
	border-top: 1px solid #ded7d0;
}

.mud-designer__checkout {
	min-width: 230px;
	padding: 0 24px;
}

.mud-designer__checkout:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.mud-designer__checkout.is-loading {
	padding-right: 20px;
}

.mud-designer__modal[hidden] {
	display: none;
}

.mud-designer__modal {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(38, 35, 33, .5);
}

.mud-designer__modal-card {
	position: relative;
	max-width: 430px;
	padding: 34px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 20px 70px rgba(38, 35, 33, .22);
	text-align: center;
}

.mud-designer__modal-icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #f5e6e3;
	color: #a45249;
	font-weight: 800;
}

.mud-designer__modal-card h2 {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.05;
}

.mud-designer__modal-card p {
	margin: 14px 0 22px;
	color: #6f6862;
	font-size: 14px;
	line-height: 1.55;
}

.mud-designer__modal-confirm {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 5px;
	background: #262321;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mud-designer__modal-close {
	position: absolute;
	top: 9px;
	right: 13px;
	border: 0;
	background: transparent;
	color: #6f6862;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.mud-designer-notice {
	max-width: 760px;
	margin: 32px auto;
	padding: 20px;
	border: 1px solid #ded7d0;
	border-radius: 6px;
	background: #faf8f5;
}

.mud-product-cta {
	margin: 24px 0;
}

.mud-personalise-button {
	width: 100%;
	min-height: 50px;
	text-align: center;
}

.mud-product-cta p {
	margin: 10px 0 0;
	color: #6f6862;
	font-size: 13px;
	text-align: center;
}

@media (max-width: 767px) {
	.mud-designer {
		padding: 24px 16px 36px;
	}

	.mud-designer__header,
	.mud-designer__layout,
	.mud-designer__footer {
		grid-template-columns: 1fr;
	}

	.mud-designer__header {
		gap: 14px;
	}

	.mud-designer__back {
		order: -1;
	}

	.mud-designer__layout {
		margin: 24px 0;
	}

	.mud-designer__preview {
		min-height: 0;
		height: auto;
	}

	.mud-designer__preview > img {
		width: 100%;
		max-width: 100%;
		max-height: none;
		height: auto;
	}

	.mud-designer__panel {
		grid-template-columns: 56px minmax(0, 1fr);
		height: auto;
	}

	.mud-designer__tabs {
		padding: 8px 6px;
	}

	.mud-designer__panel-content {
		padding: 16px;
	}

	.mud-designer__footer {
		gap: 16px;
	}

	.mud-designer__checkout {
		width: 100%;
	}
}