.ocf-editor { margin: 16px 0; max-width: 440px; }

.ocf-upload { transition: border-color .15s, background .15s; }
.ocf-upload:hover, .ocf-upload.is-over { border-color: #111 !important; background: #f4f4f5 !important; }
.ocf-upload.is-over { border-style: solid !important; }

.ocf-body { margin-top: 4px; }

.ocf-stage {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f4f5;
	touch-action: none;
	user-select: none;
}
.ocf-window {
	position: absolute;
	overflow: hidden;
	z-index: 1;
	cursor: grab;
}
.ocf-window:active { cursor: grabbing; }
.ocf-photo {
	position: absolute;
	top: 0; left: 0;
	max-width: none;
	will-change: left, top, width;
	pointer-events: none;
}
.ocf-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
	pointer-events: none;
}
.ocf-hint-move {
	position: absolute;
	left: 50%; bottom: 8px;
	transform: translateX(-50%);
	z-index: 3;
	background: rgba(17,17,17,.72);
	color: #fff;
	font-size: .72rem;
	padding: 4px 10px;
	border-radius: 20px;
	pointer-events: none;
	transition: opacity .3s;
	white-space: nowrap;
}
.ocf-hint-move.is-hidden { opacity: 0; }

.ocf-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px auto 0;
	max-width: 380px;
	flex-wrap: wrap;
}
.ocf-toolbar input[type=range] { flex: 1 1 90px; accent-color: #111; }
.ocf-icon-btn {
	width: 34px; height: 34px;
	border: 1px solid #e4e4e7; background: #fff; border-radius: 8px;
	font-size: 1.2rem; line-height: 1; cursor: pointer; color: #18181b;
	display: flex; align-items: center; justify-content: center;
}
.ocf-icon-btn:hover { border-color: #111; }
.ocf-text-btn {
	border: none; background: none; color: #52525b; cursor: pointer;
	font-size: .82rem; text-decoration: underline; padding: 4px 2px;
}
.ocf-text-btn:hover { color: #111; }

.ocf-dpi {
	margin: 10px auto 0; max-width: 380px;
	font-size: .8rem; display: flex; align-items: center; gap: 6px;
	color: #15803d;
}
.ocf-dpi.is-low { color: #b91c1c; }
.ocf-dpi::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.ocf-views { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px auto 0; max-width: 380px; }
.ocf-views-label { font-size: .78rem; color: #71717a; }
.ocf-view-btn {
	border: 1px solid #e4e4e7; background: #fff; border-radius: 20px;
	padding: 5px 14px; cursor: pointer; font-size: .8rem; color: #18181b;
}
.ocf-view-btn.is-active { border-color: #111; background: #111; color: #fff; }

.ocf-status { margin: 8px auto 0; max-width: 380px; font-size: .78rem; color: #71717a; min-height: 1em; }
.ocf-status.is-error { color: #b91c1c; }

/* Contener el selector de cantidad gigante en temas que lo agrandan */
.single-product form.cart .quantity input.qty { max-width: 72px; }

.ocf-progress { max-width: 380px; margin: 12px auto 0; }
.ocf-progress-track { height: 8px; background: #e4e4e7; border-radius: 6px; overflow: hidden; }
.ocf-progress-fill { height: 100%; width: 0; background: #111; border-radius: 6px; transition: width .15s ease; }
.ocf-progress-text { font-size: .78rem; color: #52525b; margin-top: 6px; }

/* Fix: el tema agrandaba el titulo/hint de la caja de subida. Forzar tamaño propio. */
#ocf-editor .ocf-upload-title { font-size: 1rem !important; font-weight: 600 !important; text-transform: none !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
#ocf-editor .ocf-upload-hint { font-size: .82rem !important; font-weight: 400 !important; text-transform: none !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
#ocf-editor .ocf-upload-ico { width: 44px !important; height: 44px !important; }
#ocf-editor .ocf-upload { max-width: 440px; padding: 28px 18px !important; }