.pdd-launcher,
.pdd-dialog {
	--pdd-sf-accent: #6d3df5;
	--pdd-sf-accent-dark: #5223d4;
	--pdd-sf-accent-light: #9664ff;
	--pdd-sf-accent-rgb: 109 61 245;
	--pdd-sf-border: #e3e5ea;
	--pdd-sf-ink: #171a21;
	--pdd-sf-muted: #687083;
	--pdd-sf-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-sizing: border-box;
	font-family: var(--pdd-sf-font);
}

/*
 * Branding lock: themes commonly apply high-specificity WooCommerce button and
 * form typography. Keep merchant branding authoritative inside this component.
 */
.pdd-launcher,
.pdd-launcher *,
.pdd-dialog,
.pdd-dialog * {
	font-family: var(--pdd-sf-font) !important;
}

.pdd-launcher .pdd-launcher__icon,
.pdd-dialog .pdd-dialog__mark {
	background: linear-gradient(145deg, var(--pdd-sf-accent), var(--pdd-sf-accent-light)) !important;
}

.pdd-launcher .pdd-launcher__button,
.pdd-dialog .pdd-primary-button {
	background: linear-gradient(180deg, var(--pdd-sf-accent-light), var(--pdd-sf-accent)) !important;
	border-color: var(--pdd-sf-accent-dark) !important;
	color: #fff !important;
}

.pdd-launcher .pdd-launcher__button:hover,
.pdd-launcher .pdd-launcher__button:focus,
.pdd-dialog .pdd-primary-button:hover,
.pdd-dialog .pdd-primary-button:focus {
	background: var(--pdd-sf-accent-dark) !important;
	color: #fff !important;
}

.pdd-dialog input[type="checkbox"],
.pdd-dialog input[type="radio"],
.pdd-dialog input[type="range"] {
	accent-color: var(--pdd-sf-accent) !important;
}

.pdd-dialog :focus-visible,
.pdd-launcher :focus-visible {
	outline-color: rgb(var(--pdd-sf-accent-rgb) / 45%) !important;
}

.pdd-dialog .pdd-font-picker { display: block !important; max-width: 100% !important; min-width: 0 !important; position: relative !important; width: 100% !important; }
.pdd-dialog .pdd-font-picker__native { height: 1px !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; width: 1px !important; }
.pdd-dialog .pdd-font-picker__button { align-items: center !important; background: #fff !important; border: 1px solid var(--pdd-sf-border) !important; border-radius: 8px !important; color: var(--pdd-sf-ink) !important; display: flex !important; font-size: 14px !important; justify-content: space-between !important; min-height: 40px !important; padding: 7px 10px !important; text-align: left !important; width: 100% !important; }
.pdd-dialog .pdd-font-picker__button span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.pdd-dialog .pdd-font-picker__popover { background: #fff !important; border: 1px solid var(--pdd-sf-border) !important; border-radius: 12px !important; box-shadow: 0 18px 42px rgb(24 32 56 / 20%) !important; left: auto !important; max-width: calc(100vw - 40px) !important; min-width: 0 !important; padding: 9px !important; position: absolute !important; right: 0 !important; top: calc(100% + 6px) !important; width: 240px !important; z-index: 50 !important; }
.pdd-dialog .pdd-font-picker__search { background: #fff !important; border: 1px solid var(--pdd-sf-border) !important; border-radius: 8px !important; color: var(--pdd-sf-ink) !important; margin: 0 0 7px !important; min-height: 38px !important; padding: 7px 9px !important; width: 100% !important; }
.pdd-dialog .pdd-font-picker__results { display: grid !important; gap: 3px !important; max-height: 300px !important; overflow: auto !important; }
.pdd-dialog .pdd-font-picker__option { align-items: center !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; color: var(--pdd-sf-ink) !important; cursor: pointer !important; display: grid !important; gap: 2px 9px !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 8px !important; text-align: left !important; width: 100% !important; }
.pdd-dialog .pdd-font-picker__option:hover, .pdd-dialog .pdd-font-picker__option[aria-selected="true"] { background: rgb(var(--pdd-sf-accent-rgb) / 10%) !important; color: var(--pdd-sf-accent-dark) !important; }
.pdd-dialog .pdd-font-picker__option strong { font-size: 11px !important; }
.pdd-dialog .pdd-font-picker__option span { font-size: 18px !important; grid-column: 2 !important; grid-row: 1 / 3 !important; }
.pdd-dialog .pdd-font-picker__option small, .pdd-dialog .pdd-font-picker__popover > small { color: var(--pdd-sf-muted) !important; font-size: 9px !important; text-transform: capitalize !important; }

.pdd-launcher *,
.pdd-dialog * {
	box-sizing: border-box;
}

.pdd-visually-hidden {
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pdd-launcher {
	align-items: center;
	background:
		radial-gradient(circle at 100% 0, rgb(var(--pdd-sf-accent-rgb) / 12%), transparent 34%),
		linear-gradient(145deg, #fff, #faf9ff);
	border: 1px solid var(--pdd-sf-border);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgb(16 24 40 / 7%);
	display: grid;
	gap: 13px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin: 0 0 20px;
	padding: 15px;
}

.pdd-launcher__icon {
	align-items: center;
	background: linear-gradient(145deg, var(--pdd-sf-accent), var(--pdd-sf-accent-light));
	border-radius: 11px;
	box-shadow: 0 6px 16px rgb(var(--pdd-sf-accent-rgb) / 22%);
	display: flex;
	height: 43px;
	justify-content: center;
	width: 43px;
}

.pdd-launcher__icon svg {
	fill: #fff;
	height: 22px;
	width: 22px;
}

.pdd-launcher__copy strong,
.pdd-launcher__copy span {
	display: block;
}

.pdd-launcher__copy strong {
	color: var(--pdd-sf-ink);
	font-size: 14px;
	line-height: 1.3;
}

.pdd-launcher__copy span {
	color: var(--pdd-sf-muted);
	font-size: 12px;
	line-height: 1.45;
	margin-top: 3px;
}

.pdd-launcher__button,
.pdd-primary-button,
.pdd-secondary-button {
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
}

.pdd-launcher__button,
.pdd-primary-button {
	background: linear-gradient(180deg, var(--pdd-sf-accent-light), var(--pdd-sf-accent));
	border: 1px solid var(--pdd-sf-accent-dark);
	box-shadow: 0 3px 7px rgb(var(--pdd-sf-accent-rgb) / 20%);
	color: #fff;
}

.pdd-launcher__button:hover,
.pdd-launcher__button:focus,
.pdd-primary-button:hover,
.pdd-primary-button:focus {
	background: var(--pdd-sf-accent-dark);
	color: #fff;
}

.pdd-launcher__button:focus,
.pdd-primary-button:focus,
.pdd-secondary-button:focus,
.pdd-dialog__close:focus {
	outline: 3px solid rgb(var(--pdd-sf-accent-rgb) / 24%);
	outline-offset: 2px;
}

.pdd-launcher__button:disabled,
.pdd-primary-button:disabled {
	background: #a9adb6;
	border-color: #969ba5;
	box-shadow: none;
	cursor: not-allowed;
	opacity: .8;
}

.pdd-launcher__button svg {
	fill: currentColor;
	height: 15px;
	margin-left: 6px;
	width: 15px;
}

.pdd-launcher__hint {
	color: #8a4b00;
	font-size: 11px;
	grid-column: 2 / -1;
	margin: -7px 0 0;
}

.pdd-launcher__saved {
	color: #08783e;
	font-size: 11px;
	font-weight: 650;
	grid-column: 2 / -1;
	margin: -7px 0 0;
}

.pdd-dialog {
	background: transparent;
	border: 0;
	height: min(900px, calc(100dvh - 32px));
	margin: auto;
	max-height: none;
	max-width: 1420px;
	padding: 0;
	width: calc(100% - 32px);
}

.pdd-dialog::backdrop {
	backdrop-filter: blur(5px);
	background: rgb(15 18 28 / 70%);
}

.pdd-dialog [hidden] {
	display: none !important;
}

.pdd-dialog__surface {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 30px 80px rgb(0 0 0 / 30%);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 100%;
	overflow: hidden;
}

.pdd-dialog__header,
.pdd-dialog__footer {
	align-items: center;
	display: flex;
	padding: 13px 17px;
}

.pdd-dialog__header {
	background:
		radial-gradient(circle at 90% 0, rgb(var(--pdd-sf-accent-rgb) / 11%), transparent 28%),
		#fff;
	border-bottom: 1px solid var(--pdd-sf-border);
	justify-content: space-between;
}

.pdd-dialog__brand {
	align-items: center;
	display: flex;
	gap: 10px;
}

.pdd-dialog__mark {
	align-items: center;
	background: linear-gradient(145deg, var(--pdd-sf-accent), var(--pdd-sf-accent-light));
	border-radius: 9px;
	color: #fff;
	display: flex;
	font-size: 17px;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.pdd-dialog__mark img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.pdd-dialog__brand span:not(.pdd-dialog__mark) {
	color: var(--pdd-sf-accent-dark);
	display: block;
	font-size: 9px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pdd-dialog__brand h2 {
	color: var(--pdd-sf-ink);
	font-size: 15px;
	line-height: 1.3;
	margin: 1px 0 0;
}

.pdd-dialog__close {
	align-items: center;
	background: #f3f4f6;
	border: 0;
	border-radius: 50%;
	color: #505766;
	cursor: pointer;
	display: flex;
	font-size: 24px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0 0 3px;
	width: 34px;
}

.pdd-dialog__loading,
.pdd-dialog__error {
	align-items: center;
	align-self: center;
	color: var(--pdd-sf-muted);
	display: flex;
	flex-direction: column;
	gap: 7px;
	justify-self: center;
	padding: 40px;
	text-align: center;
}

.pdd-dialog__loading strong,
.pdd-dialog__error strong {
	color: var(--pdd-sf-ink);
	font-size: 16px;
}

.pdd-spinner {
	animation: pdd-spin .75s linear infinite;
	border: 3px solid #e5e0fc;
	border-radius: 50%;
	border-top-color: var(--pdd-sf-accent);
	height: 34px;
	margin-bottom: 6px;
	width: 34px;
}

@keyframes pdd-spin {
	to { transform: rotate(360deg); }
}

.pdd-designer-shell {
	background: #f3f4f7;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 290px;
	min-height: 0;
}

.pdd-designer-shell__steps {
	background: #fff;
	border-right: 1px solid var(--pdd-sf-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 10px;
}

.pdd-designer-shell__steps span {
	align-items: center;
	border-radius: 9px;
	color: var(--pdd-sf-muted);
	display: flex;
	flex-direction: column;
	font-size: 10px;
	gap: 5px;
	padding: 9px 4px;
}

.pdd-designer-shell__steps b {
	align-items: center;
	background: #eef0f3;
	border-radius: 50%;
	display: flex;
	font-size: 10px;
	height: 25px;
	justify-content: center;
	width: 25px;
}

.pdd-designer-shell__steps span.is-active {
	background: #f2efff;
	color: var(--pdd-sf-accent-dark);
	font-weight: 700;
}

.pdd-designer-shell__steps .is-active b {
	background: var(--pdd-sf-accent);
	color: #fff;
}

.pdd-tool-rail button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 9px;
	color: var(--pdd-sf-muted);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	font-size: 10px;
	gap: 5px;
	padding: 9px 4px;
}

.pdd-tool-rail button:hover,
.pdd-tool-rail button:focus {
	background: #f2efff;
	color: var(--pdd-sf-accent-dark);
	outline: 0;
}

.pdd-tool-rail button:focus {
	box-shadow: inset 0 0 0 2px var(--pdd-sf-accent);
}

.pdd-tool-rail button:disabled {
	cursor: not-allowed;
	opacity: .4;
}

.pdd-tool-rail button b {
	align-items: center;
	background: #eef0f3;
	border-radius: 7px;
	display: flex;
	font-size: 14px;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.pdd-designer-shell__workspace {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-width: 0;
	position: relative;
}

.pdd-template-drawer {
	background: #fff;
	border-right: 1px solid var(--pdd-sf-border);
	box-shadow: 12px 0 30px rgb(16 24 40 / 12%);
	inset: 0 auto 0 0;
	overflow-y: auto;
	padding: 18px;
	position: absolute;
	width: min(350px, 88%);
	z-index: 10;
}

.pdd-template-drawer header {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.pdd-template-drawer h3 {
	font-size: 17px;
	margin: 3px 0 0;
}

.pdd-template-drawer header button {
	align-items: center;
	background: #f3f4f6;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	font-size: 20px;
	height: 31px;
	justify-content: center;
	width: 31px;
}

.pdd-template-drawer > p {
	color: var(--pdd-sf-muted);
	font-size: 11px;
	line-height: 1.5;
	margin: 13px 0 16px;
}

.pdd-template-grid {
	display: grid;
	gap: 11px;
}

.pdd-saved-design-list {
	display: grid;
	gap: 10px;
}

.pdd-saved-design-card {
	align-items: center;
	background: #fff;
	border: 1px solid #e1e4e9;
	border-radius: 10px;
	cursor: pointer;
	display: grid;
	gap: 4px 10px;
	grid-template-columns: 38px minmax(0, 1fr);
	padding: 12px;
	text-align: left;
}

.pdd-saved-design-card::before {
	align-items: center;
	background: #f2efff;
	border-radius: 9px;
	color: var(--pdd-sf-accent);
	content: "↻";
	display: flex;
	font-size: 19px;
	grid-row: 1 / 3;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.pdd-saved-design-card:hover,
.pdd-saved-design-card:focus {
	border-color: #b9aaf5;
	box-shadow: 0 7px 18px rgb(var(--pdd-sf-accent-rgb) / 10%);
	outline: 0;
}

.pdd-saved-design-card strong,
.pdd-saved-design-card time {
	display: block;
}

.pdd-saved-design-card time {
	color: var(--pdd-sf-muted);
	font-size: 10px;
}

.pdd-uploads-actions { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.pdd-button-link-danger { background: transparent; border: 0; color: #b42318; cursor: pointer; font-size: 10px; font-weight: 700; }
.pdd-recent-uploads-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdd-recent-upload { background: #fff; border: 1px solid #e1e4e9; border-radius: 10px; overflow: hidden; position: relative; }
.pdd-recent-upload > button:first-child { background: transparent; border: 0; cursor: pointer; display: block; padding: 0 0 8px; width: 100%; }
.pdd-recent-upload img { aspect-ratio: 1; background: linear-gradient(145deg, #f5f2ff, #fff); display: block; object-fit: contain; width: 100%; }
.pdd-recent-upload strong { display: block; font-size: 9px; overflow: hidden; padding: 8px 7px 0; text-overflow: ellipsis; white-space: nowrap; }
.pdd-recent-upload__remove { align-items: center; background: #fff; border: 1px solid #e1e4e9; border-radius: 50%; color: #b42318; cursor: pointer; display: flex; height: 25px; justify-content: center; position: absolute; right: 6px; top: 6px; width: 25px; }

.pdd-template-card {
	background: #fff;
	border: 1px solid #e1e4e9;
	border-radius: 10px;
	cursor: pointer;
	display: grid;
	gap: 10px;
	grid-template-columns: 92px minmax(0, 1fr);
	padding: 9px;
	text-align: left;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pdd-template-card:hover,
.pdd-template-card:focus {
	border-color: #b9aaf5;
	box-shadow: 0 8px 20px rgb(var(--pdd-sf-accent-rgb) / 11%);
	outline: 0;
	transform: translateY(-1px);
}

.pdd-template-card__preview {
	align-items: center;
	aspect-ratio: 1;
	background: linear-gradient(145deg, #f5f2ff, #fff);
	border: 1px solid #e6e0fb;
	border-radius: 8px;
	color: #251653;
	display: flex;
	flex-direction: column;
	font-size: 11px;
	font-weight: 800;
	justify-content: center;
	letter-spacing: .08em;
	overflow: hidden;
	position: relative;
	text-align: center;
}

.pdd-template-card__preview::after {
	background: var(--pdd-sf-accent);
	border-radius: 999px;
	content: "";
	height: 4px;
	margin-top: 8px;
	width: 45%;
}

.pdd-template-card__preview.is-monogram {
	border-radius: 50%;
}

.pdd-template-card__preview.is-vibes {
	background: radial-gradient(circle, #ff9b3d 0 34%, #fff 35%);
}

.pdd-template-card__preview.is-varsity { background: linear-gradient(160deg, #17233c 0 52%, #e24a3b 53%); color: #fff; }
.pdd-template-card__preview.is-weekend { background: linear-gradient(#ffcb47 0 48%, #6d3df5 49%); color: #16213e; }
.pdd-template-card__preview.is-outdoors { background: radial-gradient(circle, #f4c66b 0 58%, #173f3b 59%); color: #173f3b; }
.pdd-template-card__preview.is-studio { background: linear-gradient(#fff 0 36%, #6d3df5 37% 64%, #fff 65%); color: #111827; }
.pdd-template-card__preview.is-kids { background: radial-gradient(circle, #dff4ff 0 58%, #5a52c7 59%); color: #5a52c7; }
.pdd-template-card__preview.is-coffee { background: radial-gradient(circle, #f4ead9 0 58%, #533a2e 59%); color: #533a2e; }

.pdd-template-card__copy {
	align-self: center;
	min-width: 0;
}

.pdd-template-card__copy strong,
.pdd-template-card__copy span {
	display: block;
}

.pdd-clipart-customer-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdd-clipart-customer-card {
	background: #fff;
	border: 1px solid #e1e4e9;
	border-radius: 9px;
	cursor: pointer;
	overflow: hidden;
	padding: 0 0 9px;
}

.pdd-clipart-customer-card:hover,
.pdd-clipart-customer-card:focus {
	border-color: #b9aaf5;
	box-shadow: 0 7px 18px rgb(var(--pdd-sf-accent-rgb) / 10%);
	outline: 0;
}

.pdd-clipart-customer-card img {
	aspect-ratio: 1;
	background: linear-gradient(145deg, #f5f2ff, #fff);
	display: block;
	object-fit: contain;
	width: 100%;
}

.pdd-clipart-customer-card span {
	color: var(--pdd-sf-ink);
	display: block;
	font-size: 10px;
	font-weight: 650;
	overflow: hidden;
	padding: 8px 8px 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pdd-code-generator {
	display: grid;
	gap: 10px;
}

.pdd-code-generator label > span {
	color: #444b59;
	display: block;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 6px;
}

.pdd-code-generator input,
.pdd-code-generator textarea {
	border: 1px solid #d4d8df;
	border-radius: 8px;
	font: inherit;
	padding: 9px;
	width: 100%;
}

.pdd-code-generator hr {
	border: 0;
	border-top: 1px solid var(--pdd-sf-border);
	margin: 9px 0;
}

.pdd-template-card__copy strong {
	color: var(--pdd-sf-ink);
	font-size: 12px;
}

.pdd-template-card__copy span {
	color: var(--pdd-sf-muted);
	font-size: 10px;
	line-height: 1.45;
	margin-top: 4px;
}

.pdd-designer-toolbar {
	align-items: center;
	background: #fff;
	border-bottom: 1px solid var(--pdd-sf-border);
	display: flex;
	justify-content: space-between;
	min-height: 54px;
	padding: 8px 14px;
}

.pdd-designer-toolbar > div {
	display: flex;
	gap: 6px;
}

.pdd-designer-toolbar .pdd-colour-picker {
	border-left: 1px solid var(--pdd-sf-border);
	margin-left: 8px;
	padding-left: 10px;
}

.pdd-colour-picker button {
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #cfd4dc;
	height: 25px;
	padding: 0;
	position: relative;
	width: 25px;
}

.pdd-colour-picker button.is-active {
	box-shadow: 0 0 0 2px var(--pdd-sf-accent);
}

.pdd-colour-picker button.is-active::after {
	background: #fff;
	border: 1px solid rgb(0 0 0 / 18%);
	border-radius: 50%;
	content: "";
	height: 5px;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 5px;
}

.pdd-designer-toolbar .pdd-history-actions {
	border-left: 1px solid var(--pdd-sf-border);
	margin-left: auto;
	padding-left: 9px;
}

.pdd-designer-toolbar button {
	background: #f5f6f8;
	border: 1px solid #e0e3e8;
	border-radius: 7px;
	color: #4f5766;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	padding: 7px 11px;
}

.pdd-designer-toolbar button.is-active {
	background: #f0ecff;
	border-color: #cfc4fb;
	color: var(--pdd-sf-accent-dark);
}

.pdd-designer-toolbar > span {
	color: var(--pdd-sf-muted);
	font-size: 11px;
}

.pdd-side-actions {
	position: relative;
}

.pdd-side-actions > summary {
	background: #fff;
	border: 1px solid var(--pdd-sf-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	list-style: none;
	padding: 8px 10px;
}

.pdd-side-actions > summary::-webkit-details-marker {
	display: none;
}

.pdd-side-actions[open] > summary {
	border-color: #b9aaf5;
	color: var(--pdd-sf-accent);
}

.pdd-side-actions > div {
	background: #fff;
	border: 1px solid var(--pdd-sf-border);
	border-radius: 11px;
	box-shadow: 0 12px 32px rgb(16 24 40 / 16%);
	display: grid;
	gap: 9px;
	padding: 12px;
	position: absolute;
	right: 0;
	top: calc(100% + 7px);
	width: 210px;
	z-index: 12;
}

.pdd-side-actions strong,
.pdd-side-actions label span {
	color: var(--pdd-sf-ink);
	font-size: 10px;
}

.pdd-side-actions label {
	display: grid;
	gap: 5px;
}

.pdd-side-actions select {
	background: #fff;
	border: 1px solid var(--pdd-sf-border);
	border-radius: 7px;
	font: inherit;
	padding: 7px;
	width: 100%;
}

.pdd-side-actions button {
	justify-content: center;
	width: 100%;
}

.pdd-side-actions button.is-danger {
	background: #fff1f1;
	border-color: #f0a8a8;
	color: #b42318;
}

.pdd-image-flip-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 12px;
}

.pdd-image-flip-buttons button {
	font-size: 13px;
	gap: 6px;
	width: auto;
}

.pdd-image-flip-buttons button span {
	font-size: 9px;
	font-weight: 700;
}

.pdd-zoom-control,
.pdd-snap-control {
	align-items: center;
	color: var(--pdd-sf-muted);
	display: flex;
	font-size: 10px;
	gap: 5px;
	margin-left: 8px;
}

.pdd-zoom-control select {
	border: 1px solid #e0e3e8;
	border-radius: 7px;
	font: inherit;
	padding: 5px 7px;
}

.pdd-snap-control {
	background: #f5f6f8;
	border-radius: 999px;
	cursor: pointer;
	padding: 5px 8px;
}

.pdd-snap-control input {
	accent-color: var(--pdd-sf-accent);
	margin: 0;
}

.pdd-preview-stage {
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: auto;
	padding: 28px;
	position: relative;
}

.pdd-preview-stage__canvas {
	background: #fff;
	box-shadow: 0 18px 45px rgb(16 24 40 / 16%);
	max-height: 100%;
	max-width: min(680px, 100%);
	position: relative;
	width: min(68vh, 100%);
	transition: width .18s ease;
}

.pdd-preview-stage__canvas > img {
	display: block;
	height: 100%;
	object-fit: contain;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.pdd-preview-stage__colour {
	inset: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.pdd-preview-stage__canvas > canvas {
	height: 100%;
	inset: 0;
	position: absolute;
	touch-action: none;
	width: 100%;
	z-index: 3;
}

.pdd-preview-stage__canvas > canvas:focus {
	outline: 3px solid rgb(var(--pdd-sf-accent-rgb) / 22%);
	outline-offset: 4px;
}

.pdd-selection-actions {
	align-items: center;
	background: rgb(255 255 255 / 96%);
	border: 1px solid var(--pdd-sf-border);
	border-radius: 10px;
	bottom: 14px;
	box-shadow: 0 8px 24px rgb(16 24 40 / 15%);
	display: flex;
	gap: 3px;
	left: 50%;
	padding: 5px;
	position: absolute;
	transform: translateX(-50%);
	z-index: 7;
}

.pdd-selection-actions button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #4f5766;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 13px;
	gap: 5px;
	height: 31px;
	justify-content: center;
	min-width: 31px;
	padding: 5px 8px;
}

.pdd-selection-actions button:hover,
.pdd-selection-actions button:focus {
	background: #f0ecff;
	color: var(--pdd-sf-accent-dark);
	outline: 0;
}

.pdd-selection-actions button:last-child {
	color: #b42318;
}

.pdd-preview-stage__canvas > img.pdd-preview-stage__mask {
	pointer-events: none;
	z-index: 4;
}

.pdd-preview-stage__print-area {
	border: 2px dashed rgb(var(--pdd-sf-accent-rgb) / 75%);
	background: rgb(var(--pdd-sf-accent-rgb) / 5%);
	pointer-events: none;
	position: absolute;
	z-index: 5;
}

.pdd-designer-shell__details {
	background: #fff;
	border-left: 1px solid var(--pdd-sf-border);
	overflow-y: auto;
	padding: 22px 18px;
}

.pdd-details-kicker {
	color: var(--pdd-sf-accent-dark);
	font-size: 9px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pdd-designer-shell__details h3 {
	color: var(--pdd-sf-ink);
	font-size: 17px;
	margin: 6px 0 8px;
}

.pdd-designer-shell__details > p {
	color: var(--pdd-sf-muted);
	font-size: 12px;
	line-height: 1.55;
}

.pdd-text-inspector {
	border-bottom: 1px solid var(--pdd-sf-border);
	display: grid;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 17px;
}

.pdd-text-inspector > label {
	display: block;
	min-width: 0;
	width: 100%;
}

.pdd-text-inspector label > span {
	color: #4c5361;
	display: block;
	font-size: 10px;
	font-weight: 700;
	margin-bottom: 5px;
}

.pdd-text-inspector textarea,
.pdd-text-inspector select,
.pdd-text-inspector input[type="number"],
.pdd-text-inspector input[type="range"] {
	border: 1px solid #d4d8df;
	border-radius: 7px;
	font: inherit;
	font-size: 12px;
	min-height: 36px;
	padding: 7px 9px;
	width: 100%;
}

.pdd-text-inspector textarea:focus,
.pdd-text-inspector select:focus,
.pdd-text-inspector input:focus {
	border-color: var(--pdd-sf-accent);
	box-shadow: 0 0 0 3px rgb(var(--pdd-sf-accent-rgb) / 12%);
	outline: 0;
}

.pdd-text-inspector input[type="color"] {
	border: 1px solid #d4d8df;
	border-radius: 7px;
	height: 36px;
	padding: 3px;
	width: 100%;
}

.pdd-inspector-grid {
	display: grid;
	gap: 9px;
	grid-template-columns: 1fr 1fr;
}

.pdd-type-buttons {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, 1fr);
}

.pdd-type-buttons button {
	background: #f7f8fa;
	border: 1px solid #dfe2e7;
	border-radius: 7px;
	color: #444b59;
	cursor: pointer;
	font: inherit;
	height: 35px;
}

.pdd-type-buttons button[aria-pressed="true"] {
	background: #f0ecff;
	border-color: #bdaef8;
	color: var(--pdd-sf-accent-dark);
}

.pdd-effect-panel {
	border-top: 1px solid var(--pdd-sf-border);
	padding-top: 9px;
}

.pdd-effect-panel summary {
	color: #343a46;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 0;
}

.pdd-effect-panel[open] summary {
	margin-bottom: 10px;
}

.pdd-inline-check {
	align-items: center;
	display: flex !important;
	gap: 7px;
	margin-bottom: 9px;
}

.pdd-inline-check input {
	accent-color: var(--pdd-sf-accent);
}

.pdd-inline-check > span {
	margin: 0 !important;
}

.pdd-layer-panel {
	border-bottom: 1px solid var(--pdd-sf-border);
	margin-bottom: 12px;
	padding-bottom: 15px;
}

.pdd-layer-panel__heading {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pdd-layer-panel__heading h3 {
	font-size: 12px;
	margin: 0;
}

.pdd-layer-panel__heading span {
	align-items: center;
	background: #f0ecff;
	border-radius: 999px;
	color: var(--pdd-sf-accent-dark);
	display: flex;
	font-size: 9px;
	font-weight: 700;
	height: 21px;
	justify-content: center;
	min-width: 21px;
}

[data-pdd-layer-list] {
	display: grid;
	gap: 5px;
}

.pdd-layer-row {
	align-items: center;
	background: #f7f8fa;
	border: 1px solid #e1e4e9;
	border-radius: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 4px;
}

.pdd-layer-row.is-active {
	background: #f0ecff;
	border-color: #cfc4fb;
}

.pdd-layer-row.is-hidden {
	opacity: .62;
}

[data-pdd-layer-list] .pdd-layer-select {
	align-items: center;
	background: transparent;
	border: 0;
	color: #454c59;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 8px;
	padding: 7px 8px;
	text-align: left;
	width: 100%;
}

.pdd-layer-row.is-active .pdd-layer-select {
	color: var(--pdd-sf-accent-dark);
}

[data-pdd-layer-list] .pdd-layer-select b {
	align-items: center;
	background: #fff;
	border: 1px solid #dfe2e7;
	border-radius: 5px;
	display: flex;
	height: 25px;
	justify-content: center;
	width: 25px;
}

[data-pdd-layer-list] .pdd-layer-select span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pdd-layer-actions {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(2, 25px);
}

[data-pdd-layer-list] .pdd-layer-action {
	align-items: center;
	background: #fff;
	border: 1px solid #e0e3e8;
	border-radius: 5px;
	color: #596170;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 10px;
	height: 24px;
	justify-content: center;
	padding: 0;
	width: 24px;
}

[data-pdd-layer-list] .pdd-layer-action:hover,
[data-pdd-layer-list] .pdd-layer-action:focus {
	border-color: #a995f7;
	color: var(--pdd-sf-accent-dark);
	outline: 0;
}

[data-pdd-layer-list] .pdd-layer-action:disabled {
	cursor: not-allowed;
	opacity: .35;
}

.pdd-layer-panel__empty {
	color: var(--pdd-sf-muted);
	font-size: 11px;
	margin: 8px 0;
	text-align: center;
}

.pdd-product-facts {
	border-top: 1px solid var(--pdd-sf-border);
	margin-top: 20px;
	padding-top: 8px;
}

.pdd-product-facts div {
	align-items: center;
	border-bottom: 1px solid #f0f1f3;
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}

.pdd-product-facts dt {
	color: var(--pdd-sf-muted);
	font-size: 11px;
}

.pdd-product-facts dd {
	color: var(--pdd-sf-ink);
	font-size: 11px;
	font-weight: 650;
	margin: 0;
}

.pdd-dialog__footer {
	background: #fff;
	border-top: 1px solid var(--pdd-sf-border);
	gap: 9px;
	justify-content: flex-end;
}

.pdd-editor-status {
	color: var(--pdd-sf-muted);
	font-size: 11px;
	margin-right: auto;
}

.pdd-editor-status.is-error {
	color: #b42318;
	font-weight: 650;
}

.pdd-secondary-button {
	background: #fff;
	border: 1px solid #d4d8df;
	color: #414857;
}

@media (max-width: 900px) {
	.pdd-designer-shell {
		grid-template-columns: 72px minmax(0, 1fr);
		overflow-y: auto;
	}

	.pdd-designer-shell__details {
		border-left: 0;
		border-top: 1px solid var(--pdd-sf-border);
		display: block;
		grid-column: 1 / -1;
		overflow: visible;
	}
}

@media (max-width: 640px) {
	.pdd-launcher {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.pdd-launcher__button {
		grid-column: 1 / -1;
		width: 100%;
	}

	.pdd-launcher__hint {
		grid-column: 1 / -1;
	}

	.pdd-dialog {
		height: 100dvh;
		max-height: 100dvh;
		width: 100%;
	}

	.pdd-dialog__surface {
		border-radius: 0;
		grid-template-rows: auto minmax(0, 1fr) auto;
	}

	.pdd-dialog__header {
		padding: 9px 11px;
	}

	.pdd-dialog__mark {
		height: 32px;
		width: 32px;
	}

	.pdd-dialog__brand h2 {
		font-size: 14px;
		max-width: 58vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pdd-dialog__close {
		height: 40px;
		width: 40px;
	}

	.pdd-designer-shell {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.pdd-designer-shell__steps {
		border-bottom: 1px solid var(--pdd-sf-border);
		border-right: 0;
		flex-direction: row;
		flex: 0 0 auto;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 7px 9px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.pdd-designer-shell__steps span {
		flex-direction: row;
		flex: 0 0 auto;
		padding: 6px 9px;
		white-space: nowrap;
	}

	.pdd-tool-rail button {
		flex-direction: row;
		flex: 0 0 auto;
		min-height: 44px;
		padding: 6px 9px;
		white-space: nowrap;
	}

	.pdd-designer-shell__workspace {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		min-height: 480px;
	}

	.pdd-designer-toolbar {
		align-items: center;
		flex: 0 0 auto;
		gap: 7px;
		justify-content: flex-start;
		overflow-x: auto;
		padding: 8px 10px;
		-webkit-overflow-scrolling: touch;
	}

	.pdd-designer-toolbar > * {
		flex: 0 0 auto;
	}

	.pdd-designer-toolbar .pdd-history-actions {
		margin-left: 0;
	}

	.pdd-designer-toolbar > span {
		display: none;
	}

	.pdd-designer-toolbar button,
	.pdd-side-actions > summary,
	.pdd-zoom-control select {
		min-height: 40px;
	}

	.pdd-side-actions > div {
		position: fixed;
		right: 10px;
		top: 118px;
		width: min(260px, calc(100vw - 20px));
	}

	.pdd-preview-stage {
		flex: 1 1 auto;
		min-height: 390px;
		overflow: hidden;
		padding: 14px 12px 58px;
	}

	.pdd-preview-stage__canvas {
		max-height: 360px;
		max-width: 100%;
		width: min(88vw, 360px);
	}

	.pdd-selection-actions {
		bottom: 8px;
		max-width: calc(100% - 16px);
		overflow-x: auto;
	}

	.pdd-selection-actions button {
		flex: 0 0 auto;
		height: 40px;
		min-width: 40px;
	}

	.pdd-selection-actions button span {
		display: none;
	}

	.pdd-template-drawer {
		border: 0;
		box-shadow: 0 16px 40px rgb(16 24 40 / 22%);
		inset: 0;
		padding: 16px;
		position: absolute;
		width: 100%;
	}

	.pdd-template-drawer header button {
		height: 44px;
		width: 44px;
	}

	.pdd-designer-shell__details {
		flex: 0 0 auto;
		padding: 18px 14px 28px;
	}

	.pdd-text-inspector input,
	.pdd-text-inspector select,
	.pdd-text-inspector textarea,
	.pdd-code-generator input,
	.pdd-code-generator textarea {
		font-size: 16px !important;
		min-height: 44px;
	}

	.pdd-layer-panel {
		margin-top: 18px;
	}

	.pdd-dialog__footer {
		gap: 7px;
		overflow-x: auto;
		padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
	}

	.pdd-dialog__footer button {
		flex: 0 0 auto;
		min-height: 44px;
		white-space: nowrap;
	}

	.pdd-editor-status {
		display: none;
	}

	.pdd-dialog__footer [data-pdd-close] {
		display: none;
	}

	.pdd-dialog .pdd-font-picker__popover {
		left: 0 !important;
		max-width: none !important;
		right: auto !important;
		width: min(100%, calc(100vw - 28px)) !important;
	}
}

@media (max-width: 390px) {
	.pdd-dialog__brand span:not(.pdd-dialog__mark) {
		display: none;
	}

	.pdd-preview-stage {
		min-height: 340px;
	}

	.pdd-preview-stage__canvas {
		max-height: 310px;
		width: min(92vw, 310px);
	}
}

@media (max-width: 640px) and (max-height: 700px) {
	.pdd-designer-shell__workspace {
		min-height: 410px;
	}

	.pdd-preview-stage {
		min-height: 320px;
	}

	.pdd-preview-stage__canvas {
		max-height: 285px;
		width: min(78vw, 285px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdd-spinner {
		animation-duration: 1.8s;
	}
}