/**
 * Visuals Designer admin page.
 *
 * Three-column workspace (template gallery | preview stage | inspector)
 * with a quiet title bar and floating save bar. Hairline-only chrome,
 * no stacked elevations. BEM with the wsscd- prefix.
 *
 * Consumes shared tokens from shared/_variables.css and
 * shared/_theme-colors.css. Local tokens (`--wsscd-d-*`) are reserved
 * for designer-only layout dimensions (column widths, sticky offsets).
 */

/* ============================================================
   Designer-only layout tokens
   ============================================================ */

.wsscd-designer {
	--wsscd-d-gallery-w:        240px;
	--wsscd-d-gallery-min-w:    64px;
	--wsscd-d-inspector-w:      360px;
	--wsscd-d-col-min-h:        400px;
	--wsscd-d-stage-min-h:      480px;
	--wsscd-d-stage-pane-max-w: 480px;

	/* Sticky offsets — keep panes anchored just below the WP admin bar.
	   80px bottom reserve leaves room for the floating save bar. */
	--wsscd-d-sticky-top:    calc(var(--wsscd-wp-admin-bar-height-desktop) + 10px);
	--wsscd-d-sticky-top-sm: calc(var(--wsscd-wp-admin-bar-height-mobile)  + 10px);
	--wsscd-d-sticky-bottom: 80px;

	--wsscd-d-mock-img-bg: linear-gradient(135deg, var(--wsscd-color-surface-dark), var(--wsscd-color-border));
}


/* ============================================================
   Unified focus ring
   ============================================================
   Single soft halo on keyboard focus for every interactive control
   across the designer and library. :where() keeps specificity at 0
   so individual rules can still layer (e.g. inputs shift border too). */

:where(
	.wsscd-designer__back,
	.wsscd-designer__name-input,
	.wsscd-designer__col-collapse,
	.wsscd-designer__history-btn.button,
	.wsscd-designer__title-actions .button,
	.wsscd-inspector__section-toggle,
	.wsscd-inspector__section-reset,
	.wsscd-field__reset,
	.wsscd-field__help,
	.wsscd-field input[type="text"],
	.wsscd-field input[type="number"],
	.wsscd-field select,
	.wsscd-field textarea,
	.wsscd-tpl,
	.wsscd-tpl__delete,
	.wsscd-stage-tab,
	.wsscd-zoom-opt,
	.wsscd-preview-state-opt,
	.wsscd-seg__opt,
	.wsscd-pos-opt,
	.wsscd-icon-picker__opt,
	.wsscd-token-chip,
	.wsscd-visuals__add-toggle,
	.wsscd-visuals__add-link,
	.wsscd-visuals__tab,
	.wsscd-visuals__search input,
	.wsscd-visuals__sort select,
	.wsscd-visual-card,
	.wsscd-visual-card__preview,
	.wsscd-visual-card__icon-btn
):focus-visible {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}


/* ============================================================
   Title bar
   ============================================================ */

.wsscd-designer__title-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin-bottom: 16px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-lg);
}

.wsscd-designer__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--wsscd-color-text-muted);
	border: none;
	border-radius: var(--wsscd-radius-md);
	text-decoration: none;
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-designer__back:hover,
.wsscd-designer__back:focus-visible {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text);
}

/* Dashicons carry their own internal font metrics + WP core's
   vertical-align: top, which throws off flex centering. Force the
   icon span into a grid that hard-centers its ::before glyph. */
.wsscd-designer__back .dashicons,
.wsscd-designer__history-btn .dashicons {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	line-height: 1;
}

.wsscd-designer__back .dashicons         { font-size: var(--wsscd-font-size-xxl); }
.wsscd-designer__history-btn .dashicons  { font-size: var(--wsscd-font-size-xl); }

/* Name input — the focal element. Borderless at rest reads as the page title. */
input.wsscd-designer__name-input {
	/* Don't grow — a fixed-ish basis keeps the name compact so the type pill
	   and "Used by …" context sit beside it on the left, while the save
	   indicator's margin-left:auto pushes the actions to the right edge. */
	flex: 0 1 260px;
	min-width: 0;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-large);
	font-weight: 600;
	letter-spacing: -0.01em;
	box-shadow: none;
	transition: background var(--wsscd-transition-fast) ease,
				border-color var(--wsscd-transition-fast) ease;
}

input.wsscd-designer__name-input::placeholder {
	color: var(--wsscd-color-text-muted);
	font-weight: 500;
}

input.wsscd-designer__name-input:hover:not(:focus):not([readonly]) {
	background: var(--wsscd-color-surface);
}

input.wsscd-designer__name-input:focus:not([readonly]) {
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-color-primary);
	outline: none;
}

input.wsscd-designer__name-input[readonly] {
	cursor: default;
	color: var(--wsscd-color-text-muted);
}

.wsscd-designer__seeded-chip {
	padding: 2px 8px;
	background: var(--wsscd-color-warning-alpha-15);
	color: var(--wsscd-color-warning-dark);
	border-radius: var(--wsscd-radius-pill);
	font-size: 11px;
	font-weight: 600;
}

/* Type pill + discount-context line — identify what's being edited and where
   it surfaces, right next to the name. The dot is tinted by family. */
.wsscd-designer__type-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 2px 10px;
	background: var(--wsscd-color-surface-dark);
	color: var(--wsscd-color-text);
	border-radius: var(--wsscd-radius-pill);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.wsscd-designer__type-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-color-primary);
}

.wsscd-designer__type-pill--badge::before { background: var(--wsscd-color-danger); }
.wsscd-designer__type-pill--panel::before { background: var(--wsscd-color-success); }
.wsscd-designer__type-pill--bar::before   { background: var(--wsscd-color-accent); }

.wsscd-designer__context {
	flex-shrink: 0;
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	white-space: nowrap;
}

/* On narrow viewports the context line is the first thing to drop. */
@media (max-width: 960px) {
	.wsscd-designer__context { display: none; }
}

.wsscd-designer__title-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.wsscd-designer__history {
	display: inline-flex;
	align-items: center;
}

/* Title-bar action buttons share the 32px toolbar rhythm. */
.wsscd-designer__title-actions .button {
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--wsscd-radius-md);
	font-size: var(--wsscd-font-size-base);
	line-height: 30px;
}

.wsscd-designer__title-actions .button:not(.button-primary) {
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	color: var(--wsscd-color-text);
	box-shadow: none;
}

.wsscd-designer__title-actions .button:not(.button-primary):hover,
.wsscd-designer__title-actions .button:not(.button-primary):focus-visible {
	background: var(--wsscd-color-surface);
	border-color: var(--wsscd-color-text-muted);
}

.wsscd-designer__title-actions .button.button-primary {
	border-color: var(--wsscd-color-primary);
}

/* Undo/redo — ghost icon pair separated by a hairline. */
.wsscd-designer__history-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--wsscd-radius-md);
	box-shadow: none;
	color: var(--wsscd-color-text-muted);
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-designer__history-btn.button:hover:not([disabled]),
.wsscd-designer__history-btn.button:focus-visible {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text);
}

.wsscd-designer__history-btn + .wsscd-designer__history-btn {
	margin-left: 4px;
	border-left: 1px solid var(--wsscd-color-border);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.wsscd-designer__history-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}


/* Save indicator — small status pill, color reflects dirty / saving / saved. */
.wsscd-designer__save-indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 0 10px;
	min-height: 22px;
	border-radius: var(--wsscd-radius-pill);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-designer__save-indicator[data-state=""],
.wsscd-designer__save-indicator:empty {
	padding: 0;
	min-height: 0;
}

.wsscd-designer__save-indicator[data-state="dirty"] {
	background: var(--wsscd-color-warning-alpha-15);
	color: var(--wsscd-color-warning-dark);
}

.wsscd-designer__save-indicator[data-state="saving"] {
	background: var(--wsscd-color-surface-dark);
	color: var(--wsscd-color-text-muted);
}

.wsscd-designer__save-indicator[data-state="saved"] {
	background: var(--wsscd-color-success-alpha-15);
	color: var(--wsscd-color-success-dark);
}

.wsscd-designer__save-indicator[data-state="dirty"]::before { content: "●"; }
.wsscd-designer__save-indicator[data-state="saved"]::before { content: "✓"; }



/* ============================================================
   Workspace grid + columns
   ============================================================ */

.wsscd-designer__workspace {
	display: grid;
	grid-template-columns: var(--wsscd-d-gallery-w) 1fr var(--wsscd-d-inspector-w);
	gap: var(--wsscd-spacing-base);
	/* Stretch so all three columns share one height — the preview (stage) ends
	   up the same height as the gallery / inspector instead of sizing to its
	   own content. The row height is the tallest column, capped by each
	   column's max-height; the gallery and inspector scroll inside, the stage
	   centres its (fit-scaled) preview within the shared height. */
	align-items: stretch;
	transition: grid-template-columns var(--wsscd-transition-base) ease;
}

.wsscd-designer__workspace--gallery-collapsed {
	grid-template-columns: var(--wsscd-d-gallery-min-w) 1fr var(--wsscd-d-inspector-w);
}

.wsscd-designer__col {
	position: sticky;
	top: var(--wsscd-d-sticky-top);
	align-self: stretch;
	min-height: var(--wsscd-d-col-min-h);
	max-height: calc(100vh - var(--wsscd-d-sticky-top) - var(--wsscd-d-sticky-bottom));
	padding: 14px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

@media (max-width: 782px) {
	.wsscd-designer__col {
		top: var(--wsscd-d-sticky-top-sm);
		max-height: calc(100vh - var(--wsscd-d-sticky-top-sm) - var(--wsscd-d-sticky-bottom));
	}
}

.wsscd-designer__col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.wsscd-designer__col-title {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wsscd-color-text-muted);
}

.wsscd-designer__col-collapse {
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-small);
	line-height: 1;
	cursor: pointer;
	transition: transform var(--wsscd-transition-base) ease,
				color var(--wsscd-transition-fast) ease,
				border-color var(--wsscd-transition-fast) ease;
}

.wsscd-designer__col-collapse:hover {
	color: var(--wsscd-color-text);
	border-color: var(--wsscd-color-text-muted);
}

.wsscd-designer__workspace--gallery-collapsed .wsscd-designer__col-collapse {
	transform: rotate(180deg);
}


/* ============================================================
   Template gallery (left column)
   ============================================================ */

.wsscd-designer__templates {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wsscd-tpl {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 8px;
	background: var(--wsscd-color-surface);
	border: 2px solid transparent;
	border-radius: var(--wsscd-radius-md);
	cursor: pointer;
	transition: border-color var(--wsscd-transition-fast) ease,
				background var(--wsscd-transition-fast) ease;
}

.wsscd-tpl:hover:not(:disabled) { background: var(--wsscd-color-surface-dark); }

.wsscd-tpl--active,
.wsscd-tpl--active:hover {
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-family-color, var(--wsscd-color-primary));
}

.wsscd-tpl:disabled { opacity: 0.5; cursor: not-allowed; }

.wsscd-tpl__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 6px;
	background: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-sm);
	overflow: hidden;
	pointer-events: none;
}

/* `position: relative !important` overrides image_badge's absolute
   positioning so it stays in-flow inside the thumbnail. `inset: auto`
   neutralizes the per-position modifier offsets (--pos-tr / --pos-bl
   etc.) so the badge centers inside the tile instead of being pushed
   to whichever corner the merchant chose for the storefront. */
.wsscd-tpl__preview .wsscd-visual {
	pointer-events: none;
	position: relative !important;
	inset: auto !important;
}

/* ----- Gallery thumbnail compact sizing -----------------------------
 * Every visual type's storefront defaults are tuned for full-width product
 * surfaces; in the ~150px gallery tile they overflow. These scoped overrides
 * shrink each layout to fit the thumbnail while preserving its structural
 * personality. Selectors are crafted to match or exceed the storefront's
 * specificity so no !important is needed — admin CSS loads after frontend
 * CSS, so a tie goes to these rules. */

/* image_badge — small by default; tighten padding/font so the cutout
   shapes (ribbon, tag, corner) stay recognisable at thumbnail scale. */
.wsscd-tpl__preview .wsscd-visual--image-badge {
	font-size: 11px;
	padding: 3px 8px;
}

/* summary_badge — four layouts, each tightened independently. */
.wsscd-tpl__preview .wsscd-visual--summary-badge.wsscd-visual--layout-highlighted_row {
	padding: 5px 8px;
	margin: 0;
	font-size: 11px;
}
.wsscd-tpl__preview .wsscd-visual--summary-badge.wsscd-visual--layout-inline_pill {
	padding: 1px 8px;
	font-size: 10px;
}
.wsscd-tpl__preview .wsscd-visual--summary-badge.wsscd-visual--layout-side_note {
	padding-left: 6px;
	font-size: 10px;
}
.wsscd-tpl__preview .wsscd-visual--summary-badge.wsscd-visual--layout-strikethrough {
	font-size: 10px;
}

/* tier_panel — three sample tiers stack vertically (or wrap as pills), so
   panel padding, row padding and gaps all shrink hard. */
.wsscd-tpl__preview .wsscd-visual--tier-panel {
	padding: 5px 7px;
	font-size: 9px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel .wsscd-visual__tiers {
	gap: 3px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-pills .wsscd-visual__tier {
	flex: 1 1 40px;
	padding: 3px 6px;
	font-size: 8px;
	gap: 4px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-cards .wsscd-visual__tier {
	padding: 4px 6px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-cards .wsscd-visual__tier + .wsscd-visual__tier {
	margin-top: 3px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-rows .wsscd-visual__tier {
	padding: 3px 2px;
}
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-compact_table .wsscd-visual__tier > * {
	padding: 2px 3px;
	font-size: 8px;
}
/* Bumped zebra opacity in gallery context so the "table" identity is
   unmistakable at thumbnail scale (storefront-side zebra at 0.03 disappears
   when shrunk this much). */
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-compact_table .wsscd-visual__tier:not(.wsscd-visual__tier--head):not(.wsscd-visual__tier--active):nth-of-type(odd) > * {
	background: rgba(0, 0, 0, 0.08);
}
/* Bumped head-row divider so the column-header row reads at thumbnail size. */
.wsscd-tpl__preview .wsscd-visual--tier-panel.wsscd-visual--layout-compact_table .wsscd-visual__tier--head > * {
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

/* bogo_panel — pills shrink to chip size; equation keeps its bold/centered
   personality; stacked stripes trim to 3px so the buy/free identity stays
   visible without crowding the tiny card. */
.wsscd-tpl__preview .wsscd-visual--bogo-panel {
	padding: 5px 7px;
	font-size: 10px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel .wsscd-visual__bogo {
	gap: 5px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel .wsscd-visual__buy,
.wsscd-tpl__preview .wsscd-visual--bogo-panel .wsscd-visual__free {
	padding: 2px 6px;
	font-size: 9px;
	box-shadow: none;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel .wsscd-visual__sep {
	font-size: 10px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-equation .wsscd-visual__buy,
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-equation .wsscd-visual__free {
	padding: 4px 8px;
	font-size: 10px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-equation .wsscd-visual__sep {
	font-size: 14px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-stacked .wsscd-visual__bogo {
	gap: 5px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-stacked .wsscd-visual__buy,
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-stacked .wsscd-visual__free {
	padding: 4px 6px;
	font-size: 9px;
	border-left-width: 3px;
}
.wsscd-tpl__preview .wsscd-visual--bogo-panel.wsscd-visual--layout-stacked .wsscd-visual__sep {
	font-size: 11px;
}

/* bundle_panel — items are chips with thumbs; both shrink. Carousel keeps
   slightly larger thumbs so the "preview the bundle" feel survives. */
.wsscd-tpl__preview .wsscd-visual--bundle-panel {
	padding: 5px 7px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel .wsscd-visual__items {
	gap: 4px;
	margin: 0 0 3px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel .wsscd-visual__item {
	padding: 2px 4px;
	gap: 3px;
	font-size: 9px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel .wsscd-visual__thumb {
	width: 14px;
	height: 14px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel .wsscd-visual__savings {
	font-size: 9px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel.wsscd-visual--layout-carousel .wsscd-visual__item {
	min-width: 44px;
	padding: 4px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel.wsscd-visual--layout-carousel .wsscd-visual__thumb {
	width: 22px;
	height: 22px;
}
.wsscd-tpl__preview .wsscd-visual--bundle-panel.wsscd-visual--layout-stack .wsscd-visual__thumb {
	width: 16px;
	height: 16px;
}

/* threshold_bar — message font shrinks; track stays driven by --vis-track-height
   but the tile-context override caps it at 4-6px so even the "thick" recipe
   fits without overflowing the 56px tile. */
.wsscd-tpl__preview .wsscd-visual--threshold-bar {
	padding: 5px 8px;
}
.wsscd-tpl__preview .wsscd-visual--threshold-bar .wsscd-visual__message {
	font-size: 9px;
	margin: 0 0 4px;
}
.wsscd-tpl__preview .wsscd-visual--threshold-bar .wsscd-visual__track {
	height: 4px;
}

.wsscd-tpl__label {
	font-size: 11px;
	font-weight: 500;
	color: var(--wsscd-color-text);
	text-align: center;
}

.wsscd-tpl__hint {
	display: block;
	margin-top: 1px;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
	text-align: center;
}

.wsscd-tpl--active .wsscd-tpl__label {
	color: var(--wsscd-family-color-strong, var(--wsscd-color-primary));
}

/* User-saved recipes get a hover-revealed delete cross. */
.wsscd-tpl-item                  { position: relative; }
.wsscd-tpl-item--user .wsscd-tpl { padding-right: 22px; }

.wsscd-tpl__delete {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-medium);
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--wsscd-transition-fast) ease,
				background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-tpl-item:hover .wsscd-tpl__delete,
.wsscd-tpl__delete:focus-visible { opacity: 1; }

.wsscd-tpl__delete:hover {
	background: var(--wsscd-color-danger-alpha-15);
	color: var(--wsscd-color-danger-dark);
}

/* Collapsed gallery — thumbnails only. Tighten column + head padding so
   the 64px-wide column doesn't waste room on margins around small tiles. */
.wsscd-designer__workspace--gallery-collapsed .wsscd-designer__col--gallery,
.wsscd-designer__workspace--gallery-collapsed [data-gallery]              { padding: 6px; }
.wsscd-designer__workspace--gallery-collapsed .wsscd-designer__col-head   { margin-bottom: 8px; }
.wsscd-designer__workspace--gallery-collapsed .wsscd-tpl                  { padding: 4px; }
.wsscd-designer__workspace--gallery-collapsed .wsscd-tpl__label           { display: none; }
.wsscd-designer__workspace--gallery-collapsed .wsscd-tpl__hint            { display: none; }
.wsscd-designer__workspace--gallery-collapsed .wsscd-designer__col-title  { display: none; }


/* ============================================================
   Stage (center column) — tabs, preview, mock chrome
   ============================================================ */

.wsscd-designer__col--stage {
	display: flex;
	flex-direction: column;
	min-height: var(--wsscd-d-stage-min-h);
	padding: 0;
	background: var(--wsscd-color-surface);
	overflow: hidden;
	/* Stage clips contents (overflow: hidden) but never scrolls. Re-enable
	   wheel propagation so hovering the live preview still scrolls the page. */
	overscroll-behavior: auto;
}

.wsscd-designer__stage-tabs {
	display: flex;
	gap: 4px;
	padding: 10px 14px;
	background: var(--wsscd-color-white);
	border-bottom: 1px solid var(--wsscd-color-border);
}

.wsscd-stage-tab {
	padding: 6px 12px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wsscd-radius-pill);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-small);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-stage-tab:hover:not(.wsscd-stage-tab--active) {
	color: var(--wsscd-color-text);
	background: var(--wsscd-color-surface);
}

.wsscd-stage-tab--active,
.wsscd-stage-tab--active:hover {
	background: var(--wsscd-color-text);
	color: var(--wsscd-color-white);
}

.wsscd-designer__stage {
	--wsscd-stage-zoom: 1;
	position: relative;
	flex: 1 1 auto;
	display: flex;
	/* Centre both axes. The preview scales via transform from its centre
	   (transform-origin: center on .wsscd-stage-pane > *), so the pane must be
	   centred for "Fit" to keep the whole mock visible — top-aligning it makes a
	   down-scaled tall mock overflow the clipped bottom. "Fit" scales to width
	   AND height (visuals-stage-controls.js), so tall mocks shrink to fit here
	   rather than spilling past the stage border. */
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.wsscd-stage-pane {
	width: 100%;
	max-width: var(--wsscd-d-stage-pane-max-w);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wsscd-stage-pane[hidden] { display: none; }

.wsscd-stage-pane > * {
	transform: scale(var(--wsscd-stage-zoom));
	transform-origin: center;
	transition: transform var(--wsscd-transition-base) ease;
}

/* ---------- Mock product (Product page context) ---------- */

.wsscd-mock-product {
	/* Fill the stage pane up to the shared max-width. Matches the
	   `width: 100%; max-width: …` pattern that .wsscd-mock-cart and
	   .wsscd-mock-shop already use, so the mock grows and shrinks with the
	   stage instead of overflowing on narrow viewports or leaving empty
	   space on wide ones. */
	width: 100%;
	max-width: var(--wsscd-d-stage-pane-max-w);
	padding: 18px 20px 22px;
	background: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: var(--wsscd-shadow-md);
	box-sizing: border-box;
	/* overflow stays visible so panel shadows can extend past the card edge. */
}

/* Breadcrumb above the two-column area, matching the storefront pattern. */
.wsscd-mock-product__breadcrumb {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wsscd-color-border, #dcdcde);
	font-size: 11px;
	color: var(--wsscd-color-text-muted);
}

/* Two-column layout — image gallery on the left, product details on the right.
   Proportional `2fr 3fr` (≈ 40% / 60%) so both columns scale with the stage
   width instead of the image staying fixed and the body cramping. Matches
   the WC visual hierarchy (image roughly equal to or slightly narrower than
   details). `min-width: 0` on the body keeps long product names from blowing
   out the grid track. */
.wsscd-mock-product__layout {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 20px;
	align-items: flex-start;
}

.wsscd-mock-product__media { display: flex; flex-direction: column; gap: 8px; }

.wsscd-mock-product__img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--wsscd-d-mock-img-bg);
	border-radius: var(--wsscd-radius-md);
	overflow: hidden;
}

.wsscd-mock-product__placeholder { color: var(--wsscd-overlay-white-heavy); }

.wsscd-mock-product__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
}

/* Thumbnail strip below the main image — 4 small thumbs, first one active. */
.wsscd-mock-product__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.wsscd-mock-product__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wsscd-d-mock-img-bg);
	border: 1px solid var(--wsscd-color-border, #dcdcde);
	border-radius: var(--wsscd-radius-sm);
}
.wsscd-mock-product__thumb--active {
	border-color: var(--wsscd-color-primary, #2271b1);
	box-shadow: 0 0 0 1px var(--wsscd-color-primary, #2271b1);
}

.wsscd-mock-product__body {
	display: flex;
	flex-direction: column;
	/* `min-width: 0` is required on a grid item that's a flex container —
	   without it, long product names force the grid track to grow and
	   overflow the outer card. */
	min-width: 0;
}

.wsscd-mock-product__name {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wsscd-color-text);
}

.wsscd-mock-product__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--wsscd-color-text-muted);
}
.wsscd-mock-product__stars {
	color: #f0b429;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 1;
}
.wsscd-mock-product__stars-empty {
	color: rgba(0, 0, 0, 0.15);
}

.wsscd-mock-product__price {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--wsscd-color-text-muted);
}
.wsscd-mock-product__price del    { color: var(--wsscd-color-text-muted); font-size: 14px; margin-right: 6px; }
.wsscd-mock-product__price strong { color: var(--wsscd-color-text); font-size: 22px; }

.wsscd-mock-product__desc {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wsscd-color-text-muted);
}

/* Panel slot sits between the description and the Add-to-cart row — the
   place tier/bogo/bundle panels actually live on a real product page. */
.wsscd-mock-product__panel-slot { margin: 0 0 14px; }

/* CTA row: quantity selector + Add-to-cart button side by side. */
.wsscd-mock-product__cta-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.wsscd-mock-product__qty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 0 10px;
	background: var(--wsscd-color-white);
	color: var(--wsscd-color-text);
	border: 1px solid var(--wsscd-color-border, #dcdcde);
	border-radius: var(--wsscd-radius-sm);
	font-size: 14px;
	font-weight: 600;
}

/* Mock chrome only — pointer-events off, never interactive. */
.wsscd-mock-product__cta {
	flex: 1;
	padding: 10px 16px;
	background: var(--wsscd-color-primary, #2271b1);
	color: #fff;
	border: 0;
	border-radius: var(--wsscd-radius-sm);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* ---------- Mock shop grid (Shop card context) ---------- */

.wsscd-mock-shop {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	width: 100%;
	max-width: var(--wsscd-d-stage-pane-max-w);
}

.wsscd-mock-shop-card {
	background: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-md);
	box-shadow: var(--wsscd-shadow-sm);
	overflow: hidden;
	opacity: 0.55;
	transition: opacity var(--wsscd-transition-base) ease, transform var(--wsscd-transition-base) ease;
}

/* Featured card stays at full opacity + slight lift; the others fade so the
   merchant's eye is drawn to the one carrying the badge slot. */
.wsscd-mock-shop-card--featured {
	opacity: 1;
	transform: scale(1.04);
	box-shadow: var(--wsscd-shadow-md);
}

.wsscd-mock-shop-card__img {
	position: relative;
	height: 110px;
	background: var(--wsscd-d-mock-img-bg);
}

.wsscd-mock-shop-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
}

.wsscd-mock-shop-card__stage { position: absolute; inset: 0; }

.wsscd-mock-shop-card__name {
	margin: 10px 10px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wsscd-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsscd-mock-shop-card__price {
	display: flex;
	gap: 6px;
	margin: 0 10px 12px;
	font-size: 12px;
	color: var(--wsscd-color-text);
	font-weight: 600;
}
.wsscd-mock-shop-card__price del {
	color: var(--wsscd-color-text-muted);
	font-weight: 400;
}

/* ---------- Mock cart / checkout ---------- */

.wsscd-mock-cart {
	width: 100%;
	max-width: 380px;
	padding: 16px;
	background: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: var(--wsscd-shadow-md);
}

/* Line items — list of products with thumb, name, qty, price. Cart layout
   uses a 3-row grid (cart) or 2-row condensed grid (checkout). */
.wsscd-mock-cart__items {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wsscd-color-border, #dcdcde);
}

.wsscd-mock-cart__item {
	display: grid;
	grid-template-columns: 28px 1fr auto auto;
	gap: 8px;
	align-items: center;
	padding: 8px 0;
	font-size: 12px;
	color: var(--wsscd-color-text);
}
.wsscd-mock-cart__item + .wsscd-mock-cart__item {
	border-top: 1px solid var(--wsscd-color-border, #dcdcde);
}

.wsscd-mock-cart__item-thumb {
	width: 28px;
	height: 28px;
	background: var(--wsscd-d-mock-img-bg, #f0f1f3);
	border-radius: var(--wsscd-radius-sm);
}

.wsscd-mock-cart__item-name  { font-weight: 500; }
.wsscd-mock-cart__item-qty   { color: var(--wsscd-color-text-muted); font-size: 11px; }
.wsscd-mock-cart__item-price { font-weight: 600; }

/* Checkout's compact items: no thumb column, qty inlined with the name. */
.wsscd-mock-cart__items--compact {
	border: 0;
	margin: 0 0 8px;
}
.wsscd-mock-cart__items--compact .wsscd-mock-cart__item {
	grid-template-columns: 1fr auto;
	padding: 4px 0;
	border-top: 0;
	font-size: 12px;
}

/* Totals box — subtle surface tint sets it apart from line items so the
   page reads as "items above, summary below" the way real cart pages do. */
.wsscd-mock-cart__totals {
	padding: 12px 14px 14px;
	background: var(--wsscd-color-surface, #f6f7f7);
	border-radius: var(--wsscd-radius-md);
}

.wsscd-mock-cart__title {
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wsscd-color-border);
	font-size: var(--wsscd-font-size-medium);
	font-weight: 600;
}

.wsscd-mock-cart__row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text);
}

.wsscd-mock-cart__row--total {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--wsscd-color-border);
	font-size: var(--wsscd-font-size-medium);
	font-weight: 600;
}

/* Bar slot — sits at the top of the cart/checkout, above any other chrome,
   so threshold-bar progress is the first thing the shopper sees. */
.wsscd-mock-cart__bar-slot { margin: 0 0 14px; }

/* Summary slot — between the regular rows and Total. Compact since summary
   badges are themselves single-line components. */
.wsscd-mock-cart__summary-slot { padding: 4px 0; }

/* Panel slot — between rows and Total, with generous spacing so the panel
   reads as a distinct block, not a row. */
.wsscd-mock-cart__panel-slot { padding: 10px 0 4px; }

/* ---------- Bare context (checker background, no chrome) ---------- */

.wsscd-stage-bare {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	min-height: 180px;
	padding: 40px;
	background-color: var(--wsscd-color-white);
	background-image: var(--wsscd-checker-bg);
	background-size: var(--wsscd-checker-tile) var(--wsscd-checker-tile);
	background-position: var(--wsscd-checker-position);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-lg);
}


/* ============================================================
   Floating chip groups over the stage (zoom + preview-state)
   ============================================================ */

.wsscd-designer__zoom,
.wsscd-designer__preview-state {
	position: absolute;
	bottom: 12px;
	display: inline-flex;
	background: var(--wsscd-overlay-white-heavy);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-pill);
	overflow: hidden;
}

.wsscd-designer__zoom          { right: 12px; }
.wsscd-designer__preview-state { left: 12px; }

.wsscd-zoom-opt,
.wsscd-preview-state-opt {
	padding: 4px 10px;
	background: transparent;
	border: none;
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	cursor: pointer;
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-zoom-opt          { font-family: var(--wsscd-font-family-mono); }
.wsscd-preview-state-opt { padding: 4px 12px; }

.wsscd-zoom-opt:hover,
.wsscd-preview-state-opt:hover { color: var(--wsscd-color-text); }

.wsscd-zoom-opt--active,
.wsscd-zoom-opt--active:hover,
.wsscd-preview-state-opt--active,
.wsscd-preview-state-opt--active:hover {
	background: var(--wsscd-color-text);
	color: var(--wsscd-color-white);
	font-weight: 600;
}


/* ============================================================
   Inspector (right column)
   ============================================================ */

.wsscd-inspector__section {
	margin-bottom: 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wsscd-color-border);
}

.wsscd-inspector__section + .wsscd-inspector__section { padding-top: 4px; }

.wsscd-inspector__section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.wsscd-inspector__section-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wsscd-inspector__section-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	padding: 6px 0;
	background: transparent;
	border: none;
	color: var(--wsscd-color-text);
	text-align: left;
	cursor: pointer;
}

.wsscd-inspector__section-reset {
	flex-shrink: 0;
	padding: 2px 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--wsscd-transition-fast) ease,
				border-color var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-inspector__section:hover .wsscd-inspector__section-reset,
.wsscd-inspector__section-reset:focus-visible { opacity: 1; }

.wsscd-inspector__section-reset:hover {
	border-color: var(--wsscd-color-border);
	color: var(--wsscd-color-text);
}

.wsscd-inspector__section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--wsscd-family-color-soft, var(--wsscd-color-surface));
	color: var(--wsscd-family-color-strong, var(--wsscd-color-text));
	border-radius: var(--wsscd-radius-sm);
}

.wsscd-inspector__section-title {
	flex: 1 1 auto;
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
	text-align: left;
}

.wsscd-inspector__section-caret {
	color: var(--wsscd-color-text-muted);
	font-size: 10px;
	transition: transform var(--wsscd-transition-base) ease;
}

.wsscd-inspector__section--collapsed .wsscd-inspector__section-caret { transform: rotate(-90deg); }

.wsscd-inspector__section-body { padding-top: 8px; }
.wsscd-inspector__section--collapsed .wsscd-inspector__section-body { display: none; }

/* Contrast warning chrome — now provided by the shared notice helper
   (#wsscd-contrast-warning, .wsscd-notice--inline). Only a small top
   gap is needed to space it from the color row above. */
#wsscd-contrast-warning { margin-top: 8px; }

.wsscd-inspector__fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Dense (inline-layout) sections — e.g. Colors — lay their compact controls
   in two columns so the swatch rows pack tightly instead of running down a
   single tall list. The widened inspector (360px) gives each column room.
   Non-inline sections keep the single-column flow above. */
.wsscd-inspector__section--layout-inline .wsscd-inspector__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

/* "More options" disclosure — wraps a section's advanced-tier fields
   so the inspector opens on the things merchants change most often. */
.wsscd-inspector__more {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--wsscd-color-border);
}

.wsscd-inspector__more-toggle {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	font-weight: 500;
	user-select: none;
}

.wsscd-inspector__more-toggle::-webkit-details-marker { display: none; }
.wsscd-inspector__more-toggle:hover { color: var(--wsscd-color-text); }

.wsscd-inspector__more-toggle:focus-visible {
	outline: 2px solid var(--wsscd-color-primary);
	outline-offset: 2px;
	border-radius: var(--wsscd-radius-sm);
}

.wsscd-inspector__more-caret {
	font-size: 9px;
	transition: transform var(--wsscd-transition-base) ease;
}

.wsscd-inspector__more[open] .wsscd-inspector__more-caret {
	transform: rotate(180deg);
}

.wsscd-inspector__fields--advanced {
	margin-top: 10px;
}

/* "Section changed" indicator dot — JS adds the --changed modifier
   to the section whenever any owned field differs from its schema
   default; CSS reveals the dot. */
.wsscd-inspector__section-dot {
	width: 6px;
	height: 6px;
	margin-inline-start: 4px;
	border-radius: 50%;
	background: var(--wsscd-color-primary);
	opacity: 0;
	transition: opacity 140ms ease-out;
	flex-shrink: 0;
}

.wsscd-inspector__section--changed .wsscd-inspector__section-dot {
	opacity: 1;
}


/* ============================================================
   Field row (label + control + optional token chips)
   ============================================================ */

/* Fields fade + collapse when a `visible_when` rule becomes unmet. */
.wsscd-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 600px;
	overflow: hidden;
	transition: opacity 140ms ease-out,
				max-height 180ms cubic-bezier(.2, .8, .2, 1),
				margin 180ms cubic-bezier(.2, .8, .2, 1);
}

.wsscd-field--hidden {
	opacity: 0;
	max-height: 0;
	margin: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 100ms ease-out,
				max-height 180ms cubic-bezier(.4, 0, .6, 1),
				margin 180ms cubic-bezier(.4, 0, .6, 1),
				visibility 0s linear 180ms;
}

.wsscd-field__label {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text);
	text-transform: capitalize;
}

.wsscd-field__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 18px;
}

.wsscd-field__label-row--toggle { min-height: 24px; }

/* Per-field reset — hover/focus-revealed. */
.wsscd-field__reset {
	padding: 0 4px;
	background: transparent;
	border: 0;
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 120ms ease, color 120ms ease;
}

.wsscd-field:hover .wsscd-field__reset,
.wsscd-field:focus-within .wsscd-field__reset,
.wsscd-field__reset:focus-visible { opacity: 1; }

.wsscd-field__reset:hover { color: var(--wsscd-color-primary); }

/* Field help — inline `?` trigger + popover. */
.wsscd-field__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 4px;
	padding: 0;
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border);
	border-radius: 50%;
	color: var(--wsscd-color-text-muted);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
}

.wsscd-field__help:hover,
.wsscd-field__help[aria-expanded="true"] {
	background: var(--wsscd-color-primary);
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-white);
}

.wsscd-field__help-popover {
	margin-top: 4px;
	padding: 8px 10px;
	background: var(--wsscd-color-text);
	color: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-md);
	font-size: 11px;
	line-height: 1.5;
	box-shadow: var(--wsscd-shadow-md);
}

/* Range slider — slider + tabular-num readout on one row. */
.wsscd-range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wsscd-range__slider {
	flex: 1;
	margin: 0;
	accent-color: var(--wsscd-color-primary);
}

.wsscd-range__readout {
	min-width: 44px;
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Unified inspector form controls. */
.wsscd-field input[type="text"],
.wsscd-field input[type="number"],
.wsscd-field select,
.wsscd-field textarea {
	box-sizing: border-box;
	min-height: 32px;
	padding: 6px 10px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-small);
	line-height: 1.4;
	box-shadow: none;
	outline: none;
	transition: border-color var(--wsscd-transition-fast) ease;
}

.wsscd-field textarea {
	min-height: 56px;
	resize: vertical;
}

.wsscd-field input[type="text"]:hover:not(:focus):not([readonly]),
.wsscd-field input[type="number"]:hover:not(:focus):not([readonly]),
.wsscd-field select:hover:not(:focus),
.wsscd-field textarea:hover:not(:focus):not([readonly]) {
	border-color: var(--wsscd-color-text-muted);
}

.wsscd-field input[type="text"]:focus,
.wsscd-field input[type="number"]:focus,
.wsscd-field select:focus,
.wsscd-field textarea:focus {
	border-color: var(--wsscd-color-primary);
	outline: none;
}

.wsscd-field input[readonly] {
	background: var(--wsscd-color-surface);
	cursor: not-allowed;
}

/* WordPress wp-color-picker (Iris) — appearance comes from WP core's
   wp-admin/css/color-picker.css. We add what's load-bearing: a full-width
   layout that fits the palette, a clean swatch, and the brand-bound indicator.

   The open Iris palette is a fixed ~255px square + slider. The Colors section
   is a 2-up grid (~170px cells), so an inline palette overflowed its cell —
   that was the "weird" layout. Color fields span the full inspector width so
   the palette fits, and the picker stacks vertically (swatch → input → palette)
   like the brand-bar picker. The holder stays INLINE (position: static): the
   inspector scrolls (overflow-y: auto), so an absolute/fixed popup gets clipped
   or mis-positions. Trade-off: an open palette pushes the fields below down
   until closed. */
.wsscd-field--color { grid-column: 1 / -1; }
.wsscd-field--color .wp-picker-container { display: block; }
.wsscd-field--color .wp-picker-input-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.wsscd-field--color .wp-picker-holder { position: static; }

/* Cleaner swatch: a consistent border so light/white values (e.g. #ffffff
   text colour) read as a chip, and drop WP's swatch/label divider line that
   looks like a stray border — especially on pale colours. */
.wsscd-field--color .wp-color-result.button {
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-sm);
}
.wsscd-field--color .wp-color-result-text {
	border-left: 0;
}

/* Brand-bound indicator — primary ring around the swatch chip flags that
   the value is a brand:<slug> token rather than a literal hex. */
.wsscd-field--color .wp-picker-container:has(input[data-brand-bound]) .wp-color-result.button::before {
	box-shadow: 0 0 0 2px var(--wsscd-color-primary);
}

.wsscd-field--toggle { flex-direction: row; }

.wsscd-field__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wsscd-font-size-base);
	cursor: pointer;
}


/* ============================================================
   Segmented control
   ============================================================ */

.wsscd-seg {
	display: inline-flex;
	padding: 2px;
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
}

.wsscd-seg__opt {
	flex: 1 1 0;
	padding: 5px 10px;
	background: transparent;
	border: none;
	border-radius: calc(var(--wsscd-radius-md) - 2px);
	box-shadow: none;
	outline: none;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-small);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--wsscd-transition-fast) ease,
				color var(--wsscd-transition-fast) ease;
}

.wsscd-seg__opt:hover:not([disabled]):not(.wsscd-seg__opt--active) {
	color: var(--wsscd-color-text);
	background: var(--wsscd-color-white);
}

.wsscd-seg__opt--active,
.wsscd-seg__opt--active:hover {
	background: var(--wsscd-color-white);
	color: var(--wsscd-color-primary);
	font-weight: 600;
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-seg__opt[disabled] { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   Position grid (2x2 anchor selector)
   ============================================================ */

.wsscd-pos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 110px;
	margin: 0;
	padding: 0;
	border: none;
}

.wsscd-pos-opt {
	aspect-ratio: 1 / 1;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	cursor: pointer;
	transition: border-color var(--wsscd-transition-fast) ease,
				background var(--wsscd-transition-fast) ease;
}

.wsscd-pos-opt:hover:not([disabled]):not(.wsscd-pos-opt--active) {
	border-color: var(--wsscd-color-text-muted);
}

.wsscd-pos-opt--active,
.wsscd-pos-opt--active:hover {
	background: var(--wsscd-color-primary-alpha-10);
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-primary);
}

.wsscd-pos-opt[disabled] { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   Icon picker
   ============================================================ */

.wsscd-icon-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: 4px;
	max-height: 220px;
	padding: 4px;
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	overflow-y: auto;
}

.wsscd-icon-picker__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 4px;
	background: var(--wsscd-color-white);
	border: 1px solid transparent;
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text);
	cursor: pointer;
	transition: background var(--wsscd-transition-fast) ease;
}

.wsscd-icon-picker__opt:hover:not([disabled]):not(.wsscd-icon-picker__opt--active) {
	background: var(--wsscd-color-surface);
}

/* Active state — subtle primary-tint background + primary border + primary
   icon color. Solid fill (like the position grid) reads too loud in a 30-tile
   icon grid; the soft accent stays legible at small size without dominating
   neighbors. */
.wsscd-icon-picker__opt--active,
.wsscd-icon-picker__opt--active:hover {
	background: var(--wsscd-color-primary-alpha-10);
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-primary);
}

.wsscd-icon-picker__opt[disabled] { opacity: 0.5; cursor: not-allowed; }
.wsscd-icon-picker__opt svg       { display: block; width: 100%; height: 100%; }


/* ============================================================
   Token chips (insert {token} into a text field)
   ============================================================ */

.wsscd-token-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height var(--wsscd-transition-base) ease,
				opacity 150ms ease;
}

.wsscd-field--chips-visible .wsscd-token-chips {
	max-height: 80px;
	opacity: 1;
}

.wsscd-token-chip {
	padding: 3px 8px;
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-pill);
	color: var(--wsscd-color-primary);
	font-family: var(--wsscd-font-family-mono);
	font-size: 11px;
	cursor: pointer;
	transition: border-color var(--wsscd-transition-fast) ease;
}

.wsscd-token-chip:hover:not([disabled]) { border-color: var(--wsscd-color-primary); }
.wsscd-token-chip[disabled]             { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   Drag affordance + empty-text hint inside the stage
   ============================================================ */

.wsscd-designer__stage .wsscd-visual--image-badge        { cursor: grab; }
.wsscd-designer__stage .wsscd-visual--image-badge:active { cursor: grabbing; }

.wsscd-designer__stage [data-stage] .wsscd-visual--placeholder-empty {
	outline: 1px dashed var(--wsscd-color-border);
	outline-offset: 4px;
}

.wsscd-designer__stage [data-stage] .wsscd-visual--placeholder-empty::after {
	content: attr(data-empty-text-hint);
	display: block;
	position: absolute;
	inset-inline-start: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
}


/* ============================================================
   Responsive — single-column layout below 1100px
   ============================================================ */

@media (max-width: 1100px) {
	.wsscd-designer__workspace { grid-template-columns: 1fr; }

	.wsscd-designer__col {
		position: static;
		min-height: auto;
		max-height: none;
		overflow-y: visible;
	}
}