/* ARIA5 Modern Editor UI
 * Presentation-only overrides for the existing editor. All functional controls
 * and data attributes remain owned by aria5-print-system.
 */

html.a5-modern {
	--a5-modern-ink: #101828;
	--a5-modern-muted: #667085;
	--a5-modern-line: #e4e7ec;
	--a5-modern-surface: #ffffff;
	--a5-modern-canvas: #f2f4f7;
	--a5-modern-blue: #155eef;
	--a5-modern-blue-strong: #004eeb;
	--a5-modern-cyan: #06b6d4;
	--a5-modern-navy: #111827;
	--a5-modern-radius: 16px;
}

html.theme-night.a5-modern {
	--a5-modern-ink: #f8fafc;
	--a5-modern-muted: #a8b3c5;
	--a5-modern-line: #344054;
	--a5-modern-surface: #151d2c;
	--a5-modern-canvas: #0b1220;
	--a5-modern-blue: #53b1fd;
	--a5-modern-blue-strong: #2e90fa;
	--a5-modern-navy: #050b16;
}

/* Give the design studio the width normally occupied by the shop catalogue. */
body.arena5-print-product-page.a5-modern-ui .arena5-shop-sidebar {
	display: none !important;
}

body.arena5-print-product-page.a5-modern-ui .arena5-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	max-width: 1580px;
}

body.arena5-print-product-page.a5-modern-ui .arena5-page-layout__main,
body.arena5-print-product-page.a5-modern-ui .content-area,
body.arena5-print-product-page.a5-modern-ui .site-main,
body.arena5-print-product-page.a5-modern-ui .summary.entry-summary {
	min-width: 0;
	width: 100%;
}

body.arena5-print-product-page.a5-modern-ui .aria5-print-frontend {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--a5-modern-ink);
	overflow: visible;
}

body.arena5-print-product-page.a5-modern-ui .aria5-print-frontend-section-editor {
	background: var(--a5-modern-canvas);
	border: 1px solid #d0d5dd;
	border-radius: 22px;
	box-shadow: 0 20px 55px rgba(16, 24, 40, 0.12);
	margin-bottom: 28px;
	overflow: hidden;
	padding: 0;
}

body.arena5-print-product-page.a5-modern-ui .aria5-print-frontend-section-editor > .aria5-print-frontend-heading {
	display: none;
}

/* Branded studio header and simple three-step orientation. */
.a5-modern-intro {
	align-items: center;
	background:
		radial-gradient(circle at 15% 0%, rgba(6, 182, 212, 0.24), transparent 30%),
		linear-gradient(125deg, #101828 0%, #173b7a 58%, #155eef 100%);
	color: #ffffff;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 22px 26px;
}

.a5-modern-intro__brand {
	align-items: center;
	display: flex;
	gap: 14px;
	min-width: 0;
}

.a5-modern-intro__icon {
	align-items: center;
	background: linear-gradient(145deg, #22d3ee, #2e90fa);
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(3, 105, 161, 0.32);
	display: inline-flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.a5-modern-intro__icon svg {
	fill: none;
	height: 25px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 25px;
}

.a5-modern-intro__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.a5-modern-intro__eyebrow {
	color: #a5f3fc;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.a5-modern-intro__title {
	color: #ffffff;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 900;
	line-height: 1.18;
}

.a5-modern-intro__description {
	color: #d0d5dd;
	font-size: 13px;
	line-height: 1.45;
	max-width: 620px;
}

.a5-modern-steps {
	align-items: center;
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.a5-modern-step {
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: #d0d5dd;
	display: flex;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	padding: 6px 9px;
	white-space: nowrap;
}

.a5-modern-step__number {
	align-items: center;
	background: rgba(255, 255, 255, 0.13);
	border-radius: 50%;
	display: inline-flex;
	font-size: 10px;
	height: 20px;
	justify-content: center;
	width: 20px;
}

.a5-modern-step.is-complete {
	color: #a5f3fc;
}

.a5-modern-step.is-active {
	background: #ffffff;
	border-color: #ffffff;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.22);
	color: #155eef;
}

.a5-modern-step.is-active .a5-modern-step__number {
	background: #155eef;
	color: #ffffff;
}

/* Custom upload surface keeps the original file input and its event handlers. */
.a5-modern-file-input {
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

.a5-modern-upload {
	background: #f8fafc;
	border: 1px dashed #98a2b3;
	border-radius: 12px;
	display: grid;
	gap: 7px;
	padding: 10px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.a5-modern-upload:hover,
.a5-modern-upload:focus-within {
	background: #eff8ff;
	border-color: #2e90fa;
}

.a5-modern-upload.has-file {
	background: #ecfdf3;
	border-color: #12b76a;
}

.a5-modern-upload__button {
	align-items: center;
	background: linear-gradient(135deg, #155eef, #004eeb);
	border: 0;
	border-radius: 9px;
	box-shadow: 0 5px 12px rgba(21, 94, 239, 0.22);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	min-height: 40px;
	padding: 9px 14px;
	width: 100%;
}

.a5-modern-upload__button:hover,
.a5-modern-upload__button:focus-visible {
	background: linear-gradient(135deg, #004eeb, #00359e);
	color: #ffffff;
	outline: 3px solid rgba(46, 144, 250, 0.28);
	outline-offset: 2px;
}

.a5-modern-upload__button svg {
	fill: none;
	height: 19px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 19px;
}

.a5-modern-upload__filename {
	color: var(--a5-modern-muted);
	display: block;
	font-size: 11px;
	line-height: 1.35;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Shared form cards below the studio. */
body.a5-modern-ui .aria5-print-frontend-section:not(.aria5-print-frontend-section-editor) {
	background: #ffffff;
	border: 1px solid var(--a5-modern-line);
	border-radius: var(--a5-modern-radius);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

body.a5-modern-ui .aria5-print-frontend-title {
	color: var(--a5-modern-ink);
	font-weight: 850;
}

body.a5-modern-ui .aria5-print-size-row,
body.a5-modern-ui .aria5-print-zone-row,
body.a5-modern-ui .aria5-print-price-summary {
	border-color: var(--a5-modern-line);
}

body.a5-modern-ui .aria5-print-size-quantity,
body.a5-modern-ui .aria5-print-note,
body.a5-modern-ui .aria5-print-editor-text-field textarea,
body.a5-modern-ui .aria5-print-editor-text-field select,
body.a5-modern-ui .aria5-print-editor-text-field input[type="number"] {
	border-color: #d0d5dd;
	border-radius: 9px;
}

body.a5-modern-ui :is(button, input, select, textarea):focus-visible {
	outline: 3px solid rgba(46, 144, 250, 0.25);
	outline-offset: 2px;
}

/* A true dark workspace, not a light editor floating on a dark page. */
html.theme-night.a5-modern body.a5-modern-ui .arena5-product-header,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-frontend-section:not(.aria5-print-frontend-section-editor) {
	background: #151d2c;
	border-color: #344054;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
	color: #f8fafc;
}

html.theme-night.a5-modern body.a5-modern-ui .arena5-product-header .product_title,
html.theme-night.a5-modern body.a5-modern-ui .arena5-product-header p,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-frontend-title,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-size-label,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-zone-choice,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-price-row dt,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-price-row dd,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-note-label {
	color: #f8fafc;
}

html.theme-night.a5-modern body.a5-modern-ui .aria5-print-frontend-summary,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-minimum-row,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-zone-cost,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-price-empty-hint {
	color: #a8b3c5;
}

html.theme-night.a5-modern body.a5-modern-ui .aria5-print-size-row,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-zone-row,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-price-summary {
	background: #101828;
	border-color: #344054;
}

html.theme-night.a5-modern body.a5-modern-ui .aria5-print-size-quantity,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-note,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-editor-text-field textarea,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-editor-text-field select,
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-editor-text-field input[type="number"],
html.theme-night.a5-modern body.a5-modern-ui .aria5-print-editor-text-field input[type="text"] {
	background: #0c1424;
	border-color: #475467;
	color: #f8fafc;
}

html.theme-night.a5-modern body.a5-modern-ui .aria5-print-frontend-section-editor {
	background: #0b1220;
	border-color: #344054;
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

html.theme-night.a5-modern .a5-modern-upload {
	background: #101828;
	border-color: #667085;
}

html.theme-night.a5-modern .a5-modern-upload:hover,
html.theme-night.a5-modern .a5-modern-upload:focus-within {
	background: #102a43;
	border-color: #53b1fd;
}

html.theme-night.a5-modern .a5-modern-upload.has-file {
	background: #073b2a;
	border-color: #32d583;
}

html.theme-night.a5-modern .a5-modern-upload__filename {
	color: #a8b3c5;
}

@media (min-width: 861px) {
	body.arena5-print-product-page.a5-modern-ui .arena5-container {
		max-width: 1580px;
	}

	body.arena5-print-product-page.a5-modern-ui .arena5-product-header {
		background: #ffffff;
		border: 1px solid var(--a5-modern-line);
		border-radius: 18px;
		box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
		margin-bottom: 24px;
		padding: 18px 22px;
	}

	body.arena5-print-product-page.a5-modern-ui .arena5-product-header__thumb {
		background: #f2f4f7;
		border-radius: 14px;
		overflow: hidden;
	}

	html.a5-modern.a5d-on .aria5-print-editor-shell {
		background: var(--a5-modern-canvas);
		padding: 14px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone-heading {
		align-items: center;
		background: #ffffff;
		border: 1px solid var(--a5-modern-line);
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
		display: flex;
		min-height: 42px;
		padding: 8px 15px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone-heading h4 {
		color: var(--a5-modern-ink);
		font-size: 14px;
		font-weight: 850;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone-layout,
	html[dir="rtl"].a5-modern.a5d-on .aria5-print-editor-zone-layout {
		background: #ffffff;
		border: 1px solid var(--a5-modern-line);
		border-radius: 0 0 16px 16px;
		box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
		grid-template-columns: 172px 84px minmax(480px, 1fr) minmax(250px, 280px);
		min-height: 720px;
		overflow: hidden;
		padding: 0;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone-layout {
		grid-template-areas: "zones tools stage inspector";
	}

	html[dir="rtl"].a5-modern.a5d-on .aria5-print-editor-zone-layout {
		grid-template-areas: "inspector stage tools zones";
		grid-template-columns: minmax(250px, 280px) minmax(480px, 1fr) 84px 172px;
	}

	/* Product sides rail. */
	html.a5-modern.a5d-on .a5d-zones-rail {
		background: #f8fafc;
		border-inline-end: 1px solid var(--a5-modern-line);
		max-height: 720px;
		padding: 14px 10px;
	}

	html[dir="rtl"].a5-modern.a5d-on .a5d-zones-rail {
		border-inline-end: 0;
		border-inline-start: 1px solid var(--a5-modern-line);
	}

	html.a5-modern.a5d-on .a5d-zones-rail .aria5-zone-tabs-title {
		color: #475467;
		font-size: 11px;
		letter-spacing: 0.03em;
		margin-bottom: 5px;
		text-transform: uppercase;
	}

	html.a5-modern.a5d-on .a5d-zones-rail .aria5-print-editor-zone-tab {
		background: #ffffff;
		border: 1px solid #d0d5dd;
		border-radius: 12px;
		box-shadow: 0 2px 5px rgba(16, 24, 40, 0.04);
		padding: 7px;
		transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
	}

	html.a5-modern.a5d-on .a5d-zones-rail .aria5-print-editor-zone-tab:hover {
		border-color: #84adff;
		box-shadow: 0 6px 14px rgba(21, 94, 239, 0.12);
		transform: translateY(-1px);
	}

	html.a5-modern.a5d-on .a5d-zones-rail .a5d-zone-tab--active {
		border-color: var(--a5-modern-blue);
		box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.16);
	}

	html.a5-modern.a5d-on .a5d-zones-rail .a5d-zone-thumb {
		background: #eef2f6;
		border-radius: 9px;
	}

	html.a5-modern.a5d-on .a5d-zones-rail .a5d-zone-thumb img {
		height: 86px;
		object-fit: contain;
	}

	/* Theme-aware, high-contrast tool rail. */
	html.a5-modern.a5d-on .a5d-tools-rail {
		background: #eef4ff;
		border-inline: 1px solid #c7d7fe;
		max-height: 720px;
		padding: 14px 13px;
	}

	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-toolbar-group + .aria5-print-editor-toolbar-group {
		border-color: #c7d7fe;
	}

	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button {
		background: #ffffff;
		border: 1px solid #b2ccff;
		border-radius: 11px;
		box-shadow: 0 2px 6px rgba(21, 94, 239, 0.08);
		color: #155eef;
		height: 48px;
		max-width: 48px;
		min-height: 48px;
		min-width: 48px;
		width: 48px;
	}

	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button:hover,
	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button:focus-visible {
		background: var(--a5-modern-blue);
		border-color: var(--a5-modern-blue);
		color: #ffffff;
		box-shadow: 0 7px 16px rgba(21, 94, 239, 0.24);
		transform: translateY(-1px);
	}

	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button[disabled] {
		background: #e4e7ec;
		border-color: #d0d5dd;
		color: #98a2b3;
		opacity: 0.72;
	}

	html.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-icon {
		color: inherit;
		height: 22px;
		width: 22px;
	}

	html.a5-modern.a5d-on .a5d-tools-rail [data-aria5-fabric-action="deselect"] {
		background: #155eef;
		border-color: #155eef;
		color: #ffffff;
	}

	html.a5-modern.a5d-on .a5d-tools-rail [data-aria5-trigger-artwork-upload],
	html.a5-modern.a5d-on .a5d-tools-rail [data-aria5-add-text] {
		background: #dbeafe;
		border-color: #84adff;
		color: #004eeb;
	}

	/* Spacious canvas area. */
	html.a5-modern.a5d-on .aria5-print-editor-stage {
		background:
			radial-gradient(circle, rgba(152, 162, 179, 0.23) 1px, transparent 1px),
			linear-gradient(145deg, #f8fafc, #eef2f6);
		background-size: 20px 20px, auto;
		border-inline: 1px solid var(--a5-modern-line);
		display: grid;
		align-content: start;
		justify-items: center;
		max-height: 720px;
		overflow: auto;
		padding: 20px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-stage .aria5-print-editor-mockup {
		background: #ffffff;
		border: 1px solid #d0d5dd;
		border-radius: 18px;
		box-shadow: 0 18px 38px rgba(16, 24, 40, 0.14);
		margin: 0 auto;
		max-width: 680px;
		min-height: 600px;
		width: 100%;
	}

	html.a5-modern.a5d-on .aria5-editor-fs-float {
		border-radius: 12px;
		box-shadow: 0 8px 18px rgba(16, 24, 40, 0.13);
	}

	/* Properties panel. */
	html.a5-modern.a5d-on .aria5-print-editor-inspector {
		background: #ffffff;
		border: 0;
		gap: 10px;
		max-height: 720px;
		overflow-y: auto;
		padding: 14px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-object-controls-heading {
		background: #f8fafc;
		border: 1px solid var(--a5-modern-line);
		border-radius: 12px;
		padding: 10px 12px;
	}

	html.a5-modern.a5d-on .a5d-acc {
		background: #ffffff;
		border-color: var(--a5-modern-line);
		border-radius: 12px;
	}

	html.a5-modern.a5d-on .a5d-acc > summary {
		font-size: 13px;
		min-height: 42px;
		padding: 10px 12px;
	}

	html.a5-modern.a5d-on .a5d-acc[open] > summary {
		background: #f8fafc;
		border-bottom: 1px solid var(--a5-modern-line);
	}

	html.a5-modern.a5d-on .aria5-print-editor-clipart-item {
		background: #ffffff;
		border-color: #d0d5dd;
		border-radius: 10px;
		padding: 7px;
		transition: transform 0.15s ease, border-color 0.15s ease;
	}

	html.a5-modern.a5d-on .aria5-print-editor-clipart-item:hover {
		border-color: var(--a5-modern-blue);
		transform: translateY(-2px);
	}

	html.a5-modern.a5d-on .a5d-save .aria5-print-editor-save-design,
	html.a5-modern.a5d-on [data-aria5-ai-generate] {
		background: linear-gradient(135deg, #155eef, #004eeb);
		border: 0;
		border-radius: 10px;
		box-shadow: 0 6px 14px rgba(21, 94, 239, 0.24);
		color: #ffffff;
		font-weight: 850;
	}

	html.a5-modern.a5d-on .a5d-cartbar {
		background: rgba(255, 255, 255, 0.92) !important;
		backdrop-filter: blur(16px) saturate(1.3);
		border: 1px solid rgba(208, 213, 221, 0.88);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -14px 34px rgba(16, 24, 40, 0.12);
		margin-inline: auto;
		max-width: 1580px;
	}

	html.a5-modern.a5d-on .a5d-cartbar-btn {
		background: linear-gradient(135deg, #155eef, #004eeb);
		border-radius: 12px;
		box-shadow: 0 7px 16px rgba(21, 94, 239, 0.24);
		min-width: 240px;
	}

	/* Keep the desktop assistant available throughout product editing. */
	html.a5-modern.a5d-on.a5d-form-visible .arena5-floating-whatsapp {
		opacity: 0;
		pointer-events: none;
		transform: translateY(12px);
	}

	html.a5-modern.a5d-on .aria5-print-size-row.a5d-has-steppers {
		background: #f8fafc;
		border-radius: 10px;
	}

	html.a5-modern.a5d-on .a5d-step {
		background: #ffffff;
		border-color: #d0d5dd;
		color: var(--a5-modern-blue);
	}

	/* Desktop dark theme: every editor column follows the site theme. */
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-shell {
		background: #0b1220;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-zone-heading {
		background: #151d2c;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-zone-heading h4,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-zone-heading span {
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-zone-layout,
	html[dir="rtl"].theme-night.a5-modern.a5d-on .aria5-print-editor-zone-layout {
		background: #101828;
		border-color: #344054;
		box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail {
		background: #111827;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .aria5-zone-tabs-title,
	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .aria5-print-editor-zone-tab-label {
		color: #d0d5dd;
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .aria5-print-editor-zone-tab {
		background: #1d2939;
		border-color: #475467;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .aria5-print-editor-zone-tab:hover {
		background: #233044;
		border-color: #53b1fd;
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .a5d-zone-tab--active {
		border-color: #53b1fd;
		box-shadow: 0 0 0 3px rgba(83, 177, 253, 0.22);
	}

	html.theme-night.a5-modern.a5d-on .a5d-zones-rail .a5d-zone-thumb {
		background: #0c1424;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail {
		background: #0b1220;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-toolbar-group + .aria5-print-editor-toolbar-group {
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button {
		background: #243044;
		border-color: #475467;
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
		color: #f2f4f7;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button:hover,
	html.theme-night.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button:focus-visible {
		background: #2e90fa;
		border-color: #84caff;
		color: #ffffff;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail .aria5-print-editor-tool-button[disabled] {
		background: #182230;
		border-color: #344054;
		color: #7d89a0;
		opacity: 0.82;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail [data-aria5-fabric-action="deselect"] {
		background: #1570ef;
		border-color: #53b1fd;
		color: #ffffff;
	}

	html.theme-night.a5-modern.a5d-on .a5d-tools-rail [data-aria5-trigger-artwork-upload],
	html.theme-night.a5-modern.a5d-on .a5d-tools-rail [data-aria5-add-text] {
		background: #102a43;
		border-color: #2e90fa;
		color: #84caff;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-stage {
		background:
			radial-gradient(circle, rgba(152, 162, 179, 0.2) 1px, transparent 1px),
			linear-gradient(145deg, #111827, #0b1220);
		background-size: 20px 20px, auto;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-stage .aria5-print-editor-mockup {
		background: #182230;
		border-color: #475467;
		box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
	}

	html.theme-night.a5-modern.a5d-on .aria5-editor-fs-float {
		background: rgba(16, 24, 40, 0.94);
		border-color: #475467;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector {
		background: #111827;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector label,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector p,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector small,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector span,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-panel-heading,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-panel-heading span {
		color: #d0d5dd;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-object-controls-heading,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-object-controls,
	html.theme-night.a5-modern.a5d-on .a5d-acc,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-object-extras,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layers-panel {
		background: #151d2c;
		border-color: #344054;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-object-controls {
		border-color: #344054;
		box-shadow: none;
	}

	html.theme-night.a5-modern.a5d-on .a5d-acc > summary {
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .a5d-acc[open] > summary {
		background: #1d2939;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .a5d-empty,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layers-empty {
		background: #101828;
		border-color: #475467;
		color: #a8b3c5;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-clipart-item {
		background: #f8fafc;
		border-color: #667085;
	}

	html.theme-night.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-toolbar-group {
		background: #151d2c;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-tool-button {
		background: #1d2939;
		border-color: #475467;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-tool-button:hover,
	html.theme-night.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-tool-button:focus-visible {
		background: #102a43;
		border-color: #53b1fd;
		color: #ffffff;
	}

	html.theme-night.a5-modern.a5d-on .a5d-cartbar {
		background: rgba(12, 20, 36, 0.94) !important;
		border-color: #344054;
		box-shadow: 0 -16px 38px rgba(0, 0, 0, 0.34);
	}

	html.theme-night.a5-modern.a5d-on .a5d-cartbar-note {
		color: #d0d5dd;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-size-row.a5d-has-steppers,
	html.theme-night.a5-modern.a5d-on .a5d-step {
		background: #101828;
		border-color: #475467;
	}
}

@media (max-width: 1100px) and (min-width: 861px) {
	.a5-modern-intro {
		grid-template-columns: 1fr;
	}

	html.a5-modern.a5d-on .aria5-print-editor-zone-layout,
	html[dir="rtl"].a5-modern.a5d-on .aria5-print-editor-zone-layout {
		grid-template-columns: 122px 72px minmax(350px, 1fr) 250px;
	}

	html[dir="rtl"].a5-modern.a5d-on .aria5-print-editor-zone-layout {
		grid-template-columns: 250px minmax(350px, 1fr) 72px 122px;
	}
}

@media (max-width: 860px) {
	body.arena5-print-product-page.a5-modern-ui .arena5-page-layout {
		padding-inline: 10px;
	}

	body.arena5-print-product-page.a5-modern-ui .arena5-product-header {
		margin-bottom: 14px;
	}

	body.arena5-print-product-page.a5-modern-ui .arena5-product-header__grid {
		gap: 10px;
	}

	body.arena5-print-product-page.a5-modern-ui .product_title {
		font-size: clamp(22px, 7vw, 30px);
		line-height: 1.12;
	}

	body.arena5-print-product-page.a5-modern-ui .aria5-print-frontend-section-editor {
		border-radius: 18px;
		box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
		margin-inline: -2px;
	}

	.a5-modern-intro {
		gap: 14px;
		grid-template-columns: 1fr;
		padding: 16px;
	}

	.a5-modern-intro__icon {
		border-radius: 12px;
		height: 42px;
		width: 42px;
	}

	.a5-modern-intro__title {
		font-size: 21px;
	}

	.a5-modern-intro__description {
		font-size: 12px;
	}

	.a5-modern-steps {
		gap: 5px;
		width: 100%;
	}

	.a5-modern-step {
		flex: 1 1 0;
		font-size: 10px;
		justify-content: center;
		min-width: 0;
		padding: 6px 4px;
	}

	.a5-modern-step__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	html.a5-modern.a5m-on .aria5-print-editor-shell {
		background: #f2f4f7;
		padding: 8px;
	}

	html.a5-modern.a5m-on .aria5-print-editor-zone {
		background: transparent;
		border: 0;
		padding: 0;
	}

	html.a5-modern.a5m-on .aria5-print-editor-zone-heading {
		background: #ffffff;
		border: 1px solid var(--a5-modern-line);
		border-radius: 12px 12px 0 0;
		padding: 8px 11px;
	}

	html.a5-modern.a5m-on .aria5-print-editor-stage {
		background:
			radial-gradient(circle, rgba(152, 162, 179, 0.22) 1px, transparent 1px),
			#f2f4f7;
		background-size: 18px 18px;
		border: 1px solid var(--a5-modern-line);
		border-radius: 0 0 14px 14px;
		padding: 12px 8px;
	}

	html.a5-modern.a5m-on .aria5-print-editor-stage .aria5-print-editor-mockup {
		background: #ffffff;
		border: 1px solid #d0d5dd;
		border-radius: 15px;
		box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
		min-height: min(112vw, 500px);
	}

	html.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar {
		background: rgba(238, 244, 255, 0.98);
		border-color: #b2ccff;
		box-shadow: 0 -10px 24px rgba(16, 24, 40, 0.18);
		height: 62px;
		padding: 9px 10px;
	}

	html.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar-group + .aria5-print-editor-toolbar-group {
		border-color: #b2ccff;
	}

	html.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar .button {
		background: #ffffff;
		border: 1px solid #84adff;
		border-radius: 11px;
		box-shadow: 0 2px 6px rgba(21, 94, 239, 0.1);
		color: #155eef;
		height: 44px;
		min-height: 44px;
		min-width: 44px;
		width: 44px;
	}

	html.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar .aria5-print-editor-tool-icon {
		color: inherit;
	}

	html.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar .button:active {
		background: var(--a5-modern-blue);
		color: #ffffff;
		transform: scale(0.96);
	}

	html.a5-modern.a5m-on.a5m-sheet-design .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-assets-panel,
	html.a5-modern.a5m-on.a5m-sheet-text .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-inspector,
	html.a5-modern.a5m-on.a5m-sheet-layers .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-inspector {
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -22px 50px rgba(16, 24, 40, 0.24);
		max-height: 58vh;
		padding: 18px 14px;
	}

	html.a5-modern.a5m-on.a5m-editor-visible.a5m-zone-open .a5m-bottom-ui {
		background: rgba(255, 255, 255, 0.97);
		backdrop-filter: blur(14px);
		box-shadow: 0 -12px 28px rgba(16, 24, 40, 0.14);
	}

	.a5-modern .a5m-tab {
		background: #f2f4f7;
		border-color: #e4e7ec;
		border-radius: 11px;
		color: #475467;
	}

	.a5-modern .a5m-tab.is-active,
	.a5-modern .a5m-tab[aria-pressed="true"] {
		background: #eff8ff;
		border-color: #84adff;
		color: var(--a5-modern-blue);
	}

	.a5-modern .a5m-action {
		border-radius: 11px;
		font-weight: 850;
	}

	.a5-modern .a5m-action-cart,
	.a5-modern .a5m-action-save {
		background: linear-gradient(135deg, #155eef, #004eeb);
		border-color: transparent;
		box-shadow: 0 5px 12px rgba(21, 94, 239, 0.22);
		color: #ffffff;
	}

	/* Keep chat widgets away from the canvas and fixed editing controls. */
	html.a5-modern.a5m-on.a5m-editor-visible .aria5-assistant,
	html.a5-modern.a5m-on.a5m-editor-visible .arena5-floating-whatsapp {
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	}

	/* Two compact size columns instead of one very long mobile list. */
	body.a5-modern-ui .aria5-print-frontend-section-sizes .aria5-print-size-list {
		display: grid;
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.a5-modern-ui .aria5-print-frontend-section-sizes .aria5-print-size-row {
		align-items: center;
		background: #f8fafc;
		border: 1px solid var(--a5-modern-line);
		border-radius: 11px;
		display: grid;
		gap: 6px;
		grid-template-columns: minmax(0, 1fr) 54px;
		margin: 0;
		padding: 8px 9px;
	}

	body.a5-modern-ui .aria5-print-size-label {
		font-size: 12px;
		font-weight: 800;
	}

	body.a5-modern-ui .aria5-print-size-quantity {
		font-size: 14px;
		height: 36px;
		min-width: 0;
		text-align: center;
		width: 100%;
	}

	body.a5-modern-ui .aria5-print-frontend-section:not(.aria5-print-frontend-section-editor) {
		border-radius: 14px;
		box-shadow: 0 5px 16px rgba(16, 24, 40, 0.05);
	}

	html.theme-night.a5-modern.a5m-on .aria5-print-editor-shell {
		background: #0b1220;
	}

	html.theme-night.a5-modern.a5m-on .aria5-print-editor-zone-heading {
		background: #151d2c;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5m-on .aria5-print-editor-zone-heading h4,
	html.theme-night.a5-modern.a5m-on .aria5-print-editor-zone-heading span {
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5m-on .aria5-print-editor-stage {
		background:
			radial-gradient(circle, rgba(152, 162, 179, 0.2) 1px, transparent 1px),
			#0b1220;
		background-size: 18px 18px;
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5m-on .aria5-print-editor-stage .aria5-print-editor-mockup {
		background: #182230;
		border-color: #475467;
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
	}

	html.theme-night.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar {
		background: rgba(11, 18, 32, 0.98);
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar-group + .aria5-print-editor-toolbar-group {
		border-color: #475467;
	}

	html.theme-night.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar .button {
		background: #243044;
		border-color: #475467;
		color: #f2f4f7;
	}

	html.theme-night.a5-modern.a5m-on.a5m-zone-open .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-toolbar .button[disabled] {
		background: #182230;
		color: #7d89a0;
		opacity: 0.82;
	}

	html.theme-night.a5-modern.a5m-on.a5m-sheet-design .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-assets-panel,
	html.theme-night.a5-modern.a5m-on.a5m-sheet-text .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-inspector,
	html.theme-night.a5-modern.a5m-on.a5m-sheet-layers .aria5-print-editor-zone:not([hidden]) .aria5-print-editor-inspector {
		background: #151d2c;
		border-color: #344054;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5m-on.a5m-editor-visible.a5m-zone-open .a5m-bottom-ui {
		background: rgba(12, 20, 36, 0.97);
		border-color: #344054;
		box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.34);
	}

	html.theme-night.a5-modern .a5m-tab {
		background: #1d2939;
		border-color: #344054;
		color: #d0d5dd;
	}

	html.theme-night.a5-modern .a5m-tab.is-active,
	html.theme-night.a5-modern .a5m-tab[aria-pressed="true"] {
		background: #102a43;
		border-color: #53b1fd;
		color: #84caff;
	}

	html.theme-night.a5-modern body.a5-modern-ui .aria5-print-frontend-section-sizes .aria5-print-size-row {
		background: #101828;
		border-color: #344054;
	}
}

@media (max-width: 430px) {
	.a5-modern-intro__description {
		display: none;
	}

	.a5-modern-step__number {
		height: 18px;
		width: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a5-modern *,
	.a5-modern *::before,
	.a5-modern *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===== Top action bar + compact clipart library ===== */
.a5-modern-actionbar {
	align-items: center;
	background: linear-gradient(90deg, #f8fafc, #eef4ff);
	border: 1px solid var(--a5-modern-line);
	border-bottom: 0;
	display: flex;
	gap: 14px;
	min-height: 62px;
	padding: 9px 13px;
	position: relative;
	z-index: 12;
}

.a5-modern-actionbar__title {
	color: #475467;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.a5-modern-actionbar__actions {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
}

.a5-modern-actionbar__button {
	align-items: center;
	background: #ffffff;
	border: 1px solid #b2ccff;
	border-radius: 11px;
	box-shadow: 0 3px 8px rgba(16, 24, 40, 0.07);
	color: #155eef;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 850;
	gap: 7px;
	justify-content: center;
	min-height: 42px;
	padding: 8px 13px;
	transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
	white-space: nowrap;
}

.a5-modern-actionbar__button svg {
	fill: none;
	flex: 0 0 auto;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 18px;
}

.a5-modern-actionbar__button:hover,
.a5-modern-actionbar__button:focus-visible {
	background: #eff8ff;
	border-color: #528bff;
	box-shadow: 0 5px 12px rgba(21, 94, 239, 0.15);
	color: #004eeb;
	outline: none;
	transform: translateY(-1px);
}

.a5-modern-actionbar__button.is-save {
	background: linear-gradient(135deg, #155eef, #004eeb);
	border-color: transparent;
	box-shadow: 0 6px 14px rgba(21, 94, 239, 0.24);
	color: #ffffff;
}

.a5-modern-actionbar__button.is-save:hover,
.a5-modern-actionbar__button.is-save:focus-visible {
	background: linear-gradient(135deg, #004eeb, #00359e);
	color: #ffffff;
}

.a5-modern-actionbar__button.is-template {
	background: #f4f3ff;
	border-color: #bdb4fe;
	color: #6938ef;
}

.a5-modern-actionbar__button.is-cliparts[aria-expanded="true"] {
	background: #eef4ff;
	border-color: #528bff;
	color: #004eeb;
}

.a5-modern-actionbar__button:disabled {
	cursor: not-allowed;
	opacity: 0.48;
	transform: none;
}

.a5-modern-actionbar__status {
	background: #ecfdf3;
	border: 1px solid #abefc6;
	border-radius: 9px;
	color: #067647;
	font-size: 11.5px;
	font-weight: 750;
	margin: 0;
	max-width: 260px;
	padding: 7px 9px;
}

.a5-modern-workflow-source .aria5-print-editor-workflow-status,
.a5-modern-workflow-source [data-aria5-save-design],
.a5-modern-workflow-source [data-aria5-save-template] {
	display: none !important;
}

/* Upload and AI are operated from the top menu; cliparts remain in the side panel. */
.a5-modern-actionbar ~ .aria5-print-editor-zone-layout .a5d-upload-col {
	display: none !important;
}

.a5-modern-ai-menu {
	background: #ffffff;
	border: 1px solid #b2ccff;
	border-radius: 13px;
	box-shadow: 0 18px 42px rgba(16, 24, 40, 0.22);
	inset-inline-start: 160px;
	padding: 12px;
	position: absolute;
	top: calc(100% - 3px);
	width: min(360px, calc(100vw - 32px));
	z-index: 40;
}

.a5-modern-ai-menu[hidden] {
	display: none !important;
}

.a5-modern-ai-menu .aria5-print-editor-ai-generate {
	display: grid !important;
	gap: 9px;
	margin: 0;
}

.a5-modern-ai-menu .aria5-print-editor-text-field {
	display: grid;
	gap: 6px;
}

.a5-modern-ai-menu .aria5-print-editor-text-field > span {
	color: #344054;
	font-size: 12px;
	font-weight: 850;
}

.a5-modern-ai-menu textarea {
	background: #f8fafc;
	border: 1px solid #b2ccff;
	border-radius: 9px;
	color: #101828;
	font-family: inherit;
	min-height: 76px;
	padding: 9px 10px;
	resize: vertical;
	width: 100%;
}

.a5-modern-ai-menu [data-aria5-ai-generate] {
	background: linear-gradient(135deg, #155eef, #004eeb);
	border: 0;
	border-radius: 9px;
	color: #ffffff;
	font-weight: 850;
	min-height: 40px;
	width: 100%;
}

.a5-modern-cliparts-menu {
	background: #ffffff;
	border: 1px solid #b2ccff;
	border-radius: 13px;
	box-shadow: 0 18px 42px rgba(16, 24, 40, 0.22);
	inset-inline-end: 12px;
	max-height: min(480px, 66vh);
	overflow-y: auto;
	padding: 10px;
	position: absolute;
	top: calc(100% - 3px);
	width: min(390px, calc(100vw - 32px));
	z-index: 41;
}

.a5-modern-cliparts-menu[hidden] {
	display: none !important;
}

.a5-modern-cliparts-menu [data-aria5-clipart-block] {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.a5-modern-cliparts-menu .a5-modern-cliparts-details {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.a5-modern-cliparts-menu .a5-modern-cliparts-details > summary {
	display: none;
}

.a5-modern-cliparts-menu .a5-modern-cliparts-details__body {
	padding: 0;
}

.a5-modern-cliparts-menu .aria5-print-editor-clipart-grid {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.a5-modern-cliparts-details {
	background: #f8fafc;
	border: 1px solid #d0d5dd;
	border-radius: 11px;
	overflow: hidden;
}

.a5-modern-cliparts-details > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 9px;
	list-style: none;
	min-height: 48px;
	padding: 8px 10px;
	position: relative;
}

.a5-modern-cliparts-details > summary::-webkit-details-marker {
	display: none;
}

.a5-modern-cliparts-details > summary::after {
	color: #155eef;
	content: '\203A';
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	margin-inline-start: auto;
	transform: rotate(90deg);
	transition: transform 0.16s ease;
}

html[dir="rtl"] .a5-modern-cliparts-details > summary::after {
	transform: rotate(-90deg);
}

.a5-modern-cliparts-details[open] > summary::after {
	transform: rotate(-90deg);
}

html[dir="rtl"] .a5-modern-cliparts-details[open] > summary::after {
	transform: rotate(90deg);
}

.a5-modern-cliparts-details__icon {
	align-items: center;
	background: #dbeafe;
	border-radius: 8px;
	color: #155eef;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 17px;
	height: 31px;
	justify-content: center;
	width: 31px;
}

.a5-modern-cliparts-details__copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.a5-modern-cliparts-details__copy strong {
	color: #101828;
	font-size: 12.5px;
	font-weight: 850;
}

.a5-modern-cliparts-details__copy small {
	color: #667085;
	font-size: 10.5px;
	font-weight: 600;
}

.a5-modern-cliparts-details[open] > summary {
	background: #eef4ff;
	border-bottom: 1px solid #d0d5dd;
}

.a5-modern-cliparts-details__body {
	padding: 10px;
}

html.theme-night.a5-modern .a5-modern-actionbar {
	background: linear-gradient(90deg, #151d2c, #102a43);
	border-color: #344054;
}

html.theme-night.a5-modern .a5-modern-actionbar__title {
	color: #d0d5dd;
}

html.theme-night.a5-modern .a5-modern-actionbar__button {
	background: #1d2939;
	border-color: #475467;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	color: #84caff;
}

html.theme-night.a5-modern .a5-modern-actionbar__button:hover,
html.theme-night.a5-modern .a5-modern-actionbar__button:focus-visible {
	background: #102a43;
	border-color: #53b1fd;
	color: #b9e6fe;
}

html.theme-night.a5-modern .a5-modern-actionbar__button.is-save {
	background: linear-gradient(135deg, #1570ef, #175cd3);
	border-color: #53b1fd;
	color: #ffffff;
}

html.theme-night.a5-modern .a5-modern-actionbar__button.is-template {
	background: #292056;
	border-color: #7a5af8;
	color: #d9d6fe;
}

html.theme-night.a5-modern .a5-modern-actionbar__button.is-cliparts[aria-expanded="true"] {
	background: #102a43;
	border-color: #53b1fd;
	color: #b9e6fe;
}

html.theme-night.a5-modern .a5-modern-actionbar__status {
	background: #053321;
	border-color: #087443;
	color: #75e0a7;
}

html.theme-night.a5-modern .a5-modern-ai-menu {
	background: #151d2c;
	border-color: #475467;
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

html.theme-night.a5-modern .a5-modern-cliparts-menu {
	background: #151d2c;
	border-color: #475467;
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

html.theme-night.a5-modern .a5-modern-ai-menu .aria5-print-editor-text-field > span {
	color: #f8fafc;
}

html.theme-night.a5-modern .a5-modern-ai-menu textarea {
	background: #101828;
	border-color: #475467;
	color: #f8fafc;
}

html.theme-night.a5-modern .a5-modern-actionbar ~ .aria5-print-editor-zone-layout .a5-modern-upload,
html.theme-night.a5-modern .a5-modern-cliparts-details {
	background: #101828;
	border-color: #475467;
}

html.theme-night.a5-modern .a5-modern-cliparts-details__icon {
	background: #102a43;
	color: #84caff;
}

html.theme-night.a5-modern .a5-modern-cliparts-details__copy strong {
	color: #f8fafc;
}

html.theme-night.a5-modern .a5-modern-cliparts-details__copy small {
	color: #a8b3c5;
}

html.theme-night.a5-modern .a5-modern-cliparts-details > summary::after {
	color: #84caff;
}

html.theme-night.a5-modern .a5-modern-cliparts-details[open] > summary {
	background: #102a43;
	border-color: #475467;
}

@media (max-width: 1100px) and (min-width: 861px) {
	.a5-modern-actionbar {
		gap: 8px;
		padding-inline: 9px;
	}

	.a5-modern-actionbar__title {
		display: none;
	}

	.a5-modern-actionbar__button {
		font-size: 11.5px;
		padding-inline: 9px;
	}
}

@media (max-width: 860px) {
	.a5-modern-actionbar {
		border-radius: 0;
		gap: 0;
		min-height: 58px;
		overflow: hidden;
		padding: 8px;
	}

	.a5-modern-actionbar__title {
		display: none;
	}

	.a5-modern-actionbar__actions {
		overflow-x: auto;
		overflow-y: hidden;
		padding: 1px;
		scrollbar-width: none;
	}

	.a5-modern-actionbar__actions::-webkit-scrollbar {
		display: none;
	}

	.a5-modern-actionbar__button {
		flex: 0 0 auto;
		font-size: 11.5px;
		min-height: 40px;
		padding: 7px 10px;
	}

	.a5-modern-actionbar__status {
		display: none;
	}

	.a5-modern-ai-menu {
		inset-inline: 8px;
		width: auto;
	}

	.a5-modern-cliparts-menu {
		inset-inline: 8px;
		width: auto;
	}

	html.a5-modern.a5m-on .aria5-print-editor-zone-heading {
		border-radius: 12px 12px 0 0;
		border-bottom: 0;
	}
}

/* ===== Secondary properties panel polish ===== */
@media (min-width: 861px) {
	html.a5-modern.a5d-on .aria5-print-editor-inspector {
		background: #f8fafc;
		gap: 12px;
		grid-auto-rows: max-content;
		padding: 12px;
		scrollbar-color: #b2ccff transparent;
		scrollbar-width: thin;
	}

	html.a5-modern.a5d-on .aria5-print-editor-inspector > .aria5-print-editor-object-controls,
	html.a5-modern.a5d-on .aria5-print-editor-inspector > .a5d-acc,
	html.a5-modern.a5d-on .aria5-print-editor-inspector > .aria5-print-editor-layers-panel,
	html.a5-modern.a5d-on .aria5-print-editor-inspector > .a5d-save {
		background: #ffffff;
		border: 1px solid #d0d5dd;
		border-radius: 14px;
		box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
		min-height: max-content;
	}

	html.a5-modern.a5d-on .aria5-print-editor-object-controls {
		gap: 10px;
		padding: 10px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-object-controls-heading {
		border: 0;
		border-bottom: 1px solid #e4e7ec;
		border-radius: 10px 10px 0 0;
		margin: -2px -2px 2px;
		padding: 10px;
	}

	html.a5-modern.a5d-on .a5d-acc {
		overflow: hidden;
	}

	html.a5-modern.a5d-on .a5d-acc > summary {
		min-height: 44px;
		padding: 11px 12px;
	}

	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-assets-panel {
		gap: 12px;
		padding: 12px;
	}

	html.a5-modern.a5d-on .a5d-upload-col,
	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-ai-generate,
	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-cliparts {
		gap: 8px;
	}

	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-ai-generate,
	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-cliparts {
		border-top: 1px solid #e4e7ec;
		padding-top: 12px;
	}

	html.a5-modern.a5d-on .a5d-assets-side [data-aria5-ai-generate] {
		margin-top: 2px;
		min-height: 42px;
		width: 100%;
	}

	html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-clipart-grid {
		gap: 8px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	html.a5-modern.a5d-on .aria5-print-editor-layers-panel {
		gap: 10px;
		padding: 11px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layers-panel .aria5-print-editor-panel-heading {
		border-bottom: 1px solid #e4e7ec;
		margin: -2px -2px 0;
		padding: 2px 2px 9px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-item {
		background: #f8fafc;
		border-color: #d0d5dd;
		border-radius: 11px;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
		padding: 9px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-item.is-active {
		background: #eff8ff;
		border-color: #84adff;
		box-shadow: inset 3px 0 0 #155eef;
	}

	html[dir="rtl"].a5-modern.a5d-on .aria5-print-editor-layer-item.is-active {
		box-shadow: inset -3px 0 0 #155eef;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-actions {
		align-items: center;
		border-top: 1px solid #e4e7ec;
		display: flex;
		gap: 7px;
		justify-content: flex-end;
		padding-top: 8px;
		width: 100%;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-order {
		background: #ffffff;
		border-color: #b2ccff;
		border-radius: 8px;
		color: #155eef;
		height: 32px;
		width: 32px;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-order:hover,
	html.a5-modern.a5d-on .aria5-print-editor-layer-order:focus-visible {
		background: #dbeafe;
		border-color: #528bff;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-order:disabled {
		background: #f2f4f7;
		border-color: #e4e7ec;
		color: #98a2b3;
		opacity: 0.8;
	}

	html.a5-modern.a5d-on .aria5-print-editor-layer-delete {
		background: #fff1f3;
		border-color: #fda29b;
		color: #d92d20;
	}

	html.a5-modern.a5d-on .a5d-save {
		margin: 0;
		padding: 10px;
	}

	html.a5-modern.a5d-on .a5d-save .aria5-print-editor-save-design {
		box-shadow: 0 7px 16px rgba(21, 94, 239, 0.22);
		min-height: 46px;
	}

	/* The small action strip under the canvas gets the same visual rhythm. */
	html.a5-modern.a5d-on .a5d-quick-actions {
		margin-top: 14px;
	}

	html.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-toolbar-group {
		border-radius: 13px;
		box-shadow: 0 5px 14px rgba(16, 24, 40, 0.08);
		gap: 8px;
		padding: 8px;
	}

	html.a5-modern.a5d-on .a5d-quick-actions .aria5-print-editor-tool-button {
		border-radius: 9px;
		min-height: 38px;
		padding: 7px 12px;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector {
		background: #0b1220;
		scrollbar-color: #475467 transparent;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector > .aria5-print-editor-object-controls,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector > .a5d-acc,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector > .aria5-print-editor-layers-panel,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-inspector > .a5d-save {
		background: #151d2c;
		border-color: #344054;
		box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-object-controls-heading,
	html.theme-night.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-ai-generate,
	html.theme-night.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-cliparts,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layers-panel .aria5-print-editor-panel-heading,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-actions {
		border-color: #344054;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-item {
		background: #101828;
		border-color: #475467;
		color: #f8fafc;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-item.is-active {
		background: #102a43;
		border-color: #53b1fd;
		box-shadow: inset 3px 0 0 #53b1fd;
	}

	html[dir="rtl"].theme-night.a5-modern.a5d-on .aria5-print-editor-layer-item.is-active {
		box-shadow: inset -3px 0 0 #53b1fd;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-name,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-type {
		color: #f2f4f7;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-order {
		background: #243044;
		border-color: #475467;
		color: #d1e9ff;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-order:hover,
	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-order:focus-visible {
		background: #102a43;
		border-color: #53b1fd;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-order:disabled {
		background: #182230;
		border-color: #344054;
		color: #667085;
	}

	html.theme-night.a5-modern.a5d-on .aria5-print-editor-layer-delete {
		background: #3b1518;
		border-color: #f97066;
		color: #fda29b;
	}
}

@media (max-width: 860px) {
	html.a5-modern .aria5-print-editor-layer-item {
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
	}

	html.a5-modern .aria5-print-editor-layer-actions {
		border-top: 1px solid #e4e7ec;
		gap: 7px;
		justify-content: flex-end;
		padding-top: 8px;
		width: 100%;
	}

	html.a5-modern .aria5-print-editor-layer-order {
		height: 34px;
		width: 34px;
	}

html.theme-night.a5-modern .aria5-print-editor-layer-actions {
		border-color: #344054;
	}
}

/* Once file and AI actions are in the top menu, the side source card is the clipart library itself. */
html.a5-modern.a5d-on .a5d-assets-side {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

html.a5-modern.a5d-on .a5d-assets-side.a5-modern-assets-empty {
	display: none !important;
}

html.a5-modern.a5d-on .a5d-assets-side > summary {
	display: none !important;
}

html.a5-modern.a5d-on .a5d-assets-side > .a5d-acc-body,
html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-assets-panel {
	padding: 0 !important;
}

html.a5-modern.a5d-on .a5d-assets-side .aria5-print-editor-cliparts {
	border-top: 0 !important;
	padding-top: 0 !important;
}

html.a5-modern.a5d-on .a5-modern-workflow-source:not(:has(.aria5-template-row:not([hidden]))) {
	display: none !important;
}
