.mowoo-configurator {
	margin: 0 0 1.25em;
	padding: 1em 1.25em;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fafafa;
	width: 100%;
	box-sizing: border-box;
}
.mowoo-configurator .mowoo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 .65em;
}
.mowoo-configurator .mowoo-row label {
	font-weight: 600;
	flex: 0 0 11em;
	max-width: 40%;
}
.mowoo-configurator select,
.mowoo-configurator input[type="number"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .4em .6em;
}
.mowoo-print-fields {
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px dashed #d6d6d6;
}
.mowoo-quote {
	margin-top: .75em;
	font-size: .95em;
}
.mowoo-quote-box {
	border-top: 1px solid #e3e3e3;
	padding-top: .6em;
}
.mowoo-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .75em;
	padding: .15em 0;
	color: #555;
}
/* Long labels like "Tampondruk (4 kleuren) — Opstartkosten" pushed the amount
   off-screen on phones. The label wraps; the amount keeps its own column. */
.mowoo-line > span:first-child {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.mowoo-line > span:last-child {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
}
.mowoo-line.mowoo-total {
	margin-top: .35em;
	padding-top: .5em;
	border-top: 1px solid #e3e3e3;
	font-weight: 700;
	font-size: 1.1em;
	color: #111;
}

/* ---- Multiple decoration rows ---- */
.mowoo-decoration-row {
	position: relative;
	margin: 0 0 .75em;
	padding: .65em .75em .2em;
	border: 1px dashed #d6d6d6;
	border-radius: 6px;
	background: #fff;
}
.mowoo-decoration-row .mowoo-row-remove {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: transparent;
	color: #b32d2e;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}
.mowoo-add-decoration {
	font-size: .9em;
}

.mowoo-position-preview {
	margin: .25em 0 .5em;
}
.mowoo-position-preview img {
	max-width: 160px;
	height: auto;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
}
.mowoo-colour-line {
	margin: -.35em 0 .5em;
}

@media (max-width: 600px) {
	.mowoo-configurator {
		padding: .85em .9em;
	}
	.mowoo-configurator .mowoo-row {
		flex-wrap: wrap;
	}
	.mowoo-configurator .mowoo-row label {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: .2em;
	}
	.mowoo-configurator select,
	.mowoo-configurator input[type="number"],
	.mowoo-configurator input[type="file"] {
		width: 100%;
		max-width: 100%;
	}
	/* Stack the price rows: a long label plus an amount never fits on one line. */
	.mowoo-line {
		flex-wrap: wrap;
		gap: 0 .5em;
	}
	.mowoo-line > span:first-child {
		flex: 1 1 60%;
	}
	.mowoo-decoration-row {
		padding: .6em .6em .2em;
	}
	.mowoo-delivery {
		flex-direction: column;
		gap: .2em;
	}
}

.mowoo-line.mowoo-warn span { color: #b26b00; font-style: italic; }
.mowoo-quote-warning {
	margin: .6em 0 0;
	padding: .5em .7em;
	background: #fff6e5;
	border-left: 3px solid #d69100;
	border-radius: 3px;
	font-size: .9em;
	color: #6b4c00;
}

.mowoo-delivery {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	margin-top: .6em;
	padding-top: .5em;
	border-top: 1px solid #e3e3e3;
	font-size: .9em;
	color: #555;
}

/* Native file inputs ignore the flex layout and can push the box wider. */
.mowoo-configurator input[type="file"] {
	max-width: 100%;
	min-width: 0;
}
.mowoo-configurator .description {
	overflow-wrap: break-word;
}

/* Decoration heading above its own cost lines. */
.mowoo-line.mowoo-sub {
	margin-top: .35em;
	font-weight: 600;
	color: #333;
}
.mowoo-line.mowoo-sub + .mowoo-line,
.mowoo-line.mowoo-sub ~ .mowoo-line:not(.mowoo-sub):not(.mowoo-total) {
	padding-left: .9em;
}

/* Artwork link under an order line in My account. */
.mowoo-artwork-link {
	margin: .35em 0 0;
	font-size: .9em;
}