/*
 * Plugin B — designer CTA + modal styles.
 *
 * Modal mirrors the sew-nc / Inksoft designer workspace:
 *   - Full-viewport overlay
 *   - Three-column body (toolbar / canvas stage / actions panel)
 *   - Bottom sticky bar (product info + Colors / Save / Next Step)
 *
 * All colors and radii reference tokens.css custom properties from the child
 * theme (see CLAUDE.md §5). No hard-coded values in this file.
 */

/* ============================================================
   "Design Now" CTA
   ============================================================ */

.pm-designer-cta,
.pm-designer-cta:hover,
.pm-designer-cta:focus,
.pm-designer-cta:active {
	color: var(--pm-color-surface);
	text-decoration: none;
}

.pm-designer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	margin: 0;
	font-family: var(--pm-font-sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--pm-color-ink);
	border: 0;
	border-radius: var(--pm-radius-md);
	cursor: pointer;
	transition: background-color 120ms ease, transform 60ms ease;
	appearance: none;
}

.pm-designer-cta:hover {
	background: var(--pm-color-ink-hover);
}

.pm-designer-cta:active {
	background: var(--pm-color-ink-hover);
	transform: translateY(1px);
}

.pm-designer-cta:focus {
	outline: 0;
}

.pm-designer-cta:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-product__summary .pm-designer-cta {
	margin-top: 12px;
}

.pm-quote .pm-designer-cta {
	margin-top: 12px;
}

/* ============================================================
   Modal — full-viewport workspace
   ============================================================ */

.pm-designer-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	font-family: var(--pm-font-sans);
	color: var(--pm-color-ink);
}

.pm-designer-modal[hidden] {
	display: none;
}

.pm-designer-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}

.pm-designer-modal__dialog {
	position: absolute;
	inset: 0;
	background: var(--pm-color-surface);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
}

/* Mouse-click focus ring suppression (2026-06-03 hotfix). After QA flagged
   the brand-logo AND Product quick-button leaving a blue 2px ring after
   click, the pattern is clearly "no lingering rings anywhere in the modal."
   This one rule covers every button + anchor inside the modal. The
   individual :focus-visible rules deeper in this stylesheet still apply on
   keyboard navigation — they share the same specificity (one class + one
   pseudo = 0,2,0) but come later in source order, so they win the cascade
   tiebreaker on keyboard focus. Native inputs (number, textarea, range)
   are intentionally excluded — their focus indicator is critical UX. */
.pm-designer-modal button:focus,
.pm-designer-modal a:focus {
	outline: none;
}

/* ---------- header ---------- */

/* Phase-1 inspector pivot (2026-06-02): three-slot header — back-link (left),
   centered brand logo, cart icon (right). Grid is `1fr auto 1fr` so the
   centered slot stays optically centered even when the left/right slot
   content is different widths. Replaces the old single-line title + ×. */
.pm-designer-modal__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px 28px;
	border-bottom: 1px solid var(--pm-color-border);
	background: var(--pm-color-surface);
	min-height: 64px;
}

.pm-designer-modal__header-left {
	justify-self: start;
}

.pm-designer-modal__header-center {
	justify-self: center;
}

.pm-designer-modal__header-right {
	justify-self: end;
}

.pm-designer-modal__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 10px 6px 6px;
	color: var(--pm-color-ink);
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--pm-radius-sm);
	transition: background-color 120ms ease, color 120ms ease;
}

.pm-designer-modal__back svg {
	color: var(--pm-color-ink);
	flex: 0 0 auto;
}

.pm-designer-modal__back:hover,
.pm-designer-modal__back:focus-visible {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-ink);
	outline: 0;
}

.pm-designer-modal__back:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/* Plain link — no button chrome, no hover background. Matches the homepage
   header logo behavior: the image IS the link. Mouse-click focus ring is
   killed by the modal-wide :focus reset above; :focus-visible here keeps
   keyboard a11y with a generous offset. */
.pm-designer-modal__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pm-designer-modal__brand:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 4px;
	border-radius: var(--pm-radius-sm);
}

.pm-designer-modal__brand-logo {
	display: block;
	max-height: 44px;
	max-width: 220px;
	width: auto;
	height: auto;
}

.pm-designer-modal__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-ink);
	background: transparent;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.pm-designer-modal__cart:hover {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-ink);
}

.pm-designer-modal__cart:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-modal__cart svg {
	color: currentColor;
}

/* ---------- workspace grid ---------- */

.pm-designer-workspace {
	display: grid;
	/* Phase-1 inspector pivot (2026-06-02): right panel widened 320 → 360 px.
	   The inspector now hosts edit-text / edit-image / edit-image sub-views
	   (Phases 3-6) which need room for sliders, font lists, and image
	   previews — 320 was already tight for the 4 entry cards and gets worse
	   once those sub-views land. Stage column gives back 40 px in exchange. */
	grid-template-columns: 96px 1fr 360px;
	min-height: 0; /* allow children to shrink so canvas can size */
	background: var(--pm-color-surface-soft);
}

/* ---------- left toolbar ---------- */

.pm-designer-tools {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 10px;
	background: var(--pm-color-surface);
	border-right: 1px solid var(--pm-color-border);
	overflow-y: auto;
}

.pm-designer-tool,
.pm-designer-tool:hover,
.pm-designer-tool:focus,
.pm-designer-tool:active {
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 0;
	font-family: inherit;
}

.pm-designer-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 10px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
	appearance: none;
}

.pm-designer-tool svg {
	width: 22px;
	height: 22px;
	color: var(--pm-color-ink);
}

.pm-designer-tool:hover {
	background: var(--pm-color-border);
}

.pm-designer-tool:focus {
	outline: 0;
}

.pm-designer-tool:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-tool[disabled],
.pm-designer-tool[disabled]:hover {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-placeholder);
	cursor: not-allowed;
}

.pm-designer-tool[disabled] svg {
	color: var(--pm-color-placeholder);
}

.pm-designer-tool[aria-pressed="true"] {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
}

.pm-designer-tool[aria-pressed="true"] svg {
	color: var(--pm-color-surface);
}

/* ---------- center stage ---------- */

.pm-designer-stage-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 24px;
	gap: 16px;
}

.pm-designer-stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	/* Zoom tool CSS-transforms the frame; clip the scaled paint at the
	   stage edges so the zoomed shirt doesn't bleed into adjacent UI. */
	overflow: hidden;
}

/* Drag-and-drop visual cue (Phase 5 — 2026-06-03). When a file is being
   dragged over the stage, fade in an accent-bordered overlay with a
   "Drop image here" hint. Only shows in design view; quantity/summary
   ignore drops because the canvas is read-only there. */
.pm-designer-stage::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 2px dashed var(--pm-color-accent);
	border-radius: var(--pm-radius-md);
	background: rgba(30, 99, 208, 0.04);
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease;
	z-index: 5;
}

.pm-designer-stage--drop-active::after {
	opacity: 1;
}

.pm-designer-stage__drop-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 14px 22px;
	font-family: var(--pm-font-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--pm-color-accent);
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--pm-color-accent);
	border-radius: var(--pm-radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease;
	z-index: 6;
}

.pm-designer-stage--drop-active .pm-designer-stage__drop-hint {
	opacity: 1;
}

/*
 * Fixed-aspect frame holds both the shirt mockup (<img>) and the fabric canvas
 * (.canvas-container) as overlapping absolute layers. Aspect-ratio matches the
 * fabric internal coords (600x750 = 4:5) so display never distorts. Width grows
 * up to 600px, then max-height clamps it back if the stage is short — browser
 * preserves aspect-ratio across both constraints.
 */
.pm-designer-stage__frame {
	position: relative;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 4 / 5;
	max-height: 100%;
	background: var(--pm-color-surface);
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-shadow-sm);
	overflow: hidden;
}

/* Shirt mockup — plain <img> behind the transparent fabric canvas. */
.pm-designer-shirt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.pm-designer-shirt[hidden] {
	display: none;
}

/* Day 8 — print-area overlay. A non-interactive dashed rectangle indicating
   the printable zone per side. Positioned inline (left/top/width/height as
   % of frame) by paintPrintAreaForSide on every side switch. Hidden in
   quantity / summary views so the customer's preview shows just shirt +
   design without the dashed outline. */
.pm-designer-print-area {
	position: absolute;
	border: 2px dashed var(--pm-color-accent);
	background: rgba(30, 99, 208, 0.04); /* faint tint of --pm-color-accent */
	border-radius: 4px;
	pointer-events: none;
	z-index: 2; /* above shirt + canvas but doesn't capture clicks */
	transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.pm-designer-print-area[hidden] {
	display: none;
}

/* "Print area" label tucked in the top-left corner of the dashed box. */
.pm-designer-print-area__label {
	position: absolute;
	top: -10px;
	left: 8px;
	padding: 1px 6px;
	background: var(--pm-color-accent);
	color: var(--pm-color-surface);
	font-family: var(--pm-font-sans);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 2px;
	line-height: 1.6;
	white-space: nowrap;
}

/* Hide the overlay in non-design views — quantity/summary should show a
   clean shirt + design preview without the dashed bounding box. */
.pm-designer-modal[data-pm-view="quantity"] .pm-designer-print-area,
.pm-designer-modal[data-pm-view="summary"]  .pm-designer-print-area {
	display: none;
}

/*
 * Fabric wraps the <canvas> in .canvas-container. Stretch container + both
 * inner canvases to fill the frame; canvas pixel buffer stays at the internal
 * 600x750 set by the HTML width/height attrs (and never touched after that),
 * so CSS-only scaling here keeps coords stable for serialization + export.
 */
.pm-designer-stage__frame .canvas-container {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	background: transparent;
}

.pm-designer-stage__frame .canvas-container canvas.lower-canvas,
.pm-designer-stage__frame .canvas-container canvas.upper-canvas,
.pm-designer-stage__frame canvas.pm-designer-canvas {
	width: 100% !important;
	height: 100% !important;
	background: transparent;
}

.pm-designer-stage__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	margin: auto;
	max-width: 360px;
	max-height: fit-content;
	text-align: center;
	color: var(--pm-color-muted);
	font-size: 14px;
	line-height: 1.5;
	background: var(--pm-color-surface-soft);
	border: 1px dashed var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	pointer-events: none;
}

.pm-designer-stage__empty[hidden] {
	display: none;
}

/* Transient status toast — shows for ~2.5s when an action can't run
   (e.g. Clear pressed with nothing selected). Above the canvas (z 5)
   so it sits over the print-area mask + zoomed shirt. Non-interactive. */
.pm-designer-stage__toast {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 8px 14px;
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	font-family: var(--pm-font-sans);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-shadow-md);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	max-width: 80%;
	text-align: center;
}

.pm-designer-stage__toast--visible {
	opacity: 1;
}

.pm-designer-stage__toast[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pm-designer-stage__toast {
		transition: none;
	}
}

/* ---------- side tabs ---------- */

.pm-designer-sides {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-md);
	align-self: center;
}

.pm-designer-side,
.pm-designer-side:hover,
.pm-designer-side:focus,
.pm-designer-side:active {
	color: var(--pm-color-ink);
	background: transparent;
	border: 0;
	font-family: inherit;
}

.pm-designer-side {
	min-height: 34px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
	appearance: none;
}

.pm-designer-side:hover {
	background: var(--pm-color-input-bg);
}

.pm-designer-side:focus {
	outline: 0;
}

.pm-designer-side:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-side[aria-selected="true"],
.pm-designer-side[aria-selected="true"]:hover {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
}

/* Blue dot on side tabs that have at least one design object — gives the
   user a quick "you designed on 2 sides" cue in Quantity / Summary views
   where the canvas only shows one side at a time. */
.pm-designer-side--has-content::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	background: var(--pm-color-accent);
	border-radius: 50%;
	vertical-align: 2px;
}

.pm-designer-side[aria-selected="true"].pm-designer-side--has-content::after {
	background: var(--pm-color-surface);
}

/* ---------- right panel (inspector — Phase-1 pivot 2026-06-02) ----------

   The panel hosts five child views toggled via `data-pm-inspector` on the
   wrapper. Exactly one `.pm-designer-inspector__view` is visible at a time.
   In Phase 1, only the `empty` view has real content; the other four are
   stubs that later phases fill in (layers / upload / edit-text / edit-image
   / edit-art). The CSS rule below is the single switch point. */

.pm-designer-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 22px;
	background: var(--pm-color-surface);
	border-left: 1px solid var(--pm-color-border);
	overflow-y: auto;
}

.pm-designer-inspector__view {
	display: none;
	flex-direction: column;
	gap: 14px;
}

.pm-designer-panel[data-pm-inspector="empty"]      .pm-designer-inspector__view[data-pm-view-id="empty"],
.pm-designer-panel[data-pm-inspector="layers"]     .pm-designer-inspector__view[data-pm-view-id="layers"],
.pm-designer-panel[data-pm-inspector="upload"]     .pm-designer-inspector__view[data-pm-view-id="upload"],
.pm-designer-panel[data-pm-inspector="edit-text"]  .pm-designer-inspector__view[data-pm-view-id="edit-text"],
.pm-designer-panel[data-pm-inspector="edit-image"] .pm-designer-inspector__view[data-pm-view-id="edit-image"],
.pm-designer-panel[data-pm-inspector="edit-art"]   .pm-designer-inspector__view[data-pm-view-id="edit-art"] {
	display: flex;
}

.pm-designer-inspector__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pm-designer-inspector__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pm-designer-panel__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-panel__hint {
	margin: 0;
	color: var(--pm-color-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Phase-1 inspector pivot — divider between the action cards and the
   "Returning customer?" sub-block. Matches sew-nc Img 15 — light hairline
   that visually splits new-customer entry from return-customer entry. */
.pm-designer-inspector__divider {
	margin: 8px 0 4px;
	border: 0;
	border-top: 1px solid var(--pm-color-border);
	width: 100%;
}

.pm-designer-inspector__returning {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-inspector__returning-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--pm-color-ink);
	letter-spacing: 0.01em;
}

.pm-designer-inspector__returning-body {
	margin: 0;
	color: var(--pm-color-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* MY SAVED ART — outlined ghost button (different visual treatment from
   the 3 action cards above so it doesn't read as a fourth peer entry). */
.pm-designer-inspector__returning-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 40px;
	padding: 0 18px;
	margin-top: 4px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1.5px solid var(--pm-color-ink);
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.pm-designer-inspector__returning-cta:hover {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
}

.pm-designer-inspector__returning-cta:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-inspector__placeholder {
	margin: 0;
	padding: 24px 8px;
	color: var(--pm-color-muted);
	font-size: 13px;
	text-align: center;
	font-style: italic;
}

/* Empty-state paste affordance (Phase 3 QA fix 2026-06-02). Hidden by
   default; JS unhides via updateActionsRowState when state.clipboard has
   content. Lets the customer paste onto an empty side directly. */
.pm-designer-inspector__empty-paste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pm-designer-inspector__empty-paste-hint {
	margin: 0;
	color: var(--pm-color-ink);
	font-size: 13px;
	line-height: 1.45;
	font-weight: 600;
}

.pm-designer-inspector__empty-paste-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
	min-height: 44px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--pm-color-surface);
	background: var(--pm-color-ink);
	border: 0;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.pm-designer-inspector__empty-paste-cta:hover {
	background: var(--pm-color-ink-hover);
}

.pm-designer-inspector__empty-paste-cta:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/* ============================================================
   Layers view (Phase 2 — sew-nc Img 18 / Img 21)
   ============================================================ */

/* 4-icon quick strip at top of the layers view — Upload / Add Text / Add
   Art / Product. Each cell is icon-above-label, ~80px square. Tapping
   routes to the same flows as the entry-view cards (Product opens the
   product-info sub-view). */
.pm-designer-inspector__quick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.pm-designer-quick,
.pm-designer-quick:hover,
.pm-designer-quick:focus,
.pm-designer-quick:active {
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 0;
	font-family: inherit;
}

.pm-designer-quick {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 70px;
	padding: 8px 4px;
	font-size: 11px;
	font-weight: 600;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.pm-designer-quick__icon {
	width: 22px;
	height: 22px;
	color: var(--pm-color-ink);
}

.pm-designer-quick__label {
	letter-spacing: 0.01em;
}

.pm-designer-quick:hover {
	background: var(--pm-color-border);
}

.pm-designer-quick:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/* Layer list — vertical stack, one row per fabric object on the active side.
   Rows are 56px tall (44px floor + breathing room). Drag-handle scoped as
   the drag affordance so the whole row isn't accidentally draggable. */
.pm-designer-layers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Phase 7 (2026-06-03) — "Tap an object to edit" hint between the layer
   list and ACTIONS row. JS toggles `hidden` from renderLayerRows() when
   layers exist but none are selected. Centered, muted, small — explains
   why the ACTIONS icons look inactive without shouting. */
.pm-designer-layers__hint {
	margin: 4px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--pm-color-muted);
	text-align: center;
	letter-spacing: 0.01em;
}

.pm-designer-layer {
	display: grid;
	grid-template-columns: 24px 1fr 32px 32px;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	min-height: 56px;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	transition: border-color 120ms ease, box-shadow 120ms ease, opacity 150ms ease;
}

.pm-designer-layer--active {
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 1px var(--pm-color-accent);
}

.pm-designer-layer--dragging {
	opacity: 0.45;
}

.pm-designer-layer--drag-over {
	border-top: 2px solid var(--pm-color-accent);
}

.pm-designer-layer__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--pm-color-muted);
	cursor: grab;
}

.pm-designer-layer__handle:active {
	cursor: grabbing;
}

.pm-designer-layer__handle svg {
	width: 14px;
	height: 14px;
}

/* Middle slot — thumbnail for image/art rows, inline text input for text rows. */
.pm-designer-layer__body {
	display: flex;
	align-items: center;
	min-width: 0;
}

.pm-designer-layer__thumb {
	display: block;
	width: 40px;
	height: 50px;
	object-fit: contain;
	/* Checkered transparent-bg pattern so transparent PNGs read visually. */
	background-color: var(--pm-color-input-bg);
	background-image:
		linear-gradient(45deg, var(--pm-color-border) 25%, transparent 25%),
		linear-gradient(-45deg, var(--pm-color-border) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--pm-color-border) 75%),
		linear-gradient(-45deg, transparent 75%, var(--pm-color-border) 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
	border-radius: 2px;
}

.pm-designer-layer__text-input {
	width: 100%;
	min-width: 0;
	padding: 6px 8px;
	font-family: inherit;
	font-size: 14px;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-layer__text-input:focus {
	outline: 0;
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 3px rgba(30, 99, 208, 0.15);
}

/* Layer-row action buttons (pencil + trash).
 *
 * THE BUG WE FIXED (2026-06-02, third round): Storefront's button rule sets
 * `padding: 0.618em 1.042em` based on the parent's font-size — that worked
 * out to 22.65px of horizontal padding inside our 32px-wide button. With
 * box-sizing border-box, the SVG content area collapsed to 0px and the icon
 * had no room to render. Fix is `padding: 0` to reclaim the box.
 *
 * `flex: 0 0 32px` locks the size so an enclosing flex container can't
 * shrink the button below its target width. `min-width: 0` was a defensive
 * add — without it, some inherited button min-content rule could keep the
 * box wider than 32px even with the explicit width. */
.pm-designer-layer__btn {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-ink);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.pm-designer-layer__btn:hover {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-ink);
}

.pm-designer-layer__btn:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-layer__btn--danger:hover {
	background: var(--pm-color-danger-soft);
	color: var(--pm-color-danger);
}

/* SVG paint inheritance. Putting `fill` on the path via the HTML attribute
 * alone works in isolation, but parent themes that ship icon libraries can
 * easily add a `svg path { fill: ... }` rule that beats the attribute.
 * Anchoring fill explicitly via CSS makes the painted color predictable
 * across themes. Same approach for the ACTIONS row arrowheads which opted
 * in via `fill="currentColor"` on individual paths — the attribute-scoped
 * selector avoids touching the stroke-only line parts in the same SVG. */
.pm-designer-layer__btn svg,
.pm-designer-layer__btn svg path {
	fill: currentColor;
}

.pm-designer-layers-actions__btn svg path[fill="currentColor"],
.pm-designer-layers-actions__btn svg rect[fill="currentColor"] {
	fill: currentColor;
}

/* ACTIONS row — 8 icon buttons that apply to the active object (or
   selection). Buttons stay disabled until a layer is selected; paste is
   disabled until state.clipboard has content. */
.pm-designer-layers-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-layers-actions__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pm-color-ink);
}

.pm-designer-layers-actions__row {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.pm-designer-layers-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding: 0;
	background: var(--pm-color-input-bg);
	border: 0;
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-ink);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.pm-designer-layers-actions__btn:hover {
	background: var(--pm-color-border);
}

.pm-designer-layers-actions__btn:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-layers-actions__btn[disabled],
.pm-designer-layers-actions__btn[disabled]:hover {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-placeholder);
	cursor: not-allowed;
}

.pm-designer-layers-actions__btn--danger:not([disabled]):hover {
	background: var(--pm-color-danger-soft);
	color: var(--pm-color-danger);
}

/* COLORS IN USE — derived list of unique object fills + image strokes.
   Each chip is a 16×16 colored circle. Hidden when no objects have a fill. */
.pm-designer-colors-in-use {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-colors-in-use__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pm-color-ink);
}

.pm-designer-colors-in-use__count {
	color: var(--pm-color-muted);
	font-weight: 600;
}

.pm-designer-colors-in-use__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pm-designer-colors-in-use__chip {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--pm-color-border);
	display: inline-block;
}

/* ============================================================
   Product-info view (Phase 2 — sew-nc Edit Product reference)
   ============================================================ */

/* Sub-view header — back arrow + title + close ×. Reused by every
   inspector sub-view that returns to `layers` (Phase 3-6 share this shell). */
.pm-designer-inspector__view--sub {
	gap: 16px;
}

.pm-designer-inspector__sub-header {
	display: grid;
	grid-template-columns: 28px 1fr 28px;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
}

/* Back arrow keeps its rounded-button hit area (left side of the
   sub-header grid) — it needs the larger touch target for the icon. */
.pm-designer-inspector__back {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.pm-designer-inspector__back:hover {
	background: var(--pm-color-input-bg);
}

.pm-designer-inspector__back:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/* QA round 12 (2026-06-04) — close × matches the Add Art / Saved /
   Colors popovers: bare icon, muted color, no fixed dimensions, no
   border-radius, no hover background. Previously rendered as a 28×28
   rounded chip which looked inconsistent with the other three sheets. */
.pm-designer-inspector__close {
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--pm-color-muted);
	cursor: pointer;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	/* Right-edge of the sub-header grid cell — matches the visual
	   position of the × in the Add Art / Saved / Colors popovers. */
	justify-self: end;
}

.pm-designer-inspector__close:hover,
.pm-designer-inspector__close:focus-visible {
	color: var(--pm-color-ink);
	background: transparent;
}

.pm-designer-inspector__sub-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--pm-color-ink);
	text-align: left;
}

.pm-designer-product-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pm-designer-product-info__name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--pm-color-ink);
	line-height: 1.25;
}

.pm-designer-product-info__model {
	margin: 0;
	font-size: 13px;
	color: var(--pm-color-muted);
}

.pm-designer-product-info__change {
	align-self: flex-start;
	min-height: 36px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1.5px solid var(--pm-color-ink);
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
}

.pm-designer-product-info__change[disabled] {
	color: var(--pm-color-disabled);
	border-color: var(--pm-color-disabled);
	cursor: not-allowed;
}

.pm-designer-product-info__section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pm-designer-product-info__heading {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-product-info__colors {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 6px;
}

.pm-designer-product-info__color {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--pm-color-border);
}

.pm-designer-product-info__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pm-designer-product-info__size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-product-info__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--pm-color-muted);
}

.pm-designer-product-info__desc p {
	margin: 0 0 8px;
}

.pm-designer-product-info__desc p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Edit-image view (Phase 3 — sew-nc Img 22)
   ============================================================ */

/* Preview slot at top — scaled rendering of the active image on a checkered
   transparent-background pattern so transparent PNGs read clearly. ~280×100
   box; image contained so aspect ratio stays correct regardless of source. */
.pm-designer-edit-image__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 110px;
	padding: 8px;
	background-color: var(--pm-color-input-bg);
	background-image:
		linear-gradient(45deg, var(--pm-color-border) 25%, transparent 25%),
		linear-gradient(-45deg, var(--pm-color-border) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--pm-color-border) 75%),
		linear-gradient(-45deg, transparent 75%, var(--pm-color-border) 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0;
	border-radius: var(--pm-radius-sm);
}

.pm-designer-edit-image__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Color Profile row (Phase 5 — 2026-06-03). Inline override below the
   preview; auto-detected value shows by default. Adjusting drops the
   print price by reducing the per-side color count fed into the engine. */
.pm-designer-edit-image__profile {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pm-designer-edit-image__profile-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-ink);
}

.pm-designer-edit-image__profile-select {
	width: 100%;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	appearance: menulist;
}

.pm-designer-edit-image__profile-select:focus {
	outline: 0;
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 3px rgba(30, 99, 208, 0.15);
}

.pm-designer-edit-image__profile-hint {
	margin: 0;
	font-size: 11px;
	color: var(--pm-color-muted);
	line-height: 1.45;
}

/* ============================================================
   Edit-text view (Phase 4 — sew-nc Img 23 + horizontal strips
   per QA decision 2026-06-03 to favor mobile-native gestures
   over drill-down sub-pickers)
   ============================================================ */

.pm-designer-edit-text__content {
	width: 100%;
	min-height: 64px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	resize: vertical;
}

.pm-designer-edit-text__content:focus {
	outline: 0;
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 3px rgba(30, 99, 208, 0.15);
}

.pm-designer-edit-text__section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-edit-text__heading {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pm-color-muted);
	text-transform: uppercase;
}

/* Fonts — horizontal scrollable strip. Each card renders its name in its own
   typeface so the customer sees the look before picking. Scroll-snap helps
   touch flicking land cleanly on the next card. */
.pm-designer-edit-text__fonts {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 0 6px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Thin scrollbar treatment — visible enough to discover, not intrusive */
	scrollbar-width: thin;
	scrollbar-color: var(--pm-color-border) transparent;
}

.pm-designer-edit-text__fonts::-webkit-scrollbar {
	height: 4px;
}

.pm-designer-edit-text__fonts::-webkit-scrollbar-thumb {
	background: var(--pm-color-border);
	border-radius: 2px;
}

.pm-designer-font-card,
.pm-designer-font-card:hover,
.pm-designer-font-card:focus,
.pm-designer-font-card:active {
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
}

.pm-designer-font-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 88px;
	height: 48px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
	white-space: nowrap;
}

.pm-designer-font-card:hover {
	border-color: var(--pm-color-muted);
}

.pm-designer-font-card:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-font-card[aria-checked="true"] {
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 1px var(--pm-color-accent);
}

/* Shared 9-swatch color palette — used by edit-text (Phase 4) and edit-art
   (Phase 6). Markup is emitted by
   PM_Designer_Frontend::render_inspector_color_palette(). Fits in the 360px
   panel without scrolling on desktop. Horizontal overflow allowed for future
   extensions (custom color, etc.). */
.pm-designer-color-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 2px 0 4px;
}

.pm-designer-color-swatch {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--pm-color-border);
	border-radius: 50%;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
	appearance: none;
}

.pm-designer-color-swatch:hover {
	transform: scale(1.08);
}

.pm-designer-color-swatch:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-color-swatch--light {
	/* White swatch needs a darker border so it's visible on white panel bg */
	border-color: var(--pm-color-muted);
}

.pm-designer-color-swatch[aria-checked="true"] {
	box-shadow: 0 0 0 2px var(--pm-color-surface), 0 0 0 4px var(--pm-color-accent);
}

/* Phase 6 multi-color (2026-06-03) — "custom" chip in Edit Art rows. Rainbow
   conic gradient signals "pick any color"; clicking opens the shared
   hidden <input type=color>. */
.pm-designer-color-swatch--custom {
	background: conic-gradient(
		from 0deg,
		#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
	);
	position: relative;
}

.pm-designer-color-swatch--custom::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--pm-color-surface);
	opacity: 0.15;
	pointer-events: none;
}

/* ============================================================
   Edit Art rows (Phase 6 multi-color — 2026-06-03)
   ============================================================ */

.pm-designer-edit-art__rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pm-designer-edit-art__empty {
	margin: 0;
	padding: 8px 0;
	color: var(--pm-color-muted);
	font-size: 13px;
}

.pm-designer-edit-art__row {
	padding: 8px 0;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-designer-edit-art__row:last-child {
	border-bottom: 0;
}

.pm-designer-edit-art__row-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 12px;
}

.pm-designer-edit-art__row-current {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--pm-color-border);
	flex-shrink: 0;
}

.pm-designer-edit-art__row-label {
	color: var(--pm-color-muted);
	font-weight: 500;
}

/* Hidden native color picker — kept in the DOM so .click() opens it; the
   visible chip is the rainbow swatch button above. */
.pm-designer-edit-art__custom-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   Liquid Glass sliders (Phase 4 — user request 2026-06-03)
   ============================================================

   Volume-knob style sliders inspired by Apple's "liquid glass" (iOS 18 /
   macOS Sequoia) aesthetic: translucent track with inner shadow + specular
   highlight, glassy white thumb with inner glow + soft drop shadow,
   accent-colored "filled" portion of the track driven by --pm-slider-value
   (updated from JS on input event).

   Cross-browser via WebKit + Mozilla pseudo-elements. Input is 32px tall
   to give the 22px thumb breathing room and a 44px-equivalent touch hit
   area on mobile. */
.pm-designer-slider-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pm-designer-slider-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pm-designer-slider-row__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-ink);
}

.pm-designer-slider-row__number {
	width: 64px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.pm-designer-slider-row__number::-webkit-inner-spin-button,
.pm-designer-slider-row__number::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.pm-designer-slider-row__number:focus {
	outline: 0;
	border-color: var(--pm-color-accent);
	box-shadow: 0 0 0 3px rgba(30, 99, 208, 0.15);
}

/* The slider input itself — invisible, just provides height + native UA
   behavior. Track + thumb get styled via pseudos. */
.pm-designer-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 32px;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	/* Default fallback in case JS hasn't set the variable yet */
	--pm-slider-value: 0%;
}

.pm-designer-slider:focus {
	outline: 0;
}

.pm-designer-slider:focus-visible::-webkit-slider-thumb {
	box-shadow:
		0 0 0 4px rgba(30, 99, 208, 0.25),
		0 2px 5px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.pm-designer-slider:focus-visible::-moz-range-thumb {
	box-shadow:
		0 0 0 4px rgba(30, 99, 208, 0.25),
		0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- WebKit track --- */
.pm-designer-slider::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background:
		linear-gradient(
			to right,
			var(--pm-color-accent) 0,
			var(--pm-color-accent) var(--pm-slider-value, 0%),
			rgba(10, 10, 10, 0.08) var(--pm-slider-value, 0%),
			rgba(10, 10, 10, 0.08) 100%
		);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.12),
		inset 0 -1px 0 rgba(255, 255, 255, 0.6),
		0 1px 0 rgba(255, 255, 255, 0.4);
}

/* --- WebKit thumb --- */
.pm-designer-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 35% 30%,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.92) 35%,
			rgba(240, 240, 244, 0.95) 70%,
			rgba(220, 220, 226, 0.98) 100%
		);
	border: 0.5px solid rgba(0, 0, 0, 0.18);
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.2),
		0 1px 2px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	margin-top: -7px;
	cursor: grab;
	transition: transform 100ms ease;
}

.pm-designer-slider::-webkit-slider-thumb:active {
	cursor: grabbing;
	transform: scale(1.12);
}

/* --- Firefox track --- */
.pm-designer-slider::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background:
		linear-gradient(
			to right,
			var(--pm-color-accent) 0,
			var(--pm-color-accent) var(--pm-slider-value, 0%),
			rgba(10, 10, 10, 0.08) var(--pm-slider-value, 0%),
			rgba(10, 10, 10, 0.08) 100%
		);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.12),
		inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

/* --- Firefox thumb --- */
.pm-designer-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 35% 30%,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.92) 35%,
			rgba(240, 240, 244, 0.95) 70%,
			rgba(220, 220, 226, 0.98) 100%
		);
	border: 0.5px solid rgba(0, 0, 0, 0.18);
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.2),
		0 1px 2px rgba(0, 0, 0, 0.08);
	cursor: grab;
	transition: transform 100ms ease;
}

.pm-designer-slider::-moz-range-thumb:active {
	cursor: grabbing;
	transform: scale(1.12);
}

/* "Text Shape — Coming soon" disabled row. Visual greyed-out state with
   tooltip on hover so the affordance is discoverable but doesn't lead
   anywhere yet. Curved-text needs IText → path-text conversion which is
   non-trivial and deferred per §17. */
.pm-designer-edit-text__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--pm-color-border);
}

.pm-designer-edit-text__row-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-ink);
}

.pm-designer-edit-text__row-value {
	font-size: 13px;
	color: var(--pm-color-muted);
}

.pm-designer-edit-text__row--disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pm-designer-edit-text__row--disabled .pm-designer-edit-text__row-label,
.pm-designer-edit-text__row--disabled .pm-designer-edit-text__row-value {
	color: var(--pm-color-disabled);
}

.pm-designer-action,
.pm-designer-action:hover,
.pm-designer-action:focus,
.pm-designer-action:active {
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 0;
	font-family: inherit;
}

.pm-designer-action {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	border-radius: var(--pm-radius-md);
	cursor: pointer;
	transition: background-color 120ms ease;
	appearance: none;
}

.pm-designer-action__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--pm-color-muted);
}

.pm-designer-action__label {
	flex: 1 1 auto;
}

.pm-designer-action__chev {
	font-size: 22px;
	line-height: 1;
	color: var(--pm-color-muted);
}

.pm-designer-action:hover {
	background: var(--pm-color-border);
}

.pm-designer-action:focus {
	outline: 0;
}

.pm-designer-action:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

.pm-designer-action[disabled],
.pm-designer-action[disabled]:hover {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-placeholder);
	cursor: not-allowed;
}

.pm-designer-action[disabled] .pm-designer-action__icon,
.pm-designer-action[disabled] .pm-designer-action__chev {
	color: var(--pm-color-placeholder);
}

/* ============================================================
   Quantity view — layout swap driven by data-pm-view on dialog
   ============================================================ */

/*
 * View switching uses a single attribute on the dialog: [data-pm-view].
 * The same workspace DOM is reused; CSS hides the toolbar / right panel /
 * side tabs and reveals the sizes panel when view = "quantity". The fabric
 * canvas itself stays mounted exactly where it is, so design state survives
 * the round-trip with zero serialization.
 */

.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-sizes,
.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-summary,
.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-modal__footer--quantity,
.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-modal__footer--summary,
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-tools,
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-panel,
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-summary,
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-modal__footer--design,
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-modal__footer--summary,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-tools,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-panel,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-sizes,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-modal__footer--design,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-modal__footer--quantity {
	display: none;
}

.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-workspace,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-workspace {
	grid-template-columns: 1fr 460px;
}

/* Lock cursor + selection visuals while the preview is read-only. */
.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-stage__frame,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-stage__frame {
	cursor: default;
}

.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-stage__frame .upper-canvas,
.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-stage__frame .upper-canvas {
	pointer-events: none;
}

/* ---------- sizes panel ---------- */

.pm-designer-sizes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 22px;
	background: var(--pm-color-surface);
	border-left: 1px solid var(--pm-color-border);
	overflow-y: auto;
}

.pm-designer-sizes__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-designer-sizes__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-sizes__counter {
	font-size: 13px;
	color: var(--pm-color-muted);
}

.pm-designer-sizes__counter strong {
	margin-left: 4px;
	color: var(--pm-color-ink);
	font-weight: 700;
}

.pm-designer-sizes__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-size {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}

.pm-designer-size__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--pm-color-ink);
	letter-spacing: 0.02em;
}

.pm-designer-stepper {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: stretch;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	overflow: hidden;
	background: var(--pm-color-surface);
}

.pm-designer-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 0;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.pm-designer-stepper__btn:hover,
.pm-designer-stepper__btn:focus-visible {
	background: var(--pm-color-border);
	outline: 0;
}

.pm-designer-stepper__btn[disabled],
.pm-designer-stepper__btn[disabled]:hover {
	color: var(--pm-color-placeholder);
	background: var(--pm-color-input-bg);
	cursor: not-allowed;
}

.pm-designer-stepper__input {
	width: 100%;
	height: 36px;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 0;
	border-left: 1px solid var(--pm-color-border);
	border-right: 1px solid var(--pm-color-border);
	appearance: textfield;
	-moz-appearance: textfield;
}

.pm-designer-stepper__input::-webkit-outer-spin-button,
.pm-designer-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pm-designer-stepper__input:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: -2px;
}

.pm-designer-sizes__moq {
	margin: 4px 0 0;
	padding: 10px 12px;
	font-size: 12px;
	color: var(--pm-color-danger);
	background: var(--pm-color-danger-soft);
	border: 1px solid var(--pm-color-danger);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-sizes__moq[hidden] {
	display: none;
}

/* ============================================================
   Summary panel (data-pm-view="summary")
   ============================================================ */

.pm-designer-summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
	background: var(--pm-color-surface);
	border-left: 1px solid var(--pm-color-border);
	overflow-y: auto;
}

.pm-designer-summary__header {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-designer-summary__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-summary__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--pm-color-muted);
	line-height: 1.4;
}

.pm-designer-summary__loading {
	padding: 16px 0;
	font-size: 13px;
	color: var(--pm-color-muted);
	text-align: center;
}

.pm-designer-summary__loading[hidden] {
	display: none;
}

.pm-designer-summary__error {
	padding: 10px 12px;
	font-size: 12px;
	color: var(--pm-color-danger);
	background: var(--pm-color-danger-soft);
	border: 1px solid var(--pm-color-danger);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-summary__error[hidden] {
	display: none;
}

.pm-designer-summary__body[hidden] {
	display: none;
}

.pm-designer-summary__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: 13px;
	color: var(--pm-color-ink);
}

.pm-designer-summary__line {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--pm-color-border);
}

.pm-designer-summary__line:last-child {
	border-bottom: 0;
}

.pm-designer-summary__line-label {
	color: var(--pm-color-muted);
}

.pm-designer-summary__line-value {
	color: var(--pm-color-ink);
	font-weight: 600;
	text-align: right;
}

.pm-designer-summary__totals {
	margin: 4px 0 0;
	padding: 12px 0 0;
	border-top: 2px solid var(--pm-color-ink);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.pm-designer-summary__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	margin: 0;
}

.pm-designer-summary__row dt {
	margin: 0;
	color: var(--pm-color-muted);
	font-weight: 500;
}

.pm-designer-summary__row dd {
	margin: 0;
	color: var(--pm-color-ink);
	font-weight: 700;
	text-align: right;
}

.pm-designer-summary__row--total dt,
.pm-designer-summary__row--total dd {
	font-size: 16px;
}

.pm-designer-summary__upsell {
	margin-top: 8px;
	padding: 12px 14px;
	background: var(--pm-color-surface-soft);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-summary__upsell[hidden] {
	display: none;
}

.pm-designer-summary__upsell-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-summary__upsell-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--pm-color-muted);
}

/* ---------- footer / bottom action bar ---------- */

.pm-designer-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 24px;
	border-top: 1px solid var(--pm-color-border);
	background: var(--pm-color-surface);
}

.pm-designer-modal__footer-left,
.pm-designer-modal__footer-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Day-5 save indicator next to the SAVE DESIGN button. Inline subtle copy —
   "Saved 12s ago" / "Saving…" / "Save failed". Hidden until first save. */
.pm-designer-modal__save-status {
	font-size: 12px;
	color: var(--pm-color-muted);
	font-weight: 500;
	font-family: var(--pm-font-sans);
	white-space: nowrap;
}

.pm-designer-modal__save-status--error {
	color: var(--pm-color-danger);
}

.pm-designer-modal__product-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pm-color-ink);
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
   Color thumbnail strip — design-view footer
   Click any thumb to preview the design on that color. Mirrors the
   bottom-left strip in sew-nc's designer.
   ============================================================ */

/* QA round 6 (2026-06-04) — wrapper holds prev/next arrows on either
   side of the scrolling strip. Arrows visible on desktop; mobile block
   at end of file hides them. */
.pm-designer-modal__color-strip-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pm-designer-modal__color-strip {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Hard cap at 3 × 40 px thumbs + 2 × 6 px gaps = 132 px so the strip
	   can't push NEXT STEP off the footer's right edge once it overflows.
	   QA round 7 (2026-06-04): use `max-width` only (no fixed `width`) so
	   the strip hugs its content when there's only 1-2 thumbs — no empty
	   gap between the thumb and the + COLORS button. */
	max-width: 132px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.pm-designer-modal__color-strip::-webkit-scrollbar {
	display: none;
}

.pm-designer-modal__color-strip-wrap:has(.pm-designer-modal__color-strip:empty) {
	display: none;
}

/* Fallback for browsers without :has() (older Safari, Firefox < 121).
   The wrap stays visible with empty arrows — acceptable degradation,
   the colors-popover modal is still reachable via the + COLORS button. */
.pm-designer-modal__color-strip:empty {
	display: none;
}

.pm-designer-modal__color-strip-arrow {
	flex: 0 0 auto;
	width: 22px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-ink);
	cursor: pointer;
	appearance: none;
	transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.pm-designer-modal__color-strip-arrow:hover {
	background: var(--pm-color-input-bg);
}

.pm-designer-modal__color-strip-arrow[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.pm-designer-modal__color-thumb {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--pm-color-input-bg);
	border: 2px solid transparent;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	transition: border-color 120ms ease;
}

.pm-designer-modal__color-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.pm-designer-modal__color-thumb-fill {
	display: block;
	width: 70%;
	height: 70%;
	border-radius: 2px;
}

.pm-designer-modal__color-thumb:hover {
	border-color: var(--pm-color-border);
}

.pm-designer-modal__color-thumb:focus-visible {
	outline: 0;
	border-color: var(--pm-color-accent);
}

.pm-designer-modal__color-thumb--active,
.pm-designer-modal__color-thumb--active:hover {
	border-color: var(--pm-color-accent);
}

@media (max-width: 600px) {
	.pm-designer-modal__color-strip {
		max-width: 160px;
		gap: 4px;
	}
	.pm-designer-modal__color-thumb {
		width: 32px;
		height: 32px;
	}
}

.pm-designer-modal__btn {
	min-height: 40px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--pm-radius-md);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
	appearance: none;
}

.pm-designer-modal__btn--ghost {
	color: var(--pm-color-ink);
	background: transparent;
	border: 1px solid var(--pm-color-border);
}

.pm-designer-modal__btn--ghost:hover,
.pm-designer-modal__btn--ghost:focus-visible {
	background: var(--pm-color-input-bg);
	outline: 0;
}

.pm-designer-modal__btn--primary,
.pm-designer-modal__btn--primary:hover,
.pm-designer-modal__btn--primary:focus,
.pm-designer-modal__btn--primary:active {
	color: var(--pm-color-surface);
}

.pm-designer-modal__btn--primary {
	background: var(--pm-color-ink);
	border: 0;
}

.pm-designer-modal__btn--primary:hover {
	background: var(--pm-color-ink-hover);
}

.pm-designer-modal__btn[disabled],
.pm-designer-modal__btn[disabled]:hover {
	background: var(--pm-color-disabled);
	color: var(--pm-color-surface);
	border: 0;
	cursor: not-allowed;
}

/* Lock body scroll when the modal is open. JS toggles this class on <html>. */
.pm-designer-locked,
.pm-designer-locked body {
	overflow: hidden;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
	.pm-designer-workspace {
		grid-template-columns: 80px 1fr;
		grid-template-rows: 1fr auto;
	}
	.pm-designer-panel {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--pm-color-border);
		flex-direction: row;
		flex-wrap: wrap;
		padding: 12px 16px;
	}
	.pm-designer-panel__title,
	.pm-designer-panel__hint {
		flex: 1 1 100%;
	}
	.pm-designer-action {
		flex: 1 1 0;
		min-width: 140px;
	}
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-workspace,
	.pm-designer-modal__dialog[data-pm-view="summary"] .pm-designer-workspace {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(220px, 1fr) auto;
	}
	.pm-designer-sizes,
	.pm-designer-summary {
		border-left: 0;
		border-top: 1px solid var(--pm-color-border);
	}
}

@media (max-width: 600px) {
	.pm-designer-modal__header,
	.pm-designer-modal__footer {
		padding: 8px 14px;
	}
	.pm-designer-modal__header {
		gap: 8px;
		min-height: 56px;
	}
	/* Phase-1 inspector pivot — drop the "Back to Products" word on small phones so
	   the centered logo always has room. The chevron icon alone still reads as back. */
	.pm-designer-modal__back span {
		display: none;
	}
	.pm-designer-modal__brand-logo {
		max-height: 36px;
		max-width: 140px;
	}
	.pm-designer-modal__cart {
		width: 36px;
		height: 36px;
	}
	.pm-designer-workspace {
		grid-template-columns: 64px 1fr;
	}
	.pm-designer-tools {
		padding: 10px 6px;
		gap: 6px;
	}
	.pm-designer-tool {
		font-size: 9px;
		padding: 8px 4px;
	}
	.pm-designer-tool svg {
		width: 18px;
		height: 18px;
	}
	.pm-designer-stage-wrap {
		padding: 14px;
	}
	.pm-designer-modal__footer {
		flex-wrap: wrap;
		gap: 10px;
	}
	.pm-designer-modal__product-name {
		max-width: 140px;
		font-size: 13px;
	}
	.pm-designer-modal__btn {
		min-height: 44px; /* Apple/Material touch target floor (Day 10). */
		padding: 0 14px;
		font-size: 12px;
	}
}

/* Mobile-only elements are hidden by default; revealed inside the ≤768
   block (which now lives at the END of this stylesheet so it overrides
   any source-order ties with the desktop popover / panel rules). */
.pm-designer-mobile-rail,
.pm-designer-mobile-context,
.pm-designer-mobile-scrim,
.pm-designer-panel__grabber,
.pm-designer-panel__close,
.pm-designer-modal__header-title {
	display: none;
}

/* ============================================================
   Day 10 — global a11y: focus-visible, reduced-motion, color-strip
   thumbs touch sizing. CSS-only — no JS changes.
   ============================================================ */

/* Keyboard focus ring on every interactive surface inside the modal.
   Uses focus-visible so mouse clicks don't leave a lingering halo, but
   keyboard tabs / arrow nav reveal a clear blue outline. Falls back to
   :focus on browsers without :focus-visible (older Safari). */
.pm-designer-modal :focus-visible {
	outline: 3px solid var(--pm-color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

@supports not selector(:focus-visible) {
	.pm-designer-modal :focus {
		outline: 3px solid var(--pm-color-accent);
		outline-offset: 2px;
	}
}

/* Honor prefers-reduced-motion — the print-area overlay transition + any
   future animated UI shouldn't churn for users who opt out. */
@media (prefers-reduced-motion: reduce) {
	.pm-designer-print-area,
	.pm-designer-art-popover__item,
	.pm-designer-saved-popover__item,
	.pm-designer-modal__btn {
		transition: none !important;
	}
}

/* Color strip thumbs (design-view footer) — guarantee 44 px tap target.
   Without this, a 36 × 36 thumb is easy to miss-tap on mobile. */
.pm-designer-modal__color-thumb {
	min-width: 44px;
	min-height: 44px;
}

/* ============================================================
   QA 2026-05-30 mobile pass — fixes for Day-10 class-name mismatch
   (sides were `.pm-designer-side`, not `.pm-designer-side-tab`),
   plus comprehensive 480 px stacking for the three view footers.
   ============================================================ */

@media (max-width: 600px) {
	/* Side tabs — horizontally scrollable below 600 px so the four tab
	   labels are never cut off. (Earlier Day-10 rule used the wrong
	   class name `.pm-designer-side-tab` and silently no-op'd.) */
	.pm-designer-sides {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		align-self: stretch;
		scrollbar-width: thin;
		padding: 4px 6px;
	}
	.pm-designer-side {
		flex: 0 0 auto;
		min-height: 40px;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	/* Sizes panel header — keep title + counter on one row, allow the
	   counter to wrap to its own row before truncating. */
	.pm-designer-sizes__header {
		flex-wrap: wrap;
		gap: 4px 12px;
	}
	.pm-designer-sizes__title {
		font-size: 15px;
		flex: 1 1 auto;
		min-width: 0;
	}
	.pm-designer-sizes__counter {
		font-size: 12px;
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Sizes panel itself — less padding on phones */
	.pm-designer-sizes,
	.pm-designer-summary {
		padding: 14px 12px;
	}

	/* DESIGN-VIEW FOOTER on phones — stack to two rows:
	   row 1 = product + colors strip + COLORS button (wraps)
	   row 2 = saved status + SAVE DESIGN + NEXT STEP */
	.pm-designer-modal__footer--design {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px 12px;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__footer-left,
	.pm-designer-modal__footer--design .pm-designer-modal__footer-right {
		width: 100%;
		gap: 8px;
		flex-wrap: wrap;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__product-name {
		flex: 1 1 100%;
		font-size: 12px;
		max-width: none;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__color-strip {
		flex: 0 0 auto;
		max-width: calc(100% - 100px);
		overflow-x: auto;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__btn {
		min-height: 44px;
		font-size: 12px;
		padding: 0 12px;
		flex: 1 1 auto;
		min-width: 0;
	}
	.pm-designer-modal__save-status {
		flex: 1 1 100%;
		font-size: 11px;
		text-align: center;
	}

	/* QUANTITY-VIEW FOOTER on phones — three small buttons row 1, full-width
	   GET PRICE row 2 so the primary CTA is unmissable. */
	.pm-designer-modal__footer--quantity {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px 12px;
	}
	.pm-designer-modal__footer--quantity .pm-designer-modal__footer-left {
		display: flex;
		gap: 6px;
		justify-content: space-between;
		width: 100%;
	}
	.pm-designer-modal__footer--quantity .pm-designer-modal__footer-left .pm-designer-modal__btn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 44px;
		font-size: 11px;
		padding: 0 6px;
	}
	.pm-designer-modal__footer--quantity .pm-designer-modal__footer-right {
		width: 100%;
	}
	.pm-designer-modal__footer--quantity .pm-designer-modal__footer-right .pm-designer-modal__btn {
		width: 100%;
		min-height: 48px;
		font-size: 14px;
	}

	/* SUMMARY-VIEW FOOTER on phones — same pattern as quantity. */
	.pm-designer-modal__footer--summary {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 10px 12px;
	}
	.pm-designer-modal__footer--summary .pm-designer-modal__footer-left {
		display: flex;
		gap: 6px;
		width: 100%;
	}
	.pm-designer-modal__footer--summary .pm-designer-modal__footer-left .pm-designer-modal__btn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 44px;
		font-size: 11px;
		padding: 0 6px;
	}
	.pm-designer-modal__footer--summary .pm-designer-modal__footer-right {
		width: 100%;
	}
	.pm-designer-modal__footer--summary .pm-designer-modal__footer-right .pm-designer-modal__btn {
		width: 100%;
		min-height: 48px;
		font-size: 14px;
	}

	/* SUMMARY view hero — total card text-size guard against $999.99 overflow */
	.pm-designer-summary__hero {
		flex-wrap: wrap;
	}
	.pm-designer-summary__hero-total,
	.pm-designer-summary__total {
		font-size: clamp(20px, 7vw, 32px);
		word-break: break-all;
	}

	/* SUMMARY color breakdown card — collapse thumb + info to thinner widths */
	.pm-designer-summary__color {
		grid-template-columns: 48px 1fr;
		gap: 8px;
	}
	.pm-designer-summary__color-thumb {
		width: 48px;
		height: 60px;
	}
	.pm-designer-summary__color-head {
		flex-wrap: wrap;
		gap: 4px;
	}
}

/* (The .pm-designer-obj-toolbar block — ~150 lines — was deleted in Phase 4
   2026-06-03 alongside the JS handlers and the modal.php markup. Its
   functions now live in the inspector: edit-text view owns font + color +
   spacing/size/outline; layers-view ACTIONS row owns flip/center/copy/paste/
   delete; layer-row drag-reorder replaces bring-forward / send-backward.) */

/* ============================================================
   "+ COLORS" button badge — shows selected-color count
   ============================================================ */

.pm-designer-modal__btn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--pm-color-surface);
	background: var(--pm-color-accent);
	border-radius: 9px;
}

.pm-designer-modal__btn-badge[hidden] {
	display: none;
}

/* ============================================================
   Add Art popover (Day 6) — clip-art picker. Mounted inside the
   dialog absolute-positioned so it overlays the workspace without
   leaving the modal context (Esc behaviour, focus trap).
   ============================================================ */

.pm-designer-art-popover {
	position: absolute;
	top: 64px;
	right: 16px;
	z-index: 5;
	width: min(380px, calc(100% - 32px));
	max-height: calc(100% - 96px);
	display: flex;
	flex-direction: column;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-md);
	box-shadow: var(--pm-shadow-md);
	overflow: hidden;
}

.pm-designer-art-popover[hidden] {
	display: none;
}

.pm-designer-art-popover__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-designer-art-popover__title {
	margin: 0;
	font-family: var(--pm-font-sans);
	font-size: 14px;
	font-weight: 700;
	color: var(--pm-color-ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pm-designer-art-popover__close {
	background: transparent;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--pm-color-muted);
	cursor: pointer;
	padding: 0 4px;
}

.pm-designer-art-popover__close:hover,
.pm-designer-art-popover__close:focus-visible {
	color: var(--pm-color-ink);
}

.pm-designer-art-popover__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	padding: 16px;
	overflow-y: auto;
}

.pm-designer-art-popover__item {
	background: var(--pm-color-input-bg);
	border: 1px solid transparent;
	border-radius: var(--pm-radius-sm);
	padding: 10px;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
}

.pm-designer-art-popover__item:hover,
.pm-designer-art-popover__item:focus-visible {
	border-color: var(--pm-color-ink);
	background: var(--pm-color-surface);
}

.pm-designer-art-popover__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* My Saved Art panel reuses the popover shell + header but shows a vertical
   list of cards (thumbnail + name + saved-when), not a square grid. */
.pm-designer-saved-popover__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	overflow-y: auto;
}

.pm-designer-saved-popover__empty {
	padding: 24px 12px;
	text-align: center;
	font-family: var(--pm-font-sans);
	font-size: 13px;
	color: var(--pm-color-muted);
}

.pm-designer-saved-popover__empty--error {
	color: var(--pm-color-danger);
}

.pm-designer-saved-popover__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: center;
	padding: 8px;
	background: var(--pm-color-input-bg);
	border: 1px solid transparent;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.pm-designer-saved-popover__item:hover,
.pm-designer-saved-popover__item:focus-visible {
	border-color: var(--pm-color-ink);
	background: var(--pm-color-surface);
}

.pm-designer-saved-popover__item--active {
	border-color: var(--pm-color-accent);
	background: var(--pm-color-surface);
}

.pm-designer-saved-popover__thumb {
	width: 56px;
	height: 70px;
	background: var(--pm-color-surface);
	border: var(--pm-thumb-frame-border);
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-thumb-frame-shadow);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pm-designer-saved-popover__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pm-designer-saved-popover__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pm-designer-saved-popover__name {
	font-family: var(--pm-font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-designer-saved-popover__when {
	font-family: var(--pm-font-sans);
	font-size: 11px;
	color: var(--pm-color-muted);
}

/* ============================================================
   Colors popover (modal-within-modal)
   ============================================================ */

.pm-designer-colors-popover {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pm-designer-colors-popover[hidden] {
	display: none;
}

.pm-designer-colors-popover__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

.pm-designer-colors-popover__panel {
	position: relative;
	width: min(520px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 22px;
	background: var(--pm-color-surface);
	border-radius: var(--pm-radius-md);
	box-shadow: var(--pm-shadow-md);
	overflow: hidden;
}

.pm-designer-colors-popover__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pm-designer-colors-popover__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pm-color-ink);
}

.pm-designer-colors-popover__close {
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--pm-color-muted);
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
}

.pm-designer-colors-popover__close:hover,
.pm-designer-colors-popover__close:focus-visible {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-ink);
	outline: 0;
}

.pm-designer-colors-popover__hint {
	margin: 0;
	font-size: 12px;
	color: var(--pm-color-muted);
	line-height: 1.4;
}

.pm-designer-colors-popover__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 10px;
	overflow-y: auto;
	padding: 4px 2px;
}

.pm-designer-colors-popover__swatch {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	appearance: none;
}

.pm-designer-colors-popover__swatch-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	transition: transform 80ms ease, box-shadow 80ms ease;
}

.pm-designer-colors-popover__swatch--light .pm-designer-colors-popover__swatch-fill {
	box-shadow: inset 0 0 0 1px var(--pm-color-border);
}

.pm-designer-colors-popover__swatch:hover .pm-designer-colors-popover__swatch-fill {
	transform: scale(1.08);
}

.pm-designer-colors-popover__swatch:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
	border-radius: 50%;
}

.pm-designer-colors-popover__swatch--selected .pm-designer-colors-popover__swatch-fill {
	box-shadow:
		inset 0 0 0 2px var(--pm-color-surface),
		0 0 0 2px var(--pm-color-accent);
}

.pm-designer-colors-popover__swatch-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-color-surface);
	pointer-events: none;
	opacity: 0;
}

.pm-designer-colors-popover__swatch--light .pm-designer-colors-popover__swatch-check {
	color: var(--pm-color-ink);
}

.pm-designer-colors-popover__swatch--selected .pm-designer-colors-popover__swatch-check {
	opacity: 1;
}

/* ============================================================
   Per-color cards in the Quantity view
   ============================================================ */

.pm-designer-sizes__head-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pm-designer-sizes__subtitle {
	margin: 0;
	font-size: 12px;
	color: var(--pm-color-muted);
	line-height: 1.4;
}

.pm-designer-sizes__moq--info {
	color: #5a4400;
	background: #fcf4e3;
	border: 1px solid #dba617;
}

.pm-designer-sizes__moq--info strong {
	font-weight: 700;
}

.pm-designer-color-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-md);
	box-shadow: var(--pm-shadow-sm);
}

.pm-designer-color-card__head {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-designer-color-card__thumb {
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--pm-color-input-bg);
	border: var(--pm-thumb-frame-border);
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-thumb-frame-shadow);
}

.pm-designer-color-card__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pm-designer-color-card__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--pm-color-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* QA round 13 (2026-06-04) — product name + big preview added to card
   markup for the mobile sew-nc layout. Hidden on desktop, which keeps
   its compact head (small thumb + color name + remove). */
.pm-designer-color-card__product,
.pm-designer-color-card__preview {
	display: none;
}

.pm-designer-color-card__items {
	font-size: 12px;
	color: var(--pm-color-muted);
}

.pm-designer-color-card__items strong {
	color: var(--pm-color-ink);
	font-weight: 700;
	margin-right: 2px;
}

.pm-designer-color-card__remove {
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: var(--pm-color-muted);
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius-sm);
	cursor: pointer;
}

.pm-designer-color-card__remove:hover,
.pm-designer-color-card__remove:focus-visible {
	background: var(--pm-color-input-bg);
	color: var(--pm-color-danger);
	outline: 0;
}

.pm-designer-color-card__remove[disabled],
.pm-designer-color-card__remove[disabled]:hover {
	color: var(--pm-color-placeholder);
	background: transparent;
	cursor: not-allowed;
}

.pm-designer-color-card__sizes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 14px;
}

@media (max-width: 600px) {
	.pm-designer-color-card__sizes {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Restructured Summary panel
   ============================================================ */

.pm-designer-summary__hero {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	border-radius: var(--pm-radius-md);
}

.pm-designer-summary__hero-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.pm-designer-summary__hero-key {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pm-color-placeholder);
}

.pm-designer-summary__hero-pieces {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: 14px;
	color: var(--pm-color-surface);
}

.pm-designer-summary__hero-pieces strong {
	font-size: 22px;
	font-weight: 700;
}

.pm-designer-summary__hero-each {
	font-size: 13px;
	color: var(--pm-color-placeholder);
}

.pm-designer-summary__hero-each span {
	color: var(--pm-color-surface);
	font-weight: 600;
}

.pm-designer-summary__hero-total {
	font-size: 22px;
	font-weight: 700;
	color: var(--pm-color-surface);
}

.pm-designer-summary__breakdown {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pm-designer-summary__color {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: stretch;
	padding: 10px 12px;
	background: var(--pm-color-surface-soft);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

/* Per-color preview thumbnail. Initial src is the variant front photo
   (instant render); JS swaps to a shirt+design composite as soon as the
   offscreen canvas resolves. */
.pm-designer-summary__color-thumb {
	width: 64px;
	height: 80px;
	background: var(--pm-color-surface);
	border: var(--pm-thumb-frame-border);
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-thumb-frame-shadow);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pm-designer-summary__color-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pm-designer-summary__color-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pm-designer-summary__color-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-summary__color-subtotal {
	color: var(--pm-color-ink);
	font-weight: 700;
}

.pm-designer-summary__color-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	color: var(--pm-color-muted);
}

.pm-designer-summary__color-line {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
}

.pm-designer-summary__sides {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var(--pm-color-surface-soft);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-summary__sides[hidden] {
	display: none;
}

.pm-designer-summary__sides-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-designer-summary__sides-hint {
	margin: 0;
	font-size: 11px;
	color: var(--pm-color-muted);
	line-height: 1.4;
}

.pm-designer-summary__sides-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-designer-summary__side {
	display: grid;
	grid-template-columns: 1fr 120px auto;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--pm-color-ink);
}

.pm-designer-summary__side-label {
	font-weight: 600;
}

.pm-designer-summary__side-select {
	width: 100%;
	min-height: 32px;
	padding: 0 8px;
	font-family: inherit;
	font-size: 12px;
	color: var(--pm-color-ink);
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-summary__side-charge {
	font-weight: 600;
	color: var(--pm-color-muted);
	text-align: right;
}

/* Read-only side surcharges (picker hidden for MVP — Full Color is the
   default for any side with design content). */
.pm-designer-summary__side-charges {
	list-style: none;
	margin: 0;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--pm-color-muted);
	background: var(--pm-color-surface-soft);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-designer-summary__side-charges[hidden] {
	display: none;
}

.pm-designer-summary__side-charge-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
}

.pm-designer-summary__side-charge-row span:last-child {
	color: var(--pm-color-ink);
	font-weight: 600;
}

/* ============================================================
   Phase 8 — mobile re-layout (≤ 768 px). 2026-06-03.

   IMPORTANT — this block lives at the END of the stylesheet so its rules
   win source-order tiebreakers against the desktop popover / panel /
   workspace styles defined above. The earlier QA1 fix moved this block
   here from line 2514 (where existing rules like `.pm-designer-art-popover
   { width: min(380px) }` were winning ties and breaking the mobile
   bottom-sheet positioning).

   Architecture: canvas hero (full stage width), floating rounded-pill rails
   overlaying canvas corners (NOT in a separate gutter), side chips below,
   contextual area (action bar / contextual toolbar swap), compact footer.
   Sub-flows open as bottom sheets capped at 65vh — never push canvas off
   screen. Sheets layer above the floating rails; JS toggles
   data-pm-sheet-open on the dialog so rails hide cleanly while a sheet
   is open (prevents the rail-on-top-of-sheet z-index bug seen on iPhone).
   ============================================================ */

@media (max-width: 768px) {

	/* Defensive — prevents any single overflowing child from causing a
	   page-wide horizontal scroll (the iPhone 13 Pro 'everything pushed
	   to the right' symptom was driven by side-tabs + footer being wider
	   than the workspace's single 1fr column). */
	.pm-designer-modal__dialog {
		overflow-x: hidden;
	}

	/* ----- HEADER (compact) ----- */
	.pm-designer-modal__header {
		min-height: 48px;
		padding: 6px 10px;
		gap: 6px;
	}
	.pm-designer-modal__back span { display: none; }
	.pm-designer-modal__back {
		width: 34px;
		height: 34px;
		padding: 0;
		justify-content: center;
		border: 1px solid var(--pm-color-border);
		border-radius: 11px;
	}
	/* QA round 5 (2026-06-04) — center brand logo at mobile, drop the
	   product-name title block entirely. Client direction: "Logo in
	   center" + "Remove product name". Header-title stays hidden via the
	   default rule above; logo sits alone in header-center and centers
	   naturally via the desktop grid's `justify-self: center`. */
	.pm-designer-modal__brand {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}
	.pm-designer-modal__brand-logo {
		max-height: 32px;
		max-width: 120px;
		width: auto;
		height: auto;
	}
	.pm-designer-modal__cart {
		width: 34px;
		height: 34px;
		border: 1px solid var(--pm-color-border);
		border-radius: 11px;
	}

	/* ----- WORKSPACE → SINGLE COLUMN (design view only) ----- */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-workspace {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
		min-width: 0;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-tools  { display: none; }
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel  { display: none; }

	/* ----- STAGE (canvas full width — rails overlay corners) ----- */
	.pm-designer-stage-wrap {
		padding: 8px 8px 0;
		gap: 6px;
		min-width: 0;
	}
	.pm-designer-stage {
		padding: 0; /* QA fix 2026-06-03: no padding — rails overlay over canvas, not in a gutter */
		min-width: 0;
	}

	/* ----- FLOATING TOOL RAILS — over canvas corners, mockup style -----
	   QA round 5 (2026-06-04): rails sit ~20% down the stage instead of
	   pinned to the top — keeps them off the shirt's collar/shoulder
	   line, closer to the chest where the customer's eye lands. */
	.pm-designer-mobile-rail {
		display: flex;
		flex-direction: column;
		gap: 6px;
		position: absolute;
		top: 20%;
		z-index: 6;
		pointer-events: auto;
	}
	.pm-designer-mobile-rail--left  { left: 8px; }
	.pm-designer-mobile-rail--right { right: 8px; }
	.pm-designer-mobile-pill {
		width: 34px;
		height: 34px;
		border-radius: 11px;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		border: 1px solid var(--pm-color-border);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--pm-color-ink);
		box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.18);
		cursor: pointer;
		appearance: none;
		padding: 0;
	}
	.pm-designer-mobile-pill svg {
		width: 16px;
		height: 16px;
		color: var(--pm-color-ink);
	}
	.pm-designer-mobile-pill[disabled] {
		color: var(--pm-color-placeholder);
		cursor: not-allowed;
		box-shadow: none;
		opacity: 0.65;
	}
	.pm-designer-mobile-pill[disabled] svg { color: var(--pm-color-placeholder); }
	.pm-designer-mobile-pill[aria-pressed="true"] {
		background: var(--pm-color-ink);
		color: var(--pm-color-surface);
		border-color: var(--pm-color-ink);
	}
	.pm-designer-mobile-pill[aria-pressed="true"] svg { color: var(--pm-color-surface); }

	/* Hide rails while a sheet is open — JS sets data-pm-sheet-open on the
	   dialog when any sheet opens. Cleaner than fighting z-index across
	   stacking contexts. */
	.pm-designer-modal__dialog[data-pm-sheet-open="true"] .pm-designer-mobile-rail {
		display: none;
	}

	/* ----- SIDE CHIPS ----- */
	.pm-designer-sides {
		overflow-x: auto;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 4px 10px;
		min-width: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pm-designer-sides::-webkit-scrollbar { display: none; }
	.pm-designer-side {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 6px 14px;
		font-size: 12px;
	}

	/* ----- MOBILE CONTEXTUAL AREA ----- */
	.pm-designer-mobile-context {
		display: block;
		flex: 0 0 auto;
		border-top: 1px solid var(--pm-color-border);
		background: var(--pm-color-surface);
		min-width: 0;
	}
	.pm-designer-mobile-actions { display: flex; min-width: 0; }
	.pm-designer-mobile-context[data-pm-mode="contextual"] .pm-designer-mobile-actions { display: none; }
	.pm-designer-mobile-act {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 52px;
		padding: 8px 4px;
		background: transparent;
		border: 0;
		color: var(--pm-color-ink-soft, var(--pm-color-ink));
		font-family: inherit;
		font-size: 10.5px;
		font-weight: 600;
		cursor: pointer;
		appearance: none;
	}
	.pm-designer-mobile-act svg { width: 20px; height: 20px; }

	.pm-designer-mobile-toolbar {
		display: none;
		padding: 8px 10px 10px;
		gap: 8px;
		flex-direction: column;
	}
	.pm-designer-mobile-context[data-pm-mode="contextual"] .pm-designer-mobile-toolbar { display: flex; }
	.pm-designer-mobile-toolbar__row {
		display: flex;
		align-items: center;
		gap: 6px;
		min-width: 0;
	}
	.pm-designer-mobile-toolbar__btn {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		height: 36px;
		padding: 0 10px;
		background: var(--pm-color-surface);
		border: 1px solid var(--pm-color-border);
		border-radius: 10px;
		font-family: inherit;
		font-size: 12.5px;
		font-weight: 600;
		color: var(--pm-color-ink);
		cursor: pointer;
		appearance: none;
	}
	.pm-designer-mobile-toolbar__btn-label {
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.pm-designer-mobile-toolbar__more,
	.pm-designer-mobile-toolbar__delete {
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--pm-color-surface);
		border: 1px solid var(--pm-color-border);
		border-radius: 10px;
		color: var(--pm-color-ink);
		cursor: pointer;
		appearance: none;
		padding: 0;
	}
	.pm-designer-mobile-toolbar__delete {
		color: var(--pm-color-danger);
		border-color: #f3d3d3;
		background: var(--pm-color-danger-soft);
	}
	.pm-designer-mobile-toolbar__colors {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		min-width: 0;
	}
	.pm-designer-mobile-toolbar__colors::-webkit-scrollbar { display: none; }
	.pm-designer-mobile-toolbar .pm-designer-color-swatch {
		flex: 0 0 auto;
		width: 26px;
		height: 26px;
	}
	.pm-designer-mobile-toolbar [data-pm-mobile-show-for] { display: none; }
	.pm-designer-mobile-toolbar[data-pm-active-type="text"]  [data-pm-mobile-show-for~="text"],
	.pm-designer-mobile-toolbar[data-pm-active-type="image"] [data-pm-mobile-show-for~="image"],
	.pm-designer-mobile-toolbar[data-pm-active-type="art"]   [data-pm-mobile-show-for~="art"] {
		display: flex;
	}

	/* ----- INSPECTOR PANEL AS BOTTOM SHEET ----- */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100vw;
		max-width: none;
		max-height: 65vh;
		flex-direction: column;
		/* QA round 11 (2026-06-04) — explicit `flex-wrap: nowrap`. CLIENT
		   DIAGNOSED VIA DEVTOOLS: the panel was inheriting `flex-wrap: wrap`
		   from Storefront's reset, which in a column flex with enough
		   children to overflow vertically creates ADDITIONAL COLUMNS,
		   shrinking each child to fit. That's what produced the symmetric
		   gap on both sides of the Edit Text sheet content. Forcing nowrap
		   keeps everything in a single column at full cross-axis width.
		   QA round 9 (2026-06-04) — also pin `align-items: stretch` so
		   children fill the cross-axis explicitly. */
		flex-wrap: nowrap;
		align-items: stretch;
		background: var(--pm-color-surface);
		border-radius: 18px 18px 0 0;
		border-top: 1px solid var(--pm-color-border);
		border-left: 0;
		box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, 0.3);
		padding: 4px 12px 12px;
		gap: 6px;
		overflow-y: auto;
		/* QA round 8 (2026-06-04) — clip horizontal overflow. With only
		   overflow-y: auto set, the X axis silently becomes `auto` too
		   (CSS spec), so any child that overflows by even 1 px turns the
		   sheet into a horizontally-swipeable surface. Edit Layer + Edit
		   Art were both showing content shifted off-screen left. */
		overflow-x: hidden;
		box-sizing: border-box;
		z-index: 26;
		animation: pm-mobile-sheet-in 240ms ease-out;
	}
	/* Belt-and-braces — force every direct sub-view inside the sheet to
	   span the full content box. `width: 100%` (not just max-width) is
	   what actually drives the size; max-width clamps it from going wider.
	   QA round 10 (2026-06-04) — !important + zero auto margins to defeat
	   any Storefront / WP-core `aside`/`section` cascade leaking through.
	   Inspector DevTools showed the panel at correct 390×479 with 12px
	   padding, but the active view was still rendering narrower than the
	   content box — only a margin or width override on the view itself
	   explains that. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__view {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}
	/* Also flush every section / textarea / strip inside the view to the
	   view's edge — if any of these have a stale Storefront margin, this
	   resets it. Apply to the most common layout primitives, not !important
	   on padding so internal element padding (textarea 8/10) still works. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__section,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__content,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__fonts,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-color-palette,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider-row,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__sub-header,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-image__preview,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-image__profile,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-layers-actions,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-art__rows {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		min-width: 0;
		box-sizing: border-box;
	}
	.pm-designer-panel__grabber {
		display: block;
		width: 38px;
		height: 4px;
		border-radius: 3px;
		background: #dcdce1;
		margin: 4px auto 6px;
		flex: 0 0 auto;
		pointer-events: none;
	}
	/* QA2 (2026-06-04) — sheet close × top-right of the bottom sheet.
	   Hidden when the inspector is in a sub-view (edit-text/edit-image/
	   edit-art/product-info/upload) because those views have their own
	   close × inside the sub-header (render_inspector_sub_header) — without
	   this guard, the customer sees two × buttons (QA3 fix 2026-06-04). */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-panel__close {
		display: flex;
		position: absolute;
		top: 14px;
		right: 12px;
		width: 28px;
		height: 28px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: var(--pm-color-muted);
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
		appearance: none;
		padding: 0;
		z-index: 1;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"][data-pm-inspector="edit-text"]   .pm-designer-panel__close,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"][data-pm-inspector="edit-image"]  .pm-designer-panel__close,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"][data-pm-inspector="edit-art"]    .pm-designer-panel__close,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"][data-pm-inspector="product-info"] .pm-designer-panel__close,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"][data-pm-inspector="upload"]      .pm-designer-panel__close {
		display: none;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-panel__close:hover {
		background: var(--pm-color-input-bg);
		color: var(--pm-color-ink);
	}
	@keyframes pm-mobile-sheet-in {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* ----- POPOVERS BECOME BOTTOM SHEETS — Add Art / Saved / Colors -----
	   Now that this block sits at the END of the stylesheet, these rules
	   reliably override the desktop popover styles (which set 380px width
	   + top:64 + right:16 absolute positioning). */
	.pm-designer-art-popover {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100vw;
		max-width: none;
		max-height: 65vh;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, 0.3);
		z-index: 26;
		overflow-y: auto;
		overflow-x: hidden;
		transform: none;
		/* QA round 11 — same flex-wrap lock as the inspector sheet.
		   Art + Saved popovers share `display: flex; flex-direction: column`
		   on desktop, so they're vulnerable to the same inherited wrap. */
		flex-wrap: nowrap;
		align-items: stretch;
		animation: pm-mobile-sheet-in 240ms ease-out;
	}
	.pm-designer-art-popover::before {
		content: "";
		display: block;
		width: 38px;
		height: 4px;
		border-radius: 3px;
		background: #dcdce1;
		margin: 4px auto 6px;
	}
	/* QA4 (2026-06-04) — fix the "I can't tap colors" bug. Previously
	   the wrapper was `position: fixed; inset: 0; pointer-events: none`
	   with the panel inside `pointer-events: auto`. Per spec, taps on
	   the panel should still register — but iOS Safari has well-known
	   edge cases where a `pointer-events: none` overlay parent strands
	   its children's events. Symptom: user could see the popover but
	   tapping a swatch did nothing (no shirt color preview).

	   Fix: wrapper becomes `position: static` + pointer-events: none + no
	   z-index — basically a layout no-op that keeps the dialog role for
	   a11y. The panel becomes the actual fixed sheet at z 27 (above scrim
	   z 25), with pointer-events explicitly auto on every descendant. */
	.pm-designer-colors-popover {
		position: static;
		display: block;
		inset: auto;
		z-index: auto;
		align-items: initial;
		justify-content: initial;
		pointer-events: none;
	}
	.pm-designer-colors-popover__backdrop { display: none; }
	.pm-designer-colors-popover__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100vw;
		max-width: none;
		max-height: 65vh;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, 0.3);
		overflow-y: auto;
		overflow-x: hidden;
		/* QA round 11 — same flex-wrap lock. */
		flex-wrap: nowrap;
		align-items: stretch;
		z-index: 27;
		animation: pm-mobile-sheet-in 240ms ease-out;
	}
	/* Force pointer-events: auto on every interactive descendant so
	   neither the wrapper's `pointer-events: none` nor any iOS Safari
	   nested-override quirk can strand the swatch taps. */
	.pm-designer-colors-popover__panel,
	.pm-designer-colors-popover__panel * {
		pointer-events: auto;
	}
	.pm-designer-colors-popover__swatch {
		touch-action: manipulation;
	}
	.pm-designer-colors-popover__panel::before {
		content: "";
		display: block;
		width: 38px;
		height: 4px;
		border-radius: 3px;
		background: #dcdce1;
		margin: 4px auto 6px;
	}

	/* ----- SCRIM behind any open sheet ----- */
	.pm-designer-mobile-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(10, 10, 15, 0.34);
		z-index: 25;
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}
	.pm-designer-mobile-scrim[data-pm-open="true"] {
		opacity: 1;
		pointer-events: auto;
	}
	/* QA round 4 (2026-06-04) — transparent scrim for the colors picker.
	   Scrim still captures tap-outside-to-close, but the canvas behind
	   stays at full brightness so the customer sees the live color
	   preview on the shirt as they tap swatches. */
	.pm-designer-mobile-scrim[data-pm-transparent="true"] {
		background: transparent;
	}

	/* ----- FOOTER (compact single row, design view only) -----
	   QA audit 2026-06-04 — explicit flex-direction: row + width: auto +
	   flex-wrap: nowrap overrides the obsolete @media (max-width: 480px)
	   block at line 2594 which forces flex-direction: column +
	   width: 100% + flex-wrap: wrap. Without these overrides the footer
	   stacks vertically on iPhone 13 Pro (390 px ≤ 480 ≤ 768). */
	.pm-designer-modal__footer--design {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
		min-width: 0;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__footer-left {
		flex: 0 0 auto;
		width: auto;
		flex-wrap: nowrap;
		gap: 6px;
		min-width: 0;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__product-name { display: none; }
	.pm-designer-modal__footer--design .pm-designer-modal__footer-right {
		flex: 1 1 0;
		width: auto;
		flex-wrap: nowrap;
		min-width: 0;
		justify-content: flex-end;
		gap: 6px;
	}
	.pm-designer-modal__footer--design #pm-designer-save-design { display: none; }
	.pm-designer-modal__footer--design #pm-designer-next-step {
		flex: 1 1 0;
		min-width: 0;
		min-height: 42px;
	}
	.pm-designer-modal__footer--design .pm-designer-modal__btn {
		min-height: 40px;
		padding: 0 12px;
		font-size: 12px;
	}
	/* QA round 6/7 (2026-06-04) — mobile color strip caps at 2 thumbs +
	   a peek of the 3rd so the swipe affordance is obvious without arrows.
	   Mobile thumbs are 32 × 32 (from the 600 px block above) + 4 px gap,
	   so 2 thumbs + 1 gap = 68 px; bumping the cap to 78 px reveals ~10 px
	   of the next thumb, signalling scrollability. Arrows hidden — touch
	   swipe handles it and there's no room.
	   QA round 7: dropped fixed `width` so the strip hugs content when
	   only 1-2 colors are selected (no empty gap before + COLORS). */
	.pm-designer-modal__footer--design .pm-designer-modal__color-strip {
		max-width: 78px;
	}
	.pm-designer-modal__color-strip-arrow {
		display: none;
	}
	.pm-designer-modal__save-status { display: none; }

	/* ----- QUANTITY / SUMMARY views: single column readable -----
	   QA round 13 (2026-06-04) — hide the design CHROME (canvas stage,
	   floating rails, side tabs, action bar) on mobile for quantity +
	   summary, but KEEP the workspace + sizes/summary asides visible
	   (they're nested INSIDE the workspace). The customer is past the
	   design step; per-color cards now carry their own large design
	   composite thumbnail so the design is still visible per color.
	   Matches sew-nc. */
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-workspace,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-workspace {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-stage-wrap,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-stage-wrap,
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-mobile-rail,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-mobile-rail,
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-sides,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-sides,
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-mobile-context,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-mobile-context {
		display: none;
	}
	/* Sizes / summary asides take the full viewport width on those views.
	   Reset any desktop fixed width / padding. */
	.pm-designer-modal__dialog[data-pm-view="quantity"] .pm-designer-sizes,
	.pm-designer-modal__dialog[data-pm-view="summary"]  .pm-designer-summary {
		width: 100%;
		max-width: 100%;
		padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		overflow-y: auto;
	}

	/* QA round 13 (2026-06-04) — sew-nc per-color card layout on mobile.
	   Vertical stack: product name → color name → big design composite
	   (~200 px) → items count → size steppers. × button still top-right. */
	.pm-designer-color-card {
		gap: 12px;
		padding: 16px 14px;
	}
	/* Hide the small 48 px color-variant thumb at mobile — the big
	   composite preview below carries the full visual context. */
	.pm-designer-color-card__head .pm-designer-color-card__thumb {
		display: none;
	}
	.pm-designer-color-card__head {
		grid-template-columns: 1fr auto;
		align-items: start;
		padding-bottom: 8px;
	}
	.pm-designer-color-card__title {
		gap: 2px;
	}
	.pm-designer-color-card__product {
		display: block;
		font-size: 15px;
		font-weight: 700;
		color: var(--pm-color-ink);
		line-height: 1.3;
		white-space: normal;
	}
	.pm-designer-color-card__name {
		font-size: 13px;
		font-weight: 500;
		color: var(--pm-color-muted);
		white-space: normal;
	}
	.pm-designer-color-card__items {
		font-size: 14px;
		text-align: center;
		display: block;
	}
	/* Big design composite — sized so the design reads clearly on a 390 px
	   viewport without dominating the screen. Centered, contain-fit so
	   non-square shirts (or the bbox of the design rendering) stay correct. */
	.pm-designer-color-card__preview {
		display: block;
		width: min(220px, 60vw);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		object-fit: contain;
		background: var(--pm-color-surface);
		border: var(--pm-thumb-frame-border);
		border-radius: var(--pm-radius-sm);
		box-shadow: var(--pm-thumb-frame-shadow);
	}

	/* ----- QA2 (2026-06-04) — ACTIONS row compaction -----
	   Hide the 3 center-align buttons at mobile. They consumed enough
	   horizontal space that the Add Art icon grid + Edit Image preview
	   were getting horizontally clipped. Keep flip-h / flip-v / copy /
	   paste / delete (5 buttons fit comfortably). Centering remains
	   reachable on desktop where horizontal space is plentiful. */
	.pm-designer-layers-actions__btn[data-pm-action="center-h"],
	.pm-designer-layers-actions__btn[data-pm-action="center-v"],
	.pm-designer-layers-actions__btn[data-pm-action="center-both"] {
		display: none;
	}

	/* ----- QA2 (2026-06-04) — Edit Text color palette → horizontal scroll -----
	   Default palette wraps to multiple rows at narrow widths; in the sheet
	   that ate vertical space and pushed the sliders off-screen. Same
	   pattern inside the inspector sheet wherever the palette appears
	   (edit-text view, edit-art per-row palettes). */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-color-palette {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-right: 6px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-color-palette::-webkit-scrollbar {
		display: none;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-color-swatch {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
	}

	/* ----- QA4 (2026-06-04) — fonts strip even smaller (was QA2 size). */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-font-card {
		min-width: 62px;
		height: 32px;
		font-size: 13px;
		padding: 0 8px;
	}

	/* ----- QA3 (2026-06-04) — aggressive Edit Text compaction -----
	   Previous QA2 trims weren't enough; sheet still required vertical
	   scroll on iPhone 13 Pro. Compact every vertical dimension. Goal:
	   textarea + font strip + color strip + 3 slider rows + ACTIONS row
	   all fit in 65vh on a 390×844 viewport. */

	/* Tighten the global inspector view + sub-view gaps at mobile. The
	   desktop view stack uses 14px / 16px which is generous; at mobile
	   we want 6-8px between sections. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__view {
		gap: 8px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__view--sub {
		gap: 8px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__section {
		gap: 4px;
		margin-bottom: 0;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__heading {
		font-size: 10.5px;
		margin: 0 0 2px;
	}
	/* Textarea: single-line by default, only grows if user types lots. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-edit-text__content {
		min-height: 38px;
		padding: 8px 10px;
		font-size: 13px;
	}
	/* QA4 (2026-06-04) — slider row to SINGLE-ROW layout via grid.
	   Was 3 stacked elements (~50px tall); now label | track | number
	   in one row (~28px tall). Saves ~66px across 3 slider rows.
	   `display: contents` on .__head escapes the wrapper so the label
	   + number become direct grid children alongside the .pm-designer-slider. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider-row {
		display: grid;
		grid-template-columns: minmax(72px, auto) 1fr 42px;
		align-items: center;
		gap: 8px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider-row__head {
		display: contents;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider-row__label {
		font-size: 11.5px;
		grid-column: 1;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider {
		grid-column: 2;
		width: 100%;
		min-width: 0;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider-row__number {
		grid-column: 3;
		width: 100%;
		min-width: 0;
		height: 26px;
		font-size: 11px;
		padding: 0 4px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-slider {
		height: 22px;
	}
	/* ACTIONS section — drop the "ACTIONS" heading at mobile (icons are
	   self-explanatory; saves another ~20px). Buttons trimmed too. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-layers-actions__title {
		display: none;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-layers-actions {
		gap: 4px;
	}
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__divider {
		margin: 4px 0;
	}

	/* ----- QA2 (2026-06-04) — layer-row left whitespace fix -----
	   Inspector views were inheriting an asymmetric padding on the left
	   from the desktop `.pm-designer-panel { padding: 24px 16px }` rule
	   (its specificity beat my sheet rule on certain children). Force
	   the inspector view body to flush-zero its own padding inside the
	   sheet so the layer rows align with the sheet's 12px sheet padding. */
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__view,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__intro,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-inspector__quick,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-layers,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-layers-actions,
	.pm-designer-modal__dialog[data-pm-view="design"] .pm-designer-panel[data-pm-mobile-open="true"] .pm-designer-colors-in-use {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}
}