/* ==========================================================================
   Woo Mobile Case Designer  –  Frontend Designer UI
   Professional product-builder theme, WooCommerce-integrated
   ========================================================================== */

/* ── CSS custom properties ─────────────────────────────────────────────── */
:root {
	--wmcd-primary:        #0B746D;
	--wmcd-primary-hover:  #075E59;
	--wmcd-primary-light:  #E4F7F4;
	--wmcd-accent:         #F08A4B;
	--wmcd-gradient:       linear-gradient(135deg, #0B746D 0%, #1AA29A 58%, #F08A4B 100%);
	--wmcd-success:        #10B981;
	--wmcd-danger:         #EF4444;
	--wmcd-danger-light:   #FEF2F2;
	--wmcd-surface:        #FFFFFF;
	--wmcd-bg:             #F6F8FA;
	--wmcd-border:         #DDE5EC;
	--wmcd-border-focus:   #8FD5CC;
	--wmcd-text:           #0B1220;
	--wmcd-text-muted:     #607083;
	--wmcd-text-light:     #96A3B2;
	--wmcd-shadow-sm:      0 1px 2px rgba(15,23,42,.06);
	--wmcd-shadow-md:      0 12px 28px rgba(15,23,42,.09);
	--wmcd-shadow-lg:      0 18px 44px rgba(15,23,42,.13);
	--wmcd-shadow-canvas:  0 22px 50px rgba(2,21,32,.24), 0 8px 18px rgba(2,21,32,.18);
	--wmcd-radius:         8px;
	--wmcd-radius-lg:      10px;
	--wmcd-radius-xl:      18px;
	--wmcd-transition:     .2s ease;
}

/* ── Hide default WC product layout when designer is active ────────────── */

/* ── Root wrapper ──────────────────────────────────────────────────────── */
#wmcd-root {
	background: linear-gradient(180deg, #FBFCFD 0%, var(--wmcd-bg) 100%);
	border-radius: var(--wmcd-radius-xl);
	padding: 0;
	margin: 24px auto 40px;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	color: var(--wmcd-text);
	box-sizing: border-box;
	border: 1px solid #E7EDF2;
	box-shadow: 0 24px 60px rgba(15,23,42,.07);
	overflow: hidden;
}
#wmcd-root * { box-sizing: border-box; }

#wmcd-root button:focus-visible,
#wmcd-root input:focus-visible,
#wmcd-root select:focus-visible {
	outline: 3px solid rgba(11,116,109,.22);
	outline-offset: 2px;
}

/* ── Product header ────────────────────────────────────────────────────── */
.wmcd-product-header {
	padding: 0;
}
.wmcd-product-header--side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--wmcd-border);
	border-radius: var(--wmcd-radius-lg);
	box-shadow: 0 8px 22px rgba(15,23,42,.05);
	overflow: hidden;
	position: relative;
}
.wmcd-product-header--side::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	width: auto;
	height: 3px;
	background: var(--wmcd-gradient);
}
.wmcd-breadcrumbs {
	font-size: 12px;
	color: var(--wmcd-text-light);
	letter-spacing: .01em;
}
.wmcd-breadcrumbs span {
	margin: 0 6px;
	color: #cbd5e1;
}
.wmcd-product-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.wmcd-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.wmcd-badge--brand {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
}
.wmcd-badge--model {
	background: #FFF1E8;
	color: #AF4F1C;
}
.wmcd-product-title {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 900;
	line-height: 1.12;
	margin: 0;
	color: var(--wmcd-text);
	letter-spacing: 0;
}
.wmcd-product-desc {
	font-size: 14px;
	color: var(--wmcd-text-muted);
	line-height: 1.65;
	margin: 0;
}
.wmcd-product-desc p { margin: 0; }
.wmcd-product-desc h1,
.wmcd-product-desc h2,
.wmcd-product-desc h3,
.wmcd-product-desc h4 {
	margin: 2px 0 10px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--wmcd-text-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ── Two-column layout ─────────────────────────────────────────────────── */
.wmcd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 390px);
	gap: 24px;
	padding: 18px;
	align-items: start;
}

/* ── Canvas column ─────────────────────────────────────────────────────── */
.wmcd-col-canvas {
	background: var(--wmcd-surface);
	border-radius: var(--wmcd-radius-lg);
	overflow: hidden;
	box-shadow: var(--wmcd-shadow-md);
	border: 1px solid var(--wmcd-border);
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
}
.wmcd-col-canvas::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
	pointer-events: none;
}

/* Canvas topbar */
.wmcd-canvas-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wmcd-canvas-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--wmcd-border);
	background: #F8FBFC;
}
.wmcd-canvas-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--wmcd-text-muted);
	white-space: nowrap;
}
.wmcd-layer-count {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
}

.wmcd-history-btns {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	justify-content: flex-end;
	min-width: 0;
}
.wmcd-hist-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	border-radius: 7px;
	border: 1px solid var(--wmcd-border);
	background: var(--wmcd-surface);
	font-size: 12px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background var(--wmcd-transition), color var(--wmcd-transition), border-color var(--wmcd-transition), opacity var(--wmcd-transition);
	position: relative;
}
.wmcd-hist-btn span.label {
	display: none;
}
.wmcd-hist-btn svg {
	flex: 0 0 auto;
}
.wmcd-hist-btn:hover:not(:disabled) {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
	border-color: var(--wmcd-border-focus);
}
.wmcd-hist-btn:disabled {
	background: #F4F7F9;
	color: #A8B3BF;
	opacity: .78;
	cursor: default;
}
.wmcd-hist-btn--danger:hover:not(:disabled) {
	background: var(--wmcd-danger-light);
	color: var(--wmcd-danger);
	border-color: #FECACA;
}

/* Canvas stage (centred, gradient bg) */
.wmcd-canvas-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 3vw, 34px);
	background:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(140deg, #092933 0%, #0A5B61 58%, #A96B3B 132%);
	background-size: 26px 26px, 26px 26px, auto;
	min-height: clamp(390px, 48vw, 500px);
	position: relative;
}


/* Inner container (relative, for overlay) */
.wmcd-canvas-inner {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--wmcd-shadow-canvas);
	transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
	outline: 2px solid transparent;
	z-index: 1;
	background: rgba(255,255,255,.1);
}
.wmcd-canvas-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.5),
		inset 0 -12px 24px rgba(2,21,32,.08);
	pointer-events: none;
	z-index: 3;
}
.wmcd-canvas-inner canvas {
	display: block;
	border-radius: 24px;
}

/* Ensure Fabric.js upper canvas (handles) is always on top */
.wmcd-canvas-inner .upper-canvas {
	z-index: 10 !important;
	border-radius: 24px;
}
.wmcd-canvas-inner.is-drag-over {
	transform: translateY(-2px) scale(1.01);
	outline-color: rgba(249,115,22,.55);
	box-shadow: 0 24px 48px rgba(249,115,22,.18), 0 12px 24px rgba(5,44,59,.22);
}

/* Template overlay */
.wmcd-template-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 20px;
}

/* Zone image selection ring — sits above template, shows exact zone boundary */
#wmcd-zone-selection-ring {
	position: absolute;
	pointer-events: none;
	z-index: 5;
	box-sizing: border-box;
	border: 3px solid #3b82f6;
	border-radius: 2px;
	outline: 1.5px solid rgba(255,255,255,.7);
	outline-offset: -1px;
	animation: wmcd-ring-pulse 1.8s ease-in-out infinite;
	display: none;
}

@keyframes wmcd-ring-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.55), inset 0 0 0 0 rgba(59,130,246,.12); }
	50%      { box-shadow: 0 0 0 4px rgba(59,130,246,.2), inset 0 0 0 2px rgba(59,130,246,.08); }
}

/* Printable-area guide (dashed rect, when no template) */
.wmcd-area-guide {
	position: absolute;
	border: 2px dashed rgba(255,255,255,.45);
	border-radius: 4px;
	pointer-events: none;
	display: none;
}

/* Canvas hint */
.wmcd-canvas-hint {
	padding: 11px 16px;
	font-size: 11px;
	color: var(--wmcd-text-light);
	text-align: center;
	margin: 0;
	border-top: 1px solid var(--wmcd-border);
	background: #FBFCFD;
}

/* ── Tools column ──────────────────────────────────────────────────────── */
.wmcd-col-tools {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 18px;
	align-self: start;
}

/* ── Card base ─────────────────────────────────────────────────────────── */
.wmcd-card {
	background: var(--wmcd-surface);
	border-radius: var(--wmcd-radius-lg);
	border: 1px solid var(--wmcd-border);
	box-shadow: var(--wmcd-shadow-sm);
	padding: 16px;
}
.wmcd-tools-card--top {
	padding: 10px 12px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
	box-shadow: none;
	background: #FBFCFD;
}
.wmcd-card-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wmcd-text);
	margin: 0 0 14px;
}

/* ── Tool tiles grid ───────────────────────────────────────────────────── */
.wmcd-tools-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	overflow: visible;
}
.wmcd-tool-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--wmcd-radius);
	border: 1px solid #D7E1E8;
	background: linear-gradient(180deg, #fff 0%, #FAFCFD 100%);
	cursor: pointer;
	transition: background var(--wmcd-transition), border-color var(--wmcd-transition), transform .15s, box-shadow .15s;
	text-align: center;
	min-height: 72px;
	padding: 10px 8px;
	position: relative;
}
.wmcd-tool-tile:hover {
	background: #F2FBF9;
	border-color: #7DD3C7;
	box-shadow: 0 8px 18px rgba(15,118,110,.09);
	transform: translateY(-1px);
}
.wmcd-tool-tile:active { transform: translateY(0) scale(.96); }
.wmcd-tool-tile.active {
	background: #EAF8F6;
	border-color: var(--wmcd-primary);
	box-shadow: 0 0 0 3px rgba(15,118,110,.12);
	transform: translateY(-1px);
}
.wmcd-tile-icon {
	width: 30px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wmcd-primary);
}
.wmcd-tile-icon svg { width: 22px; height: 22px; }
.wmcd-tile-label {
	font-size: 10px;
	font-weight: 800;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.1;
}
.wmcd-tool-tile.active .wmcd-tile-label { color: var(--wmcd-primary); }

.wmcd-floating-tooltip {
	position: fixed;
	z-index: 999999;
	max-width: min(260px, calc(100vw - 20px));
	padding: 7px 10px;
	border-radius: 7px;
	background: #0B1220;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(15,23,42,.2);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-3px);
	transition: opacity .14s ease, transform .14s ease;
}

.wmcd-floating-tooltip.show {
	opacity: 1;
	transform: translateY(0);
}


/* ── Inline panel area ─────────────────────────────────────────────────── */
.wmcd-panel-area { display: flex; flex-direction: column; gap: 14px; }
.wmcd-panel-area--canvas {
	margin: 0;
	background: var(--wmcd-surface);
	border-left: 1px solid var(--wmcd-border);
	border-right: 1px solid var(--wmcd-border);
	position: relative;
	z-index: 2;
}

.wmcd-inline-panel {
	background: var(--wmcd-surface);
	border-radius: var(--wmcd-radius-lg);
	border: 1px solid var(--wmcd-border);
	box-shadow: 0 10px 24px rgba(15,23,42,.05);
	overflow: hidden;
	animation: wmcd-slide-in .2s ease;
}
.wmcd-panel-area--canvas .wmcd-inline-panel {
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	box-shadow: none;
}
@keyframes wmcd-slide-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wmcd-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 800;
	background: #F8FBFC;
	border-bottom: 1px solid var(--wmcd-border);
	color: var(--wmcd-text);
	letter-spacing: .01em;
}
.wmcd-panel-x {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid rgba(15,118,110,.14);
	background: #fff;
	color: #0f766e;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(15,118,110,.08);
	transition: background var(--wmcd-transition), color var(--wmcd-transition), transform .15s ease, box-shadow .15s ease;
	flex: 0 0 30px;
}
.wmcd-panel-x-mark {
	display: block;
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	color: currentColor;
	transform: translateY(-1px);
}
.wmcd-panel-x:hover {
	background: linear-gradient(180deg, #f0fdfa 0%, #dff7f4 100%);
	color: var(--wmcd-primary-hover);
	transform: scale(1.04);
	box-shadow: 0 8px 16px rgba(15,118,110,.14);
}

/* Tab content wrapper */
.wmcd-bg-tab-content { display: block; }
.wmcd-bg-tab-content[hidden] { display: none; }

/* Patterns tab */
.wmcd-pattern-categories,
.wmcd-sticker-categories {
	display: flex;
	gap: 8px;
	padding: 14px 14px 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.wmcd-pattern-categories::-webkit-scrollbar,
.wmcd-sticker-categories::-webkit-scrollbar {
	display: none;
}

.wmcd-pattern-chip {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--wmcd-border);
	background: #fff;
	color: var(--wmcd-text-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}

.wmcd-pattern-chip:hover {
	border-color: rgba(15,118,110,.26);
	color: var(--wmcd-primary);
	background: #f5fdfc;
}

.wmcd-pattern-chip.active {
	border-color: rgba(249,115,22,.28);
	background: #fff1e8;
	color: #c2410c;
	box-shadow: 0 0 0 1px rgba(249,115,22,.08);
}

.wmcd-pattern-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding: 16px;
	max-height: 280px;
	overflow-y: auto;
}
.wmcd-pattern-thumb {
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid var(--wmcd-border);
	padding: 0;
	cursor: pointer;
	transition: border-color .15s, transform .15s, box-shadow .15s, opacity .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #f4f4f5 0%, #ececf0 100%);
	box-shadow: 0 1px 4px rgba(15,23,42,.06);
	opacity: .94;
	position: relative;
}
.wmcd-pattern-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	pointer-events: none;
	border-radius: 14px;
}
.wmcd-pattern-thumb.is-loading::after,
.wmcd-sticker-thumb.is-loading::after {
	content: "";
	position: absolute;
	inset: 16px;
	border-radius: 999px;
	border: 2px solid rgba(15,118,110,.12);
	border-top-color: rgba(15,118,110,.48);
	animation: wmcd-spin .8s linear infinite;
}
.wmcd-pattern-thumb:hover {
	border-color: var(--wmcd-primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(15,118,110,.12);
	opacity: 1;
}
.wmcd-pattern-thumb.active {
	border-color: var(--wmcd-primary);
	box-shadow: 0 0 0 3px rgba(15,118,110,.14);
	opacity: 1;
}
.wmcd-pattern-empty {
	padding: 16px;
	font-size: 12.5px;
	color: var(--wmcd-text-light);
	text-align: center;
	line-height: 1.5;
	margin: 0;
}

/* Stickers panel */
.wmcd-sticker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px,1fr));
	gap: 8px;
	padding: 16px;
	max-height: 240px;
	overflow-y: auto;
}
.wmcd-sticker-thumb {
	aspect-ratio: 1;
	border-radius: 10px;
	background: #F9FAFB;
	border: 2px solid var(--wmcd-border);
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s, background .15s, transform .15s;
	position: relative;
}
.wmcd-sticker-thumb:hover {
	border-color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
	transform: translateY(-2px) scale(1.03);
}
.wmcd-sticker-thumb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wmcd-empty-msg { padding: 24px; text-align: center; color: var(--wmcd-text-muted); font-size: 13px; }

/* Text panel — editing-mode state */
#wmcd-panel-text.is-editing .wmcd-panel-head {
	background: linear-gradient(180deg, #f0fdfa 0%, #dff7f4 100%);
	border-bottom-color: rgba(15,118,110,.2);
}
#wmcd-panel-text.is-editing #wmcd-text-panel-title {
	color: var(--wmcd-primary);
}
#wmcd-panel-text.is-editing #wmcd-text-panel-title::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wmcd-primary);
	margin-right: 7px;
	vertical-align: middle;
	animation: wmcd-pulse 1.6s ease infinite;
}
@keyframes wmcd-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .5; transform: scale(.8); }
}

/* Text panel */
.wmcd-text-form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.wmcd-field {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	font-size: 14px;
	color: var(--wmcd-text);
	background: var(--wmcd-surface);
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}
.wmcd-field:focus {
	border-color: var(--wmcd-primary);
	box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.wmcd-field::placeholder { color: var(--wmcd-text-light); }

.wmcd-row { display: flex; gap: 10px; }
.wmcd-field-group { display: flex; flex-direction: column; gap: 4px; }
.wmcd-field-group--grow { flex: 1; }
.wmcd-field-group label { font-size: 11px; font-weight: 600; color: var(--wmcd-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.wmcd-field-group input[type="color"] {
	width: 40px; height: 36px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	padding: 2px; cursor: pointer;
}
.wmcd-select {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	font-size: 13px;
	color: var(--wmcd-text);
	background: var(--wmcd-surface);
	outline: none;
	cursor: pointer;
	transition: border-color .2s;
}
.wmcd-select:focus { border-color: var(--wmcd-primary); }

.wmcd-field-group input[type="range"] {
	width: 100%;
	accent-color: var(--wmcd-primary);
	margin-top: 4px;
}

.wmcd-style-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.wmcd-style-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	background: var(--wmcd-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.wmcd-style-btn:hover { background: var(--wmcd-primary-light); border-color: rgba(15,118,110,.35); }
.wmcd-style-btn.active, .wmcd-style-btn[aria-pressed="true"] {
	background: var(--wmcd-primary);
	border-color: var(--wmcd-primary);
	color: #fff;
}
.wmcd-style-btn--danger:hover,
.wmcd-style-btn--danger {
	border-color: #fecaca;
	color: #b91c1c;
	background: #fff5f5;
}
.wmcd-style-btn--danger:hover {
	background: #fee2e2;
}

.wmcd-text-edit-tools {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wmcd-border);
	background: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wmcd-sticker-edit-tools {
	margin: 0 14px 14px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--wmcd-border);
	background: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wmcd-text-edit-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.wmcd-text-edit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wmcd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 18px;
	border-radius: var(--wmcd-radius);
	border: none;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .01em;
	transition: opacity .2s, transform .15s, box-shadow .2s;
}
.wmcd-btn:active { transform: scale(.97); }
.wmcd-btn--primary {
	background: var(--wmcd-gradient);
	color: #fff;
	box-shadow: 0 10px 22px rgba(15,118,110,.22);
}
.wmcd-btn--primary:hover { opacity: .97; box-shadow: 0 14px 28px rgba(15,118,110,.3); }
.wmcd-btn--primary:disabled {
	background: #C8DDD9;
	color: rgba(255,255,255,.92);
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}
.wmcd-btn--block { width: 100%; }
.wmcd-btn--lg { padding: 14px 18px; font-size: 15px; border-radius: var(--wmcd-radius); }
.wmcd-btn--ghost {
	background: rgba(255,255,255,.14);
	color: #fff;
	border: 1px solid rgba(255,255,255,.22);
	box-shadow: none;
}
.wmcd-btn--ghost:hover {
	background: rgba(255,255,255,.22);
	opacity: 1;
}

/* ── Purchase card ─────────────────────────────────────────────────────── */
.wmcd-purchase-card {
	background: #fff;
	border-radius: var(--wmcd-radius-lg);
	border: 1px solid var(--wmcd-border);
	box-shadow: 0 10px 26px rgba(15,23,42,.06);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	overflow: hidden;
	position: relative;
}
.wmcd-purchase-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--wmcd-gradient);
}
.wmcd-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 0 16px;
	border-bottom: 1px solid #e7eef3;
}
.wmcd-price-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.wmcd-price-value {
	font-size: 30px;
	font-weight: 900;
	color: var(--wmcd-text);
	line-height: 1;
	letter-spacing: 0;
}
.wmcd-price-value .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

.wmcd-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.wmcd-qty-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.wmcd-qty-ctrl {
	display: flex;
	align-items: center;
	border: 1px solid var(--wmcd-border);
	border-radius: var(--wmcd-radius);
	overflow: hidden;
	background: #F8FAFC;
}
.wmcd-qty-btn {
	width: 38px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	line-height: 1;
}
.wmcd-qty-btn:hover { background: var(--wmcd-primary-light); color: var(--wmcd-primary); }
.wmcd-qty-input {
	width: 46px;
	height: 36px;
	border: none;
	border-left: 1px solid var(--wmcd-border);
	border-right: 1px solid var(--wmcd-border);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--wmcd-text);
	background: var(--wmcd-surface);
	outline: none;
	-moz-appearance: textfield;
}
.wmcd-qty-input::-webkit-inner-spin-button,
.wmcd-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.wmcd-finish-btn { width: 100%; }
.wmcd-finish-btn:not(:disabled) {
	transform: translateY(0);
}
.wmcd-finish-btn:not(:disabled):hover {
	transform: translateY(-1px);
}

.wmcd-secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--wmcd-text-light);
	margin: 0;
	padding-top: 2px;
}

#wmcd-root.wmcd-has-content .wmcd-empty-state {
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
}

/* ── Loading overlay ───────────────────────────────────────────────────── */
.wmcd-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17,24,39,.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.wmcd-loading-box {
	background: var(--wmcd-surface);
	border-radius: var(--wmcd-radius-xl);
	padding: 32px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	box-shadow: var(--wmcd-shadow-lg);
	font-size: 14px;
	font-weight: 600;
	color: var(--wmcd-text-muted);
}
.wmcd-spinner {
	width: 40px; height: 40px;
	border: 4px solid #EEF2FF;
	border-top-color: var(--wmcd-primary);
	border-radius: 50%;
	animation: wmcd-spin .75s linear infinite;
}
@keyframes wmcd-spin { to { transform: rotate(360deg); } }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.wmcd-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(16px);
	z-index: 99998;
	background: var(--wmcd-text);
	color: #fff;
	padding: 10px 20px;
	border-radius: 24px;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	max-width: 90vw;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	box-shadow: var(--wmcd-shadow-lg);
}
.wmcd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Cart / checkout: design as product thumbnail ──────────────────────── */

/* Wrapper that replaces the default <img> in the cart thumbnail cell */
.wmcd-thumb-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* The design image itself – fills the same space WooCommerce expects */
.wmcd-cart-img {
	display: block;
	width:  100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	background: #F1F5FF;
	border: 2px solid #C7D2FE;
	box-shadow: 0 2px 8px rgba(79,70,229,.15);
	aspect-ratio: 3/4;         /* portrait phone-case shape          */
	max-height: 110px;          /* cap height in standard WC cart row */
}

/* "Custom" badge pinned to top-right of the thumbnail */
.wmcd-thumb-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #4F46E5;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 20px;
	line-height: 1.4;
	pointer-events: none;
	white-space: nowrap;
}

/* "🎨 Custom Design" text label below product name in cart */
.wmcd-design-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	background: #EEF2FF;
	color: #4F46E5;
	border: 1px solid #C7D2FE;
}

/* Checkout order-review: inline thumbnail before product name */
.wmcd-checkout-thumb {
	display: inline-block;
	vertical-align: middle;
	width: 48px;
	height: auto;
	max-height: 64px;
	object-fit: contain;
	border-radius: 6px;
	background: #F1F5FF;
	border: 1px solid #C7D2FE;
	margin-right: 8px;
	box-shadow: 0 1px 4px rgba(79,70,229,.12);
}

.wmcd-cart-line-thumb-wrap {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 10px;
}

.wmcd-cart-line-thumb {
	width: 58px;
	max-height: 78px;
}

/* Widen the cart image column so portrait design is not squashed */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-checkout #order_review table td.product-thumbnail {
	width: 90px !important;
	min-width: 80px;
}
.woocommerce-cart table.cart td.product-thumbnail a,
.woocommerce-cart table.cart td.product-thumbnail .wmcd-thumb-wrap {
	display: block;
	width: 80px;
}

.woocommerce-cart table.cart tr.wmcd-cart-item td.product-thumbnail img:not(.wmcd-cart-img) {
	display: none !important;
}

.woocommerce-cart table.cart tr.wmcd-cart-item td.product-thumbnail a {
	display: none !important;
}

.woocommerce-cart table.cart tr.wmcd-cart-item td.product-name .wmcd-cart-line-thumb-wrap {
	display: inline-flex;
}

/* ── Order preview (My Account) ────────────────────────────────────────── */
.wmcd-order-design-box {
	margin-top: 10px;
	padding: 12px;
	background: #F9FAFB;
	border: 1px solid var(--wmcd-border);
	border-radius: 10px;
}
.wmcd-order-thumb {
	display: block;
	max-width: 100px;
	margin: 8px 0;
	border: 1px solid var(--wmcd-border);
	border-radius: 8px;
}
.wmcd-dl-link { font-size: 13px; color: var(--wmcd-primary); text-decoration: underline; }

/* ── Admin order box ───────────────────────────────────────────────────── */
.wmcd-admin-design-box {
	margin-top: 10px;
	padding: 12px;
	background: #FAFAFA;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
}
.wmcd-admin-thumb {
	display: block; max-width: 130px; max-height: 170px;
	margin: 8px 0;
	border: 1px solid #E0E0E0;
	border-radius: 6px;
}
.wmcd-admin-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.wmcd-layout {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	.wmcd-col-tools {
		position: static;
	}
	.wmcd-tools-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.wmcd-history-btns {
		flex-wrap: wrap;
	}
	.wmcd-product-header--side {
		padding: 18px;
	}
}

@media (max-width: 540px) {
	#wmcd-root {
		border-radius: 0;
		margin: 0 0 28px;
		border-left: none;
		border-right: none;
	}
	.wmcd-layout { padding: 12px; gap: 14px; }
	.wmcd-tools-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
	.wmcd-tool-tile { min-height: 68px; }
	.wmcd-tile-label { font-size: 9px; }
	.wmcd-canvas-topbar {
		align-items: flex-start;
		flex-direction: column;
	}
	.wmcd-history-btns { justify-content: flex-start; flex-wrap: wrap; }
	.wmcd-canvas-stage {
		padding: 18px;
		min-height: 380px;
		background-size: 22px 22px, 22px 22px, auto;
	}
	.wmcd-canvas-inner,
	.wmcd-canvas-inner canvas,
	.wmcd-template-overlay {
		border-radius: 18px;
	}
	.wmcd-hist-btn span.label { display: none; }
	.wmcd-pattern-grid { gap: 10px; padding: 12px; }
	.wmcd-pattern-categories { padding: 12px 12px 0; }
	.wmcd-sticker-categories { padding: 12px 12px 0; }
	.wmcd-purchase-card,
	.wmcd-product-header--side {
		padding: 16px;
	}
	.wmcd-price-value { font-size: 28px; }
}

/* ── Accessibility ─────────────────────────────────────────────────────── */
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}

/* ── Photo Zones Panel ─────────────────────────────────────────────────── */

/* Progress bar */
.wmcd-zones-progress {
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--wmcd-border);
}

.wmcd-zones-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.wmcd-zones-progress-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wmcd-text-muted);
}

.wmcd-zones-progress-count {
	font-size: 12px;
	font-weight: 800;
	color: var(--wmcd-text-muted);
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--wmcd-bg);
	border: 1px solid var(--wmcd-border);
}

.wmcd-zones-progress-count.is-complete {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
	border-color: rgba(11,116,109,.22);
}

.wmcd-zones-progress-track {
	height: 5px;
	border-radius: 999px;
	background: var(--wmcd-border);
	overflow: hidden;
}

.wmcd-zones-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--wmcd-gradient);
	transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* Zone list */
.wmcd-zones-frontend-list {
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Zone card — horizontal layout */
.wmcd-zone-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	border: 1.5px solid var(--wmcd-border);
	border-left: 3px solid var(--zc, var(--wmcd-text-muted));
	border-radius: var(--wmcd-radius);
	background: #fff;
	transition: border-color .18s, background .18s, box-shadow .18s;
	box-shadow: var(--wmcd-shadow-sm);
}

.wmcd-zone-card:hover {
	box-shadow: 0 3px 12px rgba(15,23,42,.08);
}

.wmcd-zone-card.is-filled {
	background: #f8fffe;
	border-color: rgba(11,116,109,.2);
	border-left-color: var(--wmcd-primary);
	box-shadow: 0 3px 12px rgba(11,116,109,.07);
}

/* Thumbnail — square on the left */
.wmcd-zone-card-thumb {
	position: relative;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--wmcd-bg);
	border: 1.5px solid var(--wmcd-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.wmcd-zone-thumb-photo,
.wmcd-zone-card-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Number badge inside thumb */
.wmcd-zone-thumb-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
	position: relative;
	z-index: 1;
}

/* Processing overlay */
.wmcd-zone-card-proc {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

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

.wmcd-zone-spin {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	animation: wmcd-zone-spin .85s linear infinite;
}

/* Body — right column */
.wmcd-zone-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Top row: name + actions */
.wmcd-zone-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.wmcd-zone-card-name {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	flex: 1;
}

.wmcd-zone-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.wmcd-zone-card-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--wmcd-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Actions cluster */
.wmcd-zone-card-acts {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* Upload button — prominent (filled bg) when empty, ghost when filled */
.wmcd-zone-upload-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 8px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	white-space: nowrap;
	border-radius: 5px !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.wmcd-zone-card:not(.is-filled) .wmcd-zone-upload-btn {
	background: var(--wmcd-primary) !important;
	color: #fff !important;
	border: 1.5px solid var(--wmcd-primary) !important;
	box-shadow: 0 1px 4px rgba(11,116,109,.25);
}

.wmcd-zone-card:not(.is-filled) .wmcd-zone-upload-btn:hover {
	filter: brightness(1.08);
}

.wmcd-zone-card.is-filled .wmcd-zone-upload-btn {
	background: transparent !important;
	color: var(--wmcd-text-muted) !important;
	border: 1.5px solid var(--wmcd-border) !important;
}

.wmcd-zone-card.is-filled .wmcd-zone-upload-btn:hover {
	background: var(--wmcd-bg) !important;
	color: var(--wmcd-text) !important;
}

/* Clear button — 26×26 icon-only */
.wmcd-zone-clear-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--wmcd-border);
	border-radius: 5px;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	flex-shrink: 0;
}

.wmcd-zone-clear-btn:hover {
	background: var(--wmcd-danger-light);
	color: var(--wmcd-danger);
	border-color: #fecaca;
}

/* Status line */
.wmcd-zone-card-status {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--wmcd-text-muted);
	line-height: 1.3;
}

.wmcd-zone-card.is-filled .wmcd-zone-card-status {
	color: var(--wmcd-primary);
	font-weight: 600;
}

/* Slider controls */
.wmcd-zone-card-controls {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 6px;
	border-top: 1px solid var(--wmcd-border);
}

.wmcd-zone-ctrl-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.wmcd-zone-ctrl-icon {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	color: var(--wmcd-text-muted);
}

.wmcd-zone-zoom-slider,
.wmcd-zone-rotate-slider {
	flex: 1;
	height: 3px;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 2px;
	background: var(--wmcd-border);
	outline: none;
	cursor: pointer;
	min-width: 0;
	accent-color: var(--wmcd-primary);
}

.wmcd-zone-zoom-slider::-webkit-slider-thumb,
.wmcd-zone-rotate-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wmcd-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
	cursor: pointer;
	transition: transform .12s;
}

.wmcd-zone-zoom-slider::-webkit-slider-thumb:hover,
.wmcd-zone-rotate-slider::-webkit-slider-thumb:hover,
.wmcd-zone-zoom-slider:active::-webkit-slider-thumb,
.wmcd-zone-rotate-slider:active::-webkit-slider-thumb {
	transform: scale(1.3);
}

.wmcd-zone-zoom-slider::-moz-range-thumb,
.wmcd-zone-rotate-slider::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wmcd-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
	cursor: pointer;
}

.wmcd-zone-zoom-slider::-moz-range-progress,
.wmcd-zone-rotate-slider::-moz-range-progress {
	background: var(--wmcd-primary);
	height: 3px;
	border-radius: 2px;
}

.wmcd-zone-ctrl-val {
	font-size: 10px;
	font-weight: 700;
	color: var(--wmcd-text);
	min-width: 28px;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Flip row */
.wmcd-zone-flip-row {
	justify-content: flex-start;
	gap: 5px;
}

.wmcd-zone-flip-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--wmcd-text-muted);
	flex-shrink: 0;
	margin-right: 1px;
}

.wmcd-zone-flip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--wmcd-border);
	border-radius: 4px;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	flex-shrink: 0;
}

.wmcd-zone-flip-btn:hover {
	background: var(--wmcd-bg);
	color: var(--wmcd-text);
	border-color: #cbd5e1;
}

.wmcd-zone-flip-btn.is-active {
	background: var(--wmcd-primary-light);
	border-color: var(--wmcd-primary);
	color: var(--wmcd-primary);
}

/* ── Draft-saved indicator ─────────────────────────────────────────────────── */
.wmcd-draft-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
	border: 1px solid rgba(11,116,109,.18);
	border-radius: 999px;
	padding: 2px 8px;
	letter-spacing: .03em;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.wmcd-draft-status.is-visible {
	opacity: 1;
}

/* ── Draft restore banner ──────────────────────────────────────────────────── */
.wmcd-draft-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99990;
	background: var(--wmcd-surface);
	border: 1px solid var(--wmcd-border);
	border-left: 4px solid var(--wmcd-primary);
	border-radius: var(--wmcd-radius-lg);
	padding: 12px 16px;
	box-shadow: var(--wmcd-shadow-lg);
	font-size: 13px;
	color: var(--wmcd-text);
	max-width: 90vw;
	width: max-content;
	animation: wmcd-slide-up .25s ease;
}
.wmcd-draft-banner-icon {
	color: var(--wmcd-primary);
	flex-shrink: 0;
}
.wmcd-draft-banner-text {
	flex: 1;
	font-weight: 500;
	min-width: 0;
}
.wmcd-draft-banner-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.wmcd-draft-banner-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--wmcd-radius);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}
.wmcd-draft-banner-btn--primary {
	background: var(--wmcd-primary);
	color: #fff;
	border-color: var(--wmcd-primary);
}
.wmcd-draft-banner-btn--primary:hover { background: var(--wmcd-primary-hover); }
.wmcd-draft-banner-btn--ghost {
	background: transparent;
	color: var(--wmcd-text-muted);
	border-color: var(--wmcd-border);
}
.wmcd-draft-banner-btn--ghost:hover { background: var(--wmcd-bg); color: var(--wmcd-text); }

/* ── Cart success notification ─────────────────────────────────────────────── */
.wmcd-cart-success {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99990;
	background: var(--wmcd-surface);
	border: 1px solid #D1FAE5;
	border-left: 4px solid var(--wmcd-success);
	border-radius: var(--wmcd-radius-lg);
	padding: 14px 18px;
	box-shadow: var(--wmcd-shadow-lg);
	font-size: 13px;
	color: var(--wmcd-text);
	max-width: 92vw;
	width: max-content;
	animation: wmcd-slide-up .25s ease;
}
.wmcd-cart-success-inner {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wmcd-cart-success-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wmcd-success);
	color: #fff;
	flex-shrink: 0;
}
.wmcd-cart-success-msg {
	font-weight: 600;
}
.wmcd-cart-success-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.wmcd-cart-success-btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border-radius: var(--wmcd-radius);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}
.wmcd-cart-success-btn--primary {
	background: var(--wmcd-success);
	color: #fff;
	border-color: var(--wmcd-success);
}
.wmcd-cart-success-btn--primary:hover { background: #059669; color: #fff; }
.wmcd-cart-success-btn--ghost {
	background: transparent;
	color: var(--wmcd-text-muted);
	border-color: var(--wmcd-border);
}
.wmcd-cart-success-btn--ghost:hover { background: var(--wmcd-bg); color: var(--wmcd-text); }

/* ── Clear button two-step confirm state ───────────────────────────────────── */
.wmcd-hist-btn.is-confirming {
	background: var(--wmcd-danger-light);
	color: var(--wmcd-danger);
	border-color: var(--wmcd-danger);
}

/* ── Error toast variant ───────────────────────────────────────────────────── */
.wmcd-toast.is-error {
	background: #1e1e2e;
	border-left: 3px solid var(--wmcd-danger);
}

@keyframes wmcd-slide-up {
	from { opacity: 0; transform: translateX(-50%) translateY(12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Layer panel ───────────────────────────────────────────────────────────── */
.wmcd-layer-list {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
}
.wmcd-layer-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1.5px solid var(--wmcd-border);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.wmcd-layer-row:hover {
	border-color: rgba(11,116,109,.3);
	background: #f5fdfc;
}
.wmcd-layer-row.is-active {
	border-color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
	box-shadow: 0 0 0 2px rgba(11,116,109,.1);
}
.wmcd-layer-row.is-hidden {
	opacity: .5;
}
.wmcd-layer-row.is-dragging {
	opacity: .4;
}
.wmcd-layer-row.drag-over {
	border-color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
	box-shadow: 0 0 0 2px rgba(11,116,109,.2);
}
.wmcd-layer-grip {
	color: var(--wmcd-text-light);
	font-size: 13px;
	cursor: grab;
	flex: 0 0 14px;
	user-select: none;
	line-height: 1;
}
.wmcd-layer-grip:active {
	cursor: grabbing;
}
.wmcd-layer-vis,
.wmcd-layer-lock {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	border-radius: 5px;
	border: 1px solid var(--wmcd-border);
	background: #fff;
	color: var(--wmcd-text);
	cursor: pointer;
	line-height: 1;
	transition: background .15s, color .15s, border-color .15s;
}
.wmcd-layer-vis:hover,
.wmcd-layer-lock:hover {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
	border-color: rgba(11,116,109,.35);
}
.wmcd-layer-row.is-locked .wmcd-layer-lock {
	color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
	border-color: rgba(11,116,109,.4);
}
.wmcd-layer-icon {
	font-size: 14px;
	flex: 0 0 20px;
	text-align: center;
	line-height: 1;
}
.wmcd-layer-name {
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	color: var(--wmcd-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.wmcd-layer-del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 16px;
	line-height: 1;
	color: var(--wmcd-text-light);
	cursor: pointer;
	flex: 0 0 22px;
	transition: background .15s, color .15s, border-color .15s;
}
.wmcd-layer-del:hover {
	background: var(--wmcd-danger-light);
	color: var(--wmcd-danger);
	border-color: #fecaca;
}

/* ── Properties panel (opacity + filters) ─────────────────────────────────── */
.wmcd-props-panel {
	padding: 12px 16px;
	border-top: 1px solid var(--wmcd-border);
	background: #FAFCFD;
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: wmcd-slide-in .18s ease;
}
.wmcd-props-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wmcd-props-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
	flex: 0 0 auto;
	min-width: 90px;
	display: flex;
	gap: 4px;
	align-items: center;
}
.wmcd-props-label output {
	font-variant-numeric: tabular-nums;
	color: var(--wmcd-primary);
}
.wmcd-props-range {
	flex: 1;
	accent-color: var(--wmcd-primary);
}
.wmcd-props-divider {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wmcd-text-light);
	padding-top: 4px;
	border-top: 1px solid var(--wmcd-border);
}
.wmcd-props-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── Text alignment buttons ────────────────────────────────────────────────── */
.wmcd-align-btns {
	border: 1px solid var(--wmcd-border);
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	gap: 0 !important;
	background: #F8FAFC;
}
.wmcd-align-btn {
	flex: 1;
	border-radius: 0 !important;
	border: none !important;
	border-right: 1px solid var(--wmcd-border) !important;
	padding: 7px 0 !important;
	justify-content: center;
}
.wmcd-align-btn:last-child {
	border-right: none !important;
}
.wmcd-align-btn.active,
.wmcd-align-btn[aria-pressed="true"] {
	background: var(--wmcd-primary) !important;
	color: #fff !important;
}

/* ── Rotation number input ──────────────────────────────────────────────────── */
.wmcd-props-number-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
}
.wmcd-props-number {
	width: 64px;
	padding: 4px 6px;
	border: 1px solid var(--wmcd-border);
	border-radius: 6px;
	font-size: 13px;
	color: var(--wmcd-text);
	background: #fff;
	text-align: center;
	-moz-appearance: textfield;
}
.wmcd-props-number::-webkit-inner-spin-button,
.wmcd-props-number::-webkit-outer-spin-button { opacity: 1; }
.wmcd-props-unit {
	font-size: 12px;
	color: var(--wmcd-text-muted);
	font-weight: 600;
}

/* ── Sticker search ─────────────────────────────────────────────────────────── */
.wmcd-sticker-search-wrap {
	padding: 10px 14px 0;
}
.wmcd-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 12px;
	border: 1.5px solid var(--wmcd-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--wmcd-text);
	background: #fff;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.wmcd-search-input:focus {
	border-color: var(--wmcd-primary);
	box-shadow: 0 0 0 3px rgba(11,116,109,.12);
}

/* ── Context menu ───────────────────────────────────────────────────────────── */
.wmcd-context-menu {
	position: absolute;
	z-index: 9999;
	background: #fff;
	border: 1.5px solid var(--wmcd-border);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0,0,0,.14);
	padding: 5px;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.wmcd-ctx-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	border: none;
	border-radius: 7px;
	background: transparent;
	font-size: 13px;
	color: var(--wmcd-text);
	cursor: pointer;
	transition: background .1s, color .1s;
}
.wmcd-ctx-item:hover {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
}
.wmcd-ctx-danger {
	color: var(--wmcd-danger) !important;
}
.wmcd-ctx-danger:hover {
	background: var(--wmcd-danger-light) !important;
	color: var(--wmcd-danger) !important;
}
.wmcd-ctx-sep {
	height: 1px;
	background: var(--wmcd-border);
	margin: 3px 4px;
}

/* ── Tippy.js custom WMCD theme ────────────────────────────────────────────── */
.tippy-box[data-theme~='wmcd'] {
	background-color: #0B1220;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 7px;
	box-shadow: 0 10px 24px rgba(15,23,42,.22);
	letter-spacing: .01em;
}
.tippy-box[data-theme~='wmcd'] .tippy-arrow { color: #0B1220; }
.tippy-box[data-theme~='wmcd'][data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: #0B1220;
}
.tippy-box[data-theme~='wmcd'][data-placement^='top'] > .tippy-arrow::before {
	border-top-color: #0B1220;
}

/* ── SortableJS layer drag states ──────────────────────────────────────────── */
.wmcd-layer-ghost {
	opacity: .28 !important;
	background: var(--wmcd-primary-light) !important;
	border-color: var(--wmcd-primary) !important;
}
.wmcd-layer-chosen {
	box-shadow: 0 8px 22px rgba(11,116,109,.2) !important;
	border-color: var(--wmcd-primary) !important;
	background: #f5fdfc !important;
}
.wmcd-layer-drag {
	box-shadow: 0 12px 32px rgba(11,116,109,.28) !important;
	opacity: 1 !important;
}

/* ── Finish button shimmer ─────────────────────────────────────────────────── */
@keyframes wmcd-btn-shine {
	0%   { background-position: -300% center; }
	100% { background-position:  300% center; }
}
.wmcd-finish-btn:not(:disabled) {
	background-image: linear-gradient(
		90deg,
		var(--wmcd-primary)       0%,
		var(--wmcd-primary)       38%,
		rgba(255,255,255,.2)      50%,
		var(--wmcd-primary)       62%,
		var(--wmcd-primary)      100%
	);
	background-size: 300% 100%;
	animation: wmcd-btn-shine 3.5s linear infinite;
}
.wmcd-finish-btn:disabled { animation: none; }

/* ── Tool tile icon micro-pop on press ─────────────────────────────────────── */
@keyframes wmcd-icon-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(.8); }
	70%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}
.wmcd-tool-tile:active .wmcd-tile-icon {
	animation: wmcd-icon-pop .28s cubic-bezier(.22,1,.36,1);
}

/* ── Layer row staggered entrance ──────────────────────────────────────────── */
@keyframes wmcd-row-in {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.wmcd-layer-row {
	animation: wmcd-row-in .22s cubic-bezier(.22,1,.36,1) both;
}
.wmcd-layer-row:nth-child(2)  { animation-delay:  28ms; }
.wmcd-layer-row:nth-child(3)  { animation-delay:  52ms; }
.wmcd-layer-row:nth-child(4)  { animation-delay:  72ms; }
.wmcd-layer-row:nth-child(5)  { animation-delay:  90ms; }
.wmcd-layer-row:nth-child(6)  { animation-delay: 106ms; }
.wmcd-layer-row:nth-child(7)  { animation-delay: 120ms; }
.wmcd-layer-row:nth-child(8)  { animation-delay: 133ms; }
.wmcd-layer-row:nth-child(9)  { animation-delay: 144ms; }
.wmcd-layer-row:nth-child(10) { animation-delay: 154ms; }

/* ── Media thumbnail image zoom on hover ───────────────────────────────────── */
.wmcd-pattern-thumb img,
.wmcd-sticker-thumb img {
	transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.wmcd-pattern-thumb:not(.active):hover img,
.wmcd-sticker-thumb:not(.active):hover img {
	transform: scale(1.07);
}

/* ── Skeleton shimmer replaces spinner for loading thumbnails ──────────────── */
@keyframes wmcd-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}
.wmcd-pattern-thumb.is-loading,
.wmcd-sticker-thumb.is-loading {
	background: linear-gradient(
		90deg,
		#edf1f5 25%,
		#e0e6ed 50%,
		#edf1f5 75%
	);
	background-size: 200% 100%;
	animation: wmcd-shimmer 1.4s ease infinite;
}
.wmcd-pattern-thumb.is-loading::after,
.wmcd-sticker-thumb.is-loading::after {
	display: none;
}

/* ── Inline panel spring entrance (override .2s ease) ─────────────────────── */
.wmcd-inline-panel {
	animation: wmcd-slide-in .24s cubic-bezier(.22,1,.36,1);
}

/* ── Canvas inner subtle hover glow ───────────────────────────────────────── */
.wmcd-canvas-inner {
	transition: transform .2s ease, box-shadow .25s ease, outline-color .2s ease;
}
.wmcd-canvas-stage:hover .wmcd-canvas-inner:not(.is-drag-over) {
	box-shadow: var(--wmcd-shadow-canvas), 0 0 0 1px rgba(11,116,109,.1);
}

/* ── Crop Modal (Cropper.js) ───────────────────────────────────────────────── */
.wmcd-crop-modal {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.wmcd-crop-modal[hidden] { display: none; }

.wmcd-crop-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11,18,32,.74);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.wmcd-crop-dialog {
	position: relative;
	z-index: 1;
	background: var(--wmcd-surface);
	border-radius: var(--wmcd-radius-xl);
	box-shadow: 0 32px 80px rgba(11,18,32,.36), 0 8px 24px rgba(11,18,32,.2);
	width: 100%;
	max-width: 600px;
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: wmcd-slide-in .24s cubic-bezier(.22,1,.36,1);
}

.wmcd-crop-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--wmcd-border);
	background: #F8FBFC;
	flex-shrink: 0;
}

.wmcd-crop-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--wmcd-text);
	letter-spacing: .01em;
}

.wmcd-crop-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.wmcd-crop-close:hover {
	background: var(--wmcd-danger-light);
	color: var(--wmcd-danger);
	border-color: #fecaca;
}

.wmcd-crop-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.wmcd-crop-stage {
	flex: 1;
	min-height: 240px;
	max-height: 440px;
	background: #111827;
	overflow: hidden;
	display: block;
}
.wmcd-crop-stage img {
	display: block;
	max-width: 100%;
}

.wmcd-crop-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid var(--wmcd-border);
	background: #FAFCFD;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.wmcd-crop-ratio-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wmcd-crop-ratio-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}

.wmcd-crop-ratio-btns {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.wmcd-crop-ratio-btn {
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--wmcd-border);
	background: #fff;
	font-size: 11px;
	font-weight: 700;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}
.wmcd-crop-ratio-btn:hover {
	border-color: rgba(11,116,109,.3);
	color: var(--wmcd-primary);
	background: var(--wmcd-primary-light);
}
.wmcd-crop-ratio-btn.active {
	background: var(--wmcd-primary);
	color: #fff;
	border-color: var(--wmcd-primary);
}

.wmcd-crop-tool-btns {
	display: flex;
	gap: 6px;
}

.wmcd-crop-tool-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--wmcd-border);
	background: #fff;
	color: var(--wmcd-text-muted);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.wmcd-crop-tool-btn:hover {
	background: var(--wmcd-primary-light);
	color: var(--wmcd-primary);
	border-color: rgba(11,116,109,.3);
	transform: scale(1.06);
}
.wmcd-crop-tool-btn svg {
	width: 15px;
	height: 15px;
	display: block;
	flex-shrink: 0;
	pointer-events: none;
}

.wmcd-crop-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--wmcd-border);
	background: #F8FBFC;
	flex-shrink: 0;
}

/* Cropper.js handle color overrides to match design system */
.cropper-point,
.cropper-point.point-se,
.cropper-point.point-sw,
.cropper-point.point-nw,
.cropper-point.point-ne {
	background-color: var(--wmcd-primary) !important;
}
.cropper-line              { background-color: var(--wmcd-primary) !important; opacity: .6; }
.cropper-view-box          { outline: 1px solid var(--wmcd-primary) !important; }
.cropper-face              { background-color: rgba(11,116,109,.06) !important; }
.cropper-dashed            { border-color: rgba(11,116,109,.5) !important; }
.cropper-modal             { background-color: rgba(11,18,32,.55) !important; }

/* ── Photo Color Palette Strip ─────────────────────────────────────────────── */
.wmcd-palette-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0 6px;
	border-bottom: 1px solid var(--wmcd-border);
	margin-bottom: 4px;
}
.wmcd-palette-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--wmcd-text-light);
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	flex-shrink: 0;
}
.wmcd-palette-swatches {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.wmcd-palette-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid rgba(255,255,255,.9);
	box-shadow: 0 0 0 1px var(--wmcd-border), 0 2px 5px rgba(0,0,0,.14);
	cursor: pointer;
	transition: transform .15s cubic-bezier(.22,1,.36,1), box-shadow .15s;
	padding: 0;
	flex-shrink: 0;
}
.wmcd-palette-swatch:hover {
	transform: scale(1.25);
	box-shadow: 0 0 0 2px var(--wmcd-primary), 0 4px 10px rgba(0,0,0,.2);
}
.wmcd-palette-swatch.is-active {
	transform: scale(1.18);
	box-shadow: 0 0 0 2.5px var(--wmcd-primary), 0 4px 10px rgba(0,0,0,.22);
}

/* ── Reduced motion: disable all decorative animations ────────────────────── */
@media (prefers-reduced-motion: reduce) {
	#wmcd-root *,
	#wmcd-root *::before,
	#wmcd-root *::after {
		animation-duration:       .01ms !important;
		animation-iteration-count: 1    !important;
		transition-duration:      .01ms !important;
	}
}
/* Also cover the crop modal which is outside #wmcd-root */
@media (prefers-reduced-motion: reduce) {
	.wmcd-crop-dialog { animation: none !important; }
}