.jsl-pd {
	--jsl-primary: var(--fs-color-primary, var(--primary-color, var(--wp--preset--color--primary, #d97746)));
	--jsl-text: var(--fs-color-base, var(--wp--preset--color--contrast, #1f252b));
	--jsl-border: var(--border-color, #e6ded4);
	--jsl-success: var(--fs-color-success, var(--wp--preset--color--success, #2c3e50));
	--jsl-warning: var(--fs-color-secondary, var(--wp--preset--color--secondary, #917961));
	--jsl-error: var(--fs-color-alert, var(--wp--preset--color--alert, #ee6055));
	--jsl-radius: var(--border-radius, 8px);
	border: 1px solid var(--jsl-border);
	border-radius: var(--jsl-radius);
	color: var(--jsl-text);
	font-family: inherit;
	margin: 1rem 0;
	padding: 1rem;
	text-align: start;
}
.jsl-pd *, .jsl-pd *::before, .jsl-pd *::after { box-sizing: border-box; }
.jsl-pd[hidden], .jsl-pd [hidden] { display: none !important; }
.jsl-pd h3 { font-size: 1.05em; margin: 0 0 .4rem; }
.jsl-pd__profile, .jsl-pd__helper { font-size: .9em; margin: 0 0 .6rem; }
.jsl-pd__controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.jsl-pd__helper { flex-basis: 100%; }
.jsl-pd .button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	font-family: inherit;
	font-size: .95em;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
	min-height: 48px;
	padding: .65rem 1.2rem;
	text-align: center;
	text-transform: none;
	white-space: normal;
}
.jsl-pd .button.primary { background-color: var(--jsl-primary); border-color: var(--jsl-primary); color: #fff; }
.jsl-pd .button.is-outline { background: transparent; border: 1px solid var(--jsl-border); color: inherit; font-weight: 400; }
.jsl-pd .button:disabled, .jsl-pd__close:disabled { cursor: wait; opacity: .5; }
.jsl-pd :focus-visible { outline: 2px solid var(--jsl-primary); outline-offset: 3px; }
.jsl-pd__message:empty, .jsl-pd__modal-message:empty { display: none; }
.jsl-pd__message, .jsl-pd__modal-message { font-size: .9em; margin: .6rem 0 0; overflow-wrap: anywhere; }
.jsl-pd__message[data-error="true"], .jsl-pd__modal-message[data-error="true"] { color: var(--jsl-text); border-inline-start: 3px solid var(--jsl-error); padding-inline-start: .65rem; }
.jsl-pd__unavailable, .jsl-pd-config-warning { color: var(--jsl-text); }
.jsl-pd__summary { border-inline-start: 3px solid var(--jsl-success); margin-top: .75rem; padding-inline-start: .8rem; }
.jsl-pd__summary[data-draft="true"] { border-color: var(--jsl-warning); }
.jsl-pd__summary-title { display: block; }
.jsl-pd__summary-quality { font-size: .9em; margin: .35rem 0 .7rem; overflow-wrap: anywhere; }
.jsl-pd__summary-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.jsl-pd__editor {
	background: var(--fs-color-white, #fff);
	border: 1px solid var(--jsl-border);
	border-radius: var(--jsl-radius);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	margin: auto;
	max-height: 92vh;
	max-height: 92dvh;
	max-width: 960px;
	overflow: hidden;
	padding: 0;
	width: 92vw;
}
.jsl-pd__editor:not([open]) { display: none; }
.jsl-pd__editor[open] { display: flex; flex-direction: column; }
.jsl-pd__editor::backdrop { background: rgb(31 37 43 / 55%); }
.jsl-pd__editor.jsl-pd__editor--fallback { position: fixed; inset: 0; z-index: 2147483647; box-shadow: 0 0 0 100vmax rgb(31 37 43 / 55%); }
.jsl-pd__modal-header { align-items: start; border-bottom: 1px solid var(--jsl-border); display: flex; flex: 0 0 auto; gap: .75rem; padding: 1rem 1.5rem; }
.jsl-pd__modal-header > div { flex: 1; min-width: 0; }
.jsl-pd__modal-header h2 { font-size: 1.25em; line-height: 1.5; margin: 0; }
.jsl-pd__modal-header h2:focus { outline: none; }
.jsl-pd__modal-header p { font-size: .9em; line-height: 1.5; margin: .25rem 0 0; }
.jsl-pd__close { background: transparent; border: 0; border-radius: var(--jsl-radius); color: inherit; cursor: pointer; font: inherit; font-size: 1.75rem; flex-shrink: 0; height: 48px; line-height: 1; margin: 0; min-width: 48px; padding: 0; }
.jsl-pd__modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 1rem 1.5rem; }
.jsl-pd__orientation-wrap { align-items: center; display: flex; gap: .75rem; margin: 0 0 .75rem; }
.jsl-pd__orientation { font: inherit; margin: 0; min-height: 48px; max-width: 12rem; }
.jsl-pd__stage { align-items: center; background: #f5f3ef; border-radius: var(--jsl-radius); display: flex; justify-content: center; min-height: 160px; overflow: hidden; padding: .5rem; }
.jsl-pd__canvas { background: #ececec; cursor: grab; display: block; height: auto; max-height: 48vh; max-height: 48dvh; max-width: 100%; touch-action: none; width: auto; }
.jsl-pd__canvas:active { cursor: grabbing; }
.jsl-pd__hint { font-size: .85em; line-height: 1.5; margin: .5rem 0; }
.jsl-pd__zoom-label { align-items: center; display: flex; gap: 1rem; margin: .5rem 0; }
.jsl-pd__zoom { accent-color: var(--jsl-primary); flex: 1; margin: 0; min-width: 0; min-height: 48px; }
.jsl-pd__quality { background: #f7f5f1; border-inline-start: 3px solid var(--jsl-border); border-radius: var(--jsl-radius); font-size: .9em; line-height: 1.6; margin: .5rem 0; overflow-wrap: anywhere; padding: .6rem .75rem; white-space: pre-line; }
.jsl-pd__quality[data-level="excellent"], .jsl-pd__quality[data-level="good"], .jsl-pd__quality[data-level="acceptable"] { border-inline-start-color: var(--jsl-success); }
.jsl-pd__quality[data-level="low"] { border-inline-start-color: var(--jsl-warning); }
.jsl-pd__quality[data-level="too_low"] { border-inline-start-color: var(--jsl-error); }
.jsl-pd__quality:empty { display: none; }
.jsl-pd__quality-actions { margin: .5rem 0; }
.jsl-pd__modal-actions { align-items: center; background: var(--fs-color-white, #fff); border-top: 1px solid var(--jsl-border); display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .65rem; padding: .85rem 1.5rem; }
.jsl-pd__confirm { margin-inline-start: auto !important; }
.jsl-pd-cart-preview { object-fit: cover; }
@media (max-width: 767px) {
	.jsl-pd { padding: .85rem; }
	.jsl-pd__editor { border: 0; border-radius: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; max-width: 100vw; width: 100vw; }
	.jsl-pd__modal-header { padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem; }
	.jsl-pd__modal-header h2 { font-size: 1.1em; }
	.jsl-pd__modal-header p { font-size: .85em; }
	.jsl-pd__modal-body { padding: .75rem 1rem; }
	.jsl-pd__canvas { max-height: 42vh; max-height: 42dvh; }
	.jsl-pd__stage { min-height: 144px; padding: .25rem; }
	.jsl-pd__modal-actions { display: grid; grid-template-columns: 1fr 1fr; padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
	.jsl-pd__modal-actions .button { width: 100%; }
	.jsl-pd__confirm { grid-column: 1 / -1; grid-row: 1; margin-inline-start: 0 !important; }
	.jsl-pd__summary-actions .button { flex: 1; }
}
@media (max-height: 500px) {
	.jsl-pd__modal-header { padding-top: .5rem; padding-bottom: .5rem; }
	.jsl-pd__modal-header p { font-size: .8em; }
	.jsl-pd__modal-actions { padding-top: .5rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
	.jsl-pd__canvas { max-height: 50vh; max-height: 50dvh; }
}