.builder-preview {
	padding: 20px 20px 18px;
	border-bottom: 1px dashed var(--line);
}

.builder-preview__stage {
	display: grid;
	place-items: center;
	min-height: 255px;
	background: rgba(255, 255, 255, .018);
	border: 1px solid var(--line);
	overflow: hidden;
	padding: 18px;
}

.builder-preview__door {
	position: relative;
	width: min(118px, 44%);
	height: 220px;
	border: 1px solid rgba(224, 172, 22, .38);
	background: #111;
	box-shadow: 16px 18px 36px rgba(0, 0, 0, .35);
}

.builder-preview__panel {
	position: absolute;
	inset: 8px;
	background:
		linear-gradient(90deg, rgba(255,255,255,.12), transparent 34%, rgba(0,0,0,.14)),
		var(--builder-door-texture, url("/wp-content/themes/doors/assets/img/icon-options/thumb-pg-100.png")) center / cover;
}

.builder-preview__hinge {
	position: absolute;
	left: -8px;
	width: 7px;
	height: 42px;
	border: 1px solid rgba(255,255,255,.22);
	background: var(--builder-hinge-color, #9d9d9d);
	opacity: 0;
	transition: opacity .16s ease, background .16s ease;
}

.builder-preview__hinge--top {
	top: 42px;
}

.builder-preview__hinge--bottom {
	bottom: 42px;
}

.builder-preview__door.has-hinges .builder-preview__hinge {
	opacity: .95;
}

.builder-preview__handle {
	position: absolute;
	left: 16%;
    top: 60%;
	width: 64px;
	height: auto;
	object-fit: contain;
	transform: translateY(-50%);
	filter: var(--builder-handle-filter, none);
}

.builder-preview__door[data-handle-style="knob"] .builder-preview__handle {
	left: 24%;
	width: 58px;
}

.builder-preview__caption {
	margin: 12px 0 0;
	color: var(--steel);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	line-height: 1.45;
	text-transform: uppercase;
}
.wc-saved-configs__preview { margin-bottom: 24px; }
