/* Shared UI-kit tokens; fallbacks keep the plugin usable outside the child theme. */
.ov-ia-try-on { color: var(--color-text-primary, #0c1013); letter-spacing: 0; }
.ov-ia-try-on *, .ov-ia-try-on *::before, .ov-ia-try-on *::after { box-sizing: border-box; }
.ov-ia-try-on [hidden] { display: none !important; }
.ov-ia-try-on__launch { width: 100%; margin: 0 0 var(--spacing-8, 8px); }
.ov-ia-try-on__launch .ov-button__content { display: flex; align-items: center; justify-content: center; gap: var(--spacing-12, 12px); }
.ov-ia-try-on__launch :is(.ov-icon, .dashicons) { flex: none; }
.ov-ia-try-on__dialog {
	width: min(720px, calc(100% - 2 * var(--spacing-16, 16px)));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--spacing-16, 16px));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-24, 24px);
	background: var(--color-bg-surface, #fff);
	font: var(--font-weight-regular, 400) var(--font-size-body, 16px)/var(--line-height-body, 24px) var(--font-ui, sans-serif);
	overflow: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
}
.ov-ia-try-on__dialog::-webkit-scrollbar { display: none; }
.ov-ia-try-on__dialog::backdrop { background: var(--color-bg-overlay, #0007); }
.ov-ia-try-on__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16, 16px);
	position: sticky;
	top: 0;
	z-index: 2;
	padding: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-24, 24px);
	background: var(--color-bg-surface, #fff);
}
.ov-ia-try-on__header h2 {
	font: var(--font-weight-medium, 500) var(--font-size-h3, 32px)/var(--line-height-h3, 40px) var(--font-display, sans-serif);
	letter-spacing: 0;
	margin: 0;
	overflow-wrap: anywhere;
}
.ov-ia-try-on__content { display: grid; gap: var(--spacing-16, 16px); padding: 0 var(--spacing-32, 32px) var(--spacing-32, 32px); }
.ov-ia-try-on__options { display: grid; gap: var(--spacing-16, 16px); }
.ov-ia-try-on__options label { display: grid; gap: var(--spacing-8, 8px); min-width: 0; font-weight: var(--font-weight-medium, 500); }
.ov-ia-try-on__options select {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: var(--height-56, 56px);
	padding: var(--spacing-12, 12px);
	border: 2px solid var(--color-border-control, #85837e);
	border-radius: var(--radius-16, 16px);
	background-color: var(--color-bg-surface, #fff);
	color: var(--color-text-primary, #0c1013);
	font: var(--font-weight-regular, 400) var(--font-size-field, 20px)/var(--line-height-field, 28px) var(--font-ui, sans-serif);
	letter-spacing: 0;
	box-shadow: none;
}
.ov-ia-try-on__options select:disabled { opacity: .5; }
.ov-ia-try-on__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1.64;
	min-height: 0;
	background: var(--color-bg-page, #f6f1e8);
	border: 1px solid transparent;
	border-radius: var(--radius-24, 24px);
	overflow: hidden;
}
.ov-ia-try-on__dialog[data-state="upload"] .ov-ia-try-on__stage {
	aspect-ratio: 1.36;
	border-style: dashed;
	border-color: var(--color-text-primary, #0c1013);
	background: var(--color-bg-surface, #fff);
}
.ov-ia-try-on__stage.is-dragging { outline: 2px solid var(--color-border-focus, #ff809e); outline-offset: -2px; }
.ov-ia-try-on__stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 0; }
.ov-ia-try-on__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--spacing-16, 16px);
	width: 100%;
	height: 100%;
	padding: var(--spacing-24, 24px);
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--color-text-primary, #0c1013);
	font: inherit;
	font-size: var(--font-size-body-lg, 20px);
	font-weight: var(--font-weight-regular, 400);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition-interactive, .2s ease-out);
}
.ov-ia-try-on__placeholder :is(.ov-icon, .dashicons) { flex: none; width: 32px; height: 32px; font-size: 32px; color: var(--color-text-muted, #595853); }
.ov-ia-try-on__upload-link { font-size: var(--font-size-small, 14px); line-height: var(--line-height-small, 20px); text-decoration: underline; text-underline-offset: var(--spacing-4, 4px); }
.ov-ia-try-on__photo-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-16, 16px); }
:where(.ov-ia-try-on__dialog) .ov-button:where(:not(.ov-ia-camera *)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ov-button-height, var(--height-56, 56px));
	padding: var(--spacing-12, 12px) var(--spacing-24, 24px);
	border: 2px solid transparent;
	border-radius: var(--radius-16, 16px);
	background: var(--ov-button-bg, var(--color-bg-action-primary, #ff809e));
	color: var(--color-text-primary, #0c1013);
	font: inherit;
	font-size: var(--ov-button-size, var(--font-size-button, 24px));
	font-weight: var(--font-weight-regular, 400);
	line-height: var(--ov-button-line, var(--line-height-button, 32px));
	cursor: pointer;
}
:where(.ov-ia-try-on__dialog) .ov-button:where(:not(.ov-ia-camera *)):disabled { opacity: .5; cursor: not-allowed; background: var(--color-bg-subtle, #efefef); }
.ov-ia-try-on__dialog .ov-ia-try-on__close { --ov-button-bg: transparent; --ov-button-height: var(--action-target-min, 44px); width: var(--action-target-min, 44px); height: var(--action-target-min, 44px); flex: none; padding: 0; }
.ov-ia-try-on__dialog .ov-ia-try-on__photo-action {
	--ov-button-bg: var(--color-bg-page, #f6f1e8);
	--ov-button-height: var(--action-target-min, 44px);
	--ov-button-size: var(--font-size-body, 16px);
	--ov-button-line: var(--line-height-body, 24px);
	padding: var(--spacing-8, 8px) var(--spacing-24, 24px);
}
:where(.ov-ia-try-on__dialog) .ov-button__content:where(:not(.ov-ia-camera *)) { display: flex; align-items: center; justify-content: center; gap: var(--spacing-12, 12px); }
.ov-ia-try-on__photo-action :is(.ov-icon, .dashicons) { flex: none; width: 20px; height: 20px; font-size: 20px; }
.ov-ia-try-on__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-16, 16px); }
.ov-ia-try-on__dialog .ov-ia-try-on__submit { flex: 0 1 54%; min-width: 0; margin-left: auto; }
.ov-ia-try-on__submit .ov-button__content { width: 100%; justify-content: space-between; }
.ov-ia-try-on__submit .ov-button__label { min-width: 0; overflow-wrap: anywhere; text-align: start; }
:where(.ov-ia-try-on__dialog) .ov-link { display: inline-flex; align-items: center; min-height: var(--action-target-min, 44px); padding: 0; background: transparent; border: 0; color: var(--color-text-link, #ff809e); font: inherit; cursor: pointer; }
.ov-ia-try-on__back :is(.ov-icon, .dashicons) { transform: rotate(180deg); }
.ov-ia-try-on__dialog .ov-ia-try-on__back:hover { background: transparent; }
.ov-ia-try-on__note { margin: 0; font-size: var(--font-size-small, 14px); line-height: var(--line-height-small, 20px); overflow-wrap: anywhere; }
.ov-ia-try-on__privacy { padding: var(--spacing-20, 20px); border-radius: var(--radius-24, 24px); background: var(--color-feedback-info-bg, #e2e9fb); color: var(--color-feedback-info-ink, #254a85); margin-top: var(--spacing-8, 8px); }
.ov-ia-try-on__privacy h3 { display: flex; align-items: center; gap: var(--spacing-12, 12px); margin: 0 0 var(--spacing-12, 12px); font: var(--font-weight-regular, 400) var(--font-size-h4, 24px)/var(--line-height-h4, 32px) var(--font-ui, sans-serif); letter-spacing: 0; }
.ov-ia-try-on__privacy h3 .dashicons { flex: none; }
.ov-ia-try-on__privacy p { margin: 0; }
.ov-ia-try-on__disclaimer { color: var(--color-text-muted, #595853); }
.ov-ia-try-on__status { margin: 0; color: var(--color-text-muted, #595853); overflow-wrap: anywhere; }
.ov-ia-try-on__status:empty { display: none; }
.ov-ia-try-on__sr-only, .ov-ia-try-on__status.is-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ov-ia-try-on__error { margin: 0; padding: var(--spacing-16, 16px); border-radius: var(--radius-16, 16px); color: var(--color-feedback-error-ink, #8a2337); background: var(--color-feedback-error-bg, #ffe1e5); overflow-wrap: anywhere; }
.ov-ia-try-on__stage[aria-busy="true"]::after { content: ""; position: absolute; width: 36px; height: 36px; border: 4px solid var(--color-bg-surface, #fff); border-top-color: var(--color-bg-accent, #ff809e); border-radius: 50%; animation: ov-ia-try-on-spin 1s linear infinite; }
.ov-ia-try-on__stage[aria-busy="true"] img { opacity: .6; }
.ov-ia-try-on__dialog :is(select, .ov-ia-try-on__placeholder):focus-visible { outline: var(--focus-width, 2px) solid var(--color-border-focus, #ff809e); outline-offset: -2px; }
@media (hover: hover) {
	.ov-ia-try-on__placeholder:hover:not(:disabled) { color: var(--color-text-primary, #0c1013); background: var(--color-bg-page, #f6f1e8); }
	:where(.ov-ia-try-on__dialog) .ov-button:where(:not(.ov-ia-camera *)):hover:not(:disabled) { background: var(--color-text-primary, #0c1013); color: var(--color-text-inverse, #f6f1e8); }
}
@media (max-width: 767px) {
	.ov-ia-try-on__dialog { width: calc(100% - 2 * var(--spacing-8, 8px)); max-height: calc(100dvh - 2 * var(--spacing-8, 8px)); }
	.ov-ia-try-on__header { padding: var(--spacing-20, 20px); }
	.ov-ia-try-on__content { padding: 0 var(--spacing-20, 20px) var(--spacing-20, 20px); }
	.ov-ia-try-on__stage { aspect-ratio: 1.25; }
	.ov-ia-try-on__dialog .ov-ia-try-on__submit { flex-basis: 100%; width: 100%; }
	.ov-ia-try-on__photo-actions { flex-direction: column; gap: var(--spacing-8, 8px); }
}
@keyframes ov-ia-try-on-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ov-ia-try-on__stage[aria-busy="true"]::after { animation: none; } .ov-ia-try-on__placeholder { transition: none; } }
@media (forced-colors: active) { .ov-ia-try-on__dialog, .ov-ia-try-on__privacy, .ov-ia-try-on__error { border: 1px solid CanvasText; } }