/**
 * Visuals Library admin page — "grouped shelves" layout.
 *
 * The page reads as: identity header band (with storefront-coverage pills),
 * an always-visible brand-color bar (slim swatch chips with click-to-edit
 * popovers), a sticky shelf toolbar (search + jump-to-type + sort), then one
 * horizontal "shelf" per visual type. Quiet, hairline-first chrome; each type
 * carries a single accent color (the colored shelf bar + card preview frame).
 *
 * Consumes shared tokens from shared/_variables.css and shared/_theme-colors.css.
 * BEM with the wsscd- prefix.
 */

/* ============================================================
   Layout tokens + per-type accents
   ============================================================ */

.wsscd-visuals {
	--wsscd-v-card-min:      240px;
	--wsscd-v-card-gap:      20px;
	/* Fixed (not min) so every card in a shelf is the same height — the
	   preview's rendered visual is scaled to fit this frame by JS
	   (fitCardPreviews), keeping cards uniform and the add-tile sane. */
	--wsscd-v-preview-h:     188px;
	/* Whole-card height = preview + the single-line body (name + recipe +
	   action ≈ 118px). The add-tile pins to this so it matches the cards even
	   when it wraps onto a row by itself (no card sibling to stretch against). */
	--wsscd-v-card-h:        calc(var(--wsscd-v-preview-h) + 118px);
}

/* Each type owns one accent. Soft tint is derived from it so a theme /
   scheme change recolors both in lockstep. Applied to shelves, cards, and
   the toolbar jump chips. */
.wsscd-shelf,
.wsscd-visual-card,
.wsscd-visuals__jump-chip,
.wsscd-visuals__add-link {
	--wsscd-fam:        var(--wsscd-color-text-muted);
	--wsscd-fam-soft:   color-mix(in srgb, var(--wsscd-fam) 14%, transparent);
}

.wsscd-shelf[data-type="image_badge"],
.wsscd-visual-card[data-type="image_badge"],
.wsscd-visuals__jump-chip[data-type="image_badge"],
.wsscd-visuals__add-link[data-type="image_badge"]      { --wsscd-fam: var(--wsscd-color-danger); }
.wsscd-shelf[data-type="summary_badge"],
.wsscd-visual-card[data-type="summary_badge"],
.wsscd-visuals__jump-chip[data-type="summary_badge"],
.wsscd-visuals__add-link[data-type="summary_badge"]    { --wsscd-fam: var(--wsscd-color-primary); }
.wsscd-shelf[data-type="tier_panel"],
.wsscd-visual-card[data-type="tier_panel"],
.wsscd-visuals__jump-chip[data-type="tier_panel"],
.wsscd-visuals__add-link[data-type="tier_panel"]       { --wsscd-fam: var(--wsscd-color-success); }
.wsscd-shelf[data-type="bogo_panel"],
.wsscd-visual-card[data-type="bogo_panel"],
.wsscd-visuals__jump-chip[data-type="bogo_panel"],
.wsscd-visuals__add-link[data-type="bogo_panel"]       { --wsscd-fam: var(--wsscd-color-pro); }
.wsscd-shelf[data-type="bundle_panel"],
.wsscd-visual-card[data-type="bundle_panel"],
.wsscd-visuals__jump-chip[data-type="bundle_panel"],
.wsscd-visuals__add-link[data-type="bundle_panel"]     { --wsscd-fam: var(--wsscd-color-warning); }
.wsscd-shelf[data-type="threshold_bar"],
.wsscd-visual-card[data-type="threshold_bar"],
.wsscd-visuals__jump-chip[data-type="threshold_bar"],
.wsscd-visuals__add-link[data-type="threshold_bar"]    { --wsscd-fam: var(--wsscd-color-accent); }


/* ============================================================
   Header — identity band
   ============================================================ */

.wsscd-visuals__header {
	display: flex;
	align-items: flex-start;
	gap: var(--wsscd-spacing-md);
	margin-bottom: var(--wsscd-spacing-base);
	padding: 18px 22px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.03);
}

.wsscd-visuals__heading {
	flex: 1 1 auto;
	min-width: 0;
}

.wsscd-visuals__title {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm-large);
	margin: 0 0 var(--wsscd-spacing-xxs);
	font-size: var(--wsscd-font-size-xxxl);
	font-weight: var(--wsscd-font-weight-bold);
	color: var(--wsscd-color-text);
	letter-spacing: -0.02em;
	line-height: var(--wsscd-line-height-tight);
}

.wsscd-visuals__count-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 21px;
	padding: 0 8px;
	border-radius: var(--wsscd-radius-pill);
	background: var(--wsscd-color-primary-alpha-10);
	color: var(--wsscd-color-primary);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

.wsscd-visuals__lede {
	margin: 0 0 var(--wsscd-spacing-md);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
	line-height: var(--wsscd-line-height-base);
}

/* Storefront coverage — a quiet stat strip. Each stat is a soft colored dot +
   a prominent number + a muted label, separated by hairline dividers so the
   row reads as one considered unit rather than scattered chips. */
.wsscd-visuals__coverage {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: var(--wsscd-spacing-sm);
}

.wsscd-visuals__cov {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-text-muted);
}

.wsscd-visuals__cov:not(:first-child) {
	margin-left: var(--wsscd-spacing-md);
	padding-left: var(--wsscd-spacing-md);
	border-left: 1px solid var(--wsscd-color-border-lighter);
}

.wsscd-visuals__cov b {
	font-size: var(--wsscd-font-size-medium-large);
	font-weight: var(--wsscd-font-weight-bold);
	color: var(--wsscd-color-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.wsscd-visuals__cov-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--wsscd-radius-full);
}

.wsscd-visuals__cov-dot--live    { background: var(--wsscd-color-success); box-shadow: 0 0 0 3px var(--wsscd-color-success-alpha-15); }
.wsscd-visuals__cov-dot--classic { background: var(--wsscd-color-warning); box-shadow: 0 0 0 3px var(--wsscd-color-warning-alpha-15); }
.wsscd-visuals__cov-dot--types   { background: var(--wsscd-color-primary); box-shadow: 0 0 0 3px var(--wsscd-color-primary-alpha-15); }

.wsscd-visuals__actions {
	flex-shrink: 0;
	padding-top: 2px;
}

/* "Add new" trigger — refined primary button that lifts on hover, matching the
   header's polish. (Overrides WP core .button-primary metrics.) */
.wsscd-visuals__add-toggle.button.button-primary {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border: none;
	border-radius: var(--wsscd-radius-lg);
	font-size: var(--wsscd-font-size-base);
	font-weight: var(--wsscd-font-weight-semibold);
	box-shadow: 0 2px 8px var(--wsscd-color-primary-alpha-25);
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.wsscd-visuals__add-toggle.button.button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px var(--wsscd-color-primary-alpha-30);
}


/* ============================================================
   "Add new" CTA + dropdown
   ============================================================ */

.wsscd-visuals__cta {
	position: relative;
}

.wsscd-visuals__cta-caret {
	margin-left: 6px;
	font-size: 10px;
	opacity: 0.7;
}

.wsscd-visuals__add-menu {
	position: absolute;
	top: 100%;
	right: 0;
	/* Popover level (not dropdown:100) so the open menu floats ABOVE the
	   sticky toolbar below it (z-sticky:200) instead of being painted over —
	   that overlap clipped the menu's lower items. */
	z-index: var(--wsscd-z-popover, 1100);
	margin: 6px 0 0;
	padding: 6px;
	min-width: 248px;
	/* Never run off a short viewport — scroll the menu instead of clipping. */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: var(--wsscd-shadow-lg);
	list-style: none;
}

.wsscd-visuals__add-menu[hidden] { display: none; }
.wsscd-visuals__add-menu li      { margin: 0; }

.wsscd-visuals__add-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--wsscd-radius-md);
	color: var(--wsscd-color-text);
	text-decoration: none;
	font-size: 13px;
	transition: background var(--wsscd-transition-fast) ease;
}

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

.wsscd-visuals__add-dot {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: var(--wsscd-radius-sm);
	/* Per-type color from the --wsscd-fam system on the parent add-link, so
	   each menu dot matches its Jump-to chip and shelf accent exactly. */
	background: var(--wsscd-fam, var(--wsscd-color-text-muted));
}

.wsscd-visuals__add-link .wsscd-visuals__classic-tag { margin-left: auto; }


/* ============================================================
   Block-cart surface note
   ============================================================ */

.wsscd-visuals__surface-note {
	display: flex;
	align-items: flex-start;
	gap: var(--wsscd-spacing-md);
	margin: 0 0 var(--wsscd-spacing-base);
	padding: var(--wsscd-padding-medium) var(--wsscd-padding-base);
	background: var(--wsscd-color-info-alpha-15);
	border: var(--wsscd-border-width) solid var(--wsscd-color-info-alpha-30);
	border-left: var(--wsscd-border-width-accent) solid var(--wsscd-color-info);
	border-radius: var(--wsscd-radius-md);
}

.wsscd-visuals__surface-note-icon {
	flex-shrink: 0;
	display: inline-flex;
	margin-top: 1px;
	color: var(--wsscd-color-info-dark);
}

.wsscd-visuals__surface-note-text {
	flex: 1 1 auto;
	margin: 0;
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-small);
	line-height: var(--wsscd-line-height-base);
}

.wsscd-visuals__surface-note-dismiss {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wsscd-icon-large);
	height: var(--wsscd-icon-large);
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-xl);
	line-height: 1;
	cursor: pointer;
	transition: var(--wsscd-transition-colors);
}

.wsscd-visuals__surface-note-dismiss:hover {
	background: var(--wsscd-color-info-alpha-25);
	color: var(--wsscd-color-text);
}

.wsscd-visuals__surface-note-dismiss:focus-visible {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}


/* ============================================================
   Brand colors bar — always-visible slim strip with per-swatch
   click-to-edit popovers (replaces the old collapsible panel)
   ============================================================ */

.wsscd-brand-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-base);
	margin-bottom: var(--wsscd-spacing-lg);
	padding: 13px 18px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.wsscd-brand-bar__label {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm-large);
}

.wsscd-brand-bar__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--wsscd-radius-md);
	background: var(--wsscd-color-primary-alpha-10);
	color: var(--wsscd-color-primary);
}

.wsscd-brand-bar__text {
	display: flex;
	flex-direction: column;
	line-height: var(--wsscd-line-height-tight);
}

.wsscd-brand-bar__text b {
	font-size: var(--wsscd-font-size-base);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-brand-bar__text span {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.wsscd-brand-bar__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wsscd-spacing-sm-large);
}

.wsscd-brand-swatch-wrap {
	position: relative;
}

.wsscd-brand-swatch {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 12px 6px 7px;
	border-radius: var(--wsscd-radius-pill);
	background: var(--wsscd-color-surface);
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--wsscd-transition-colors), box-shadow var(--wsscd-transition-fast) ease;
}

.wsscd-brand-swatch:hover {
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-color-border);
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-brand-swatch:focus-visible {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}

.wsscd-brand-swatch-wrap.is-open .wsscd-brand-swatch {
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-color-primary);
	box-shadow: var(--wsscd-ring-focus);
}

.wsscd-brand-swatch__chip {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--wsscd-radius-md);
	/* Stronger inset ring so light/bright swatches (e.g. a near-white or
	   neon-yellow accent) keep a visible edge against the white card instead
	   of bleeding into it. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.wsscd-brand-swatch__meta {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.15;
}

.wsscd-brand-swatch__name {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-brand-swatch__hex {
	font-size: 10.5px;
	color: var(--wsscd-color-text-muted);
	font-family: var(--wsscd-font-family-mono);
	text-transform: uppercase;
}

/* Inline edit popover (sibling of the trigger button). */
.wsscd-brand-pop {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: var(--wsscd-z-popover, 1100);
	width: 244px;
	padding: 14px;
	border-radius: var(--wsscd-radius-lg);
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	box-shadow: var(--wsscd-shadow-lg);
}

.wsscd-brand-swatch-wrap.is-open .wsscd-brand-pop { display: block; }

.wsscd-brand-pop::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 22px;
	width: 11px;
	height: 11px;
	background: var(--wsscd-color-white);
	border-left: 1px solid var(--wsscd-color-border-lighter);
	border-top: 1px solid var(--wsscd-color-border-lighter);
	transform: rotate(45deg);
}

.wsscd-brand-pop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wsscd-spacing-sm);
	margin-bottom: var(--wsscd-spacing-sm-large);
}

.wsscd-brand-pop__head b {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text);
}

.wsscd-brand-pop__token {
	font-size: 10px;
	font-family: var(--wsscd-font-family-mono);
	color: var(--wsscd-color-text-muted);
	background: var(--wsscd-color-surface-dark);
	padding: 2px 6px;
	border-radius: var(--wsscd-radius-sm);
}

/* Force the WP color picker (iris) open inline inside the popover so the
   merchant edits the color directly — no extra "Select color" click. The
   raw text input remains the value holder JS reads (data-brand-slot).
   NOTE: never stretch .iris-picker via CSS — Iris fixes its square/slider
   geometry to the width it's initialized with, so a CSS override desyncs the
   hue slider and overflows the popover. The width is set at init instead. */
.wsscd-brand-pop .wp-picker-container       { display: block; }
.wsscd-brand-pop .wp-color-result.button    { display: none; }
.wsscd-brand-pop .wp-picker-input-wrap      { display: flex !important; gap: 6px; margin-bottom: 8px; }
.wsscd-brand-pop .wp-picker-input-wrap label,
.wsscd-brand-pop .wp-picker-input-wrap .button { flex-shrink: 0; }
.wsscd-brand-pop .wp-picker-holder          { display: block !important; }
.wsscd-brand-pop .wp-color-picker           { width: 100%; }

.wsscd-brand-bar__spacer { margin-left: auto; }

.wsscd-brand-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-md);
}

/* Reset-to-defaults icon button — a quiet ghost square that lights up on hover,
   matching the swatch chips' resting/hover treatment. */
.wsscd-brand-bar__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--wsscd-color-surface);
	border: 1px solid transparent;
	border-radius: var(--wsscd-radius-md);
	color: var(--wsscd-color-text-muted);
	cursor: pointer;
	transition: var(--wsscd-transition-colors), box-shadow var(--wsscd-transition-fast) ease;
}

.wsscd-brand-bar__reset:hover {
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-color-border);
	color: var(--wsscd-color-text);
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-brand-bar__reset:focus-visible {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}


/* ============================================================
   Shelf toolbar — sticky search + jump-to-type + sort
   ============================================================ */

.wsscd-visuals__toolbar {
	position: sticky;
	top: var(--wsscd-wp-admin-bar-height-desktop, 32px);
	z-index: var(--wsscd-z-sticky, 200);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-sm-large);
	margin-bottom: var(--wsscd-spacing-xl);
	padding: 10px 14px;
	background: color-mix(in srgb, var(--wsscd-color-surface) 90%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.wsscd-visuals__search {
	position: relative;
}

.wsscd-visuals__search-icon {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: var(--wsscd-color-text-muted);
	pointer-events: none;
}

.wsscd-visuals__search input {
	width: 260px;
	height: 34px;
	padding: 0 10px 0 32px;
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	background: var(--wsscd-color-white);
	transition: var(--wsscd-form-input-transition);
}

.wsscd-visuals__search input:focus {
	outline: none;
	border-color: var(--wsscd-color-primary);
	box-shadow: var(--wsscd-ring-focus);
}

.wsscd-visuals__search:focus-within .wsscd-visuals__search-icon {
	color: var(--wsscd-color-primary);
}

.wsscd-visuals__jump {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.wsscd-visuals__jump-label {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.wsscd-visuals__jump-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-pill);
	color: var(--wsscd-color-text-light);
	font-size: 12px;
	font-weight: var(--wsscd-font-weight-medium);
	cursor: pointer;
	transition: var(--wsscd-transition-colors);
}

.wsscd-visuals__jump-chip:hover { border-color: var(--wsscd-color-border-dark); color: var(--wsscd-color-text); }
.wsscd-visuals__jump-chip:focus-visible { outline: none; box-shadow: var(--wsscd-ring-focus); }

.wsscd-visuals__jump-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-fam, var(--wsscd-color-text-muted));
}

.wsscd-visuals__toolbar-spacer { margin-left: auto; }

.wsscd-visuals__sort select {
	height: 34px;
	padding: 0 8px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	font-size: 12px;
	cursor: pointer;
	transition: var(--wsscd-form-input-transition);
}

.wsscd-visuals__sort select:hover { border-color: var(--wsscd-color-border-dark); }
.wsscd-visuals__sort select:focus { outline: none; border-color: var(--wsscd-color-primary); box-shadow: var(--wsscd-ring-focus); }


/* ============================================================
   Shelves
   ============================================================ */

.wsscd-shelf {
	margin-bottom: var(--wsscd-spacing-xxl);
	scroll-margin-top: 72px;
}

.wsscd-shelf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Smaller row-gap keeps the status close when it wraps under the title on
	   narrow widths; the larger column-gap spaces the inline cluster. */
	gap: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm-large);
	margin-bottom: var(--wsscd-spacing-md);
}

.wsscd-shelf__bar {
	width: 4px;
	height: 22px;
	border-radius: var(--wsscd-radius-pill);
	background: var(--wsscd-fam);
}

.wsscd-shelf__title {
	font-size: var(--wsscd-font-size-medium-large);
	font-weight: var(--wsscd-font-weight-bold);
	color: var(--wsscd-color-text);
	letter-spacing: -0.01em;
}

.wsscd-shelf__count {
	padding: 1px 9px;
	background: var(--wsscd-color-surface-dark);
	color: var(--wsscd-color-text-muted);
	border-radius: var(--wsscd-radius-pill);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-bold);
	font-variant-numeric: tabular-nums;
}

.wsscd-shelf__status {
	/* Push the storefront-status indicator to the far right so the shelf's
	   identity (accent bar + title + count) reads as one left cluster and the
	   "where it shows" meta sits apart. */
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
}

.wsscd-shelf__status-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--wsscd-radius-full);
}

.wsscd-shelf__status--live          { color: var(--wsscd-color-success-dark); }
.wsscd-shelf__status--live .wsscd-shelf__status-dot { background: var(--wsscd-color-success); }
.wsscd-shelf__status--classic       { color: var(--wsscd-color-info-dark); }
.wsscd-shelf__status--classic .wsscd-shelf__status-dot { background: var(--wsscd-color-info); }

/* ============================================================
   Pro gating — tier / bundle / threshold visual types are Pro.
   Locked shelves show a PRO pill and route every action to upgrade.
   ============================================================ */
.wsscd-visuals__pro-tag,
.wsscd-shelf__pro {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: var(--wsscd-radius-pill, 100px);
	background: var(--wsscd-color-pro, #7c3aed);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
/* Hide the duplicate action on locked shelves (server rejects it anyway). */
.wsscd-shelf--locked .wsscd-visual-card__icon-btn[data-action="duplicate"] { display: none; }
/* Soften the locked previews so they read as "look but can't build". */
.wsscd-shelf--locked .wsscd-visual-card__preview .wsscd-visual { opacity: 0.92; }
/* Upgrade-styled inline add tile. */
.wsscd-shelf__add--locked {
	border-color: color-mix(in srgb, var(--wsscd-color-pro, #7c3aed) 40%, var(--wsscd-color-border-light));
	color: var(--wsscd-color-pro, #7c3aed);
}
.wsscd-shelf__add--locked:hover {
	border-color: var(--wsscd-color-pro, #7c3aed);
	background: color-mix(in srgb, var(--wsscd-color-pro, #7c3aed) 7%, transparent);
}
.wsscd-shelf__add--locked .wsscd-shelf__add-plus { color: var(--wsscd-color-pro, #7c3aed); }

/* Responsive wrapping grid — every card in the group is visible, no
   horizontal scrolling. `auto-fill` keeps cards at a steady width (a lone
   card won't stretch to the full row). */
.wsscd-shelf__rail {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--wsscd-v-card-min), 1fr));
	gap: var(--wsscd-v-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ============================================================
   Cards
   ============================================================ */

.wsscd-visual-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
				box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
				border-color 200ms ease;
}

.wsscd-visual-card:hover,
.wsscd-visual-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--wsscd-color-border);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Origin tint — custom (the merchant's) visuals carry a faint primary-tinted
   frame so they read as "yours" against the neutral built-in defaults. Pairs
   with the primary "Custom" badge; defaults keep the plain hairline. A border
   tint (not a fill) frames the whole card evenly and never looks "selected". */
.wsscd-visual-card--custom {
	border-color: color-mix(in srgb, var(--wsscd-color-primary) 28%, var(--wsscd-color-border-lighter));
}

.wsscd-visual-card--custom:hover,
.wsscd-visual-card--custom:focus-within {
	border-color: color-mix(in srgb, var(--wsscd-color-primary) 45%, var(--wsscd-color-border));
}

/* Preview — a soft top-spotlight backdrop makes the (fit-scaled) visual read
   as the hero. A faint family-tinted wash blooms on hover to tie the card to
   its shelf without shouting. */
.wsscd-visual-card__preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--wsscd-v-preview-h);
	padding: 18px;
	background: radial-gradient(120% 90% at 50% 6%, var(--wsscd-color-white) 0%, var(--wsscd-color-surface) 72%);
	border-bottom: 1px solid var(--wsscd-color-border-lighter);
	overflow: hidden;
}

.wsscd-visual-card__preview::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 58% at 50% 46%, var(--wsscd-fam), transparent 70%);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

.wsscd-visual-card:hover .wsscd-visual-card__preview::before { opacity: 0.07; }

/* Neutralize storefront absolute positioning, then let JS scale the rendered
   visual to fit this fixed frame (fitCardPreviews in visuals-library.js).
   transform-origin centers the down-scaled visual inside the flex-centred
   frame. The visual renders at its natural size first so the scaler can
   measure it. */
.wsscd-visual-card__preview .wsscd-visual {
	position: relative !important;
	inset: auto !important;
	z-index: 1;
	transform-origin: center;
}

/* Panels & bars are built for full-width storefront surfaces — render them at
   a consistent storefront-ish width so their internal layout (rows, tables,
   pills) looks right, then the fit-scaler shrinks the whole thing uniformly to
   fit the card. Badges stay at their natural (small) size. */
.wsscd-visual-card__preview .wsscd-visual--tier-panel,
.wsscd-visual-card__preview .wsscd-visual--bogo-panel,
.wsscd-visual-card__preview .wsscd-visual--bundle-panel,
.wsscd-visual-card__preview .wsscd-visual--threshold-bar {
	width: 260px;
	flex: 0 0 auto;
}

/* Full-area click target — overlays the preview so the whole thumbnail opens
   the editor, while the badge / hover buttons sit above it (sibling, not
   nested — keeps the markup valid: no buttons inside an anchor). */
.wsscd-visual-card__preview-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.wsscd-visual-card__preview-link:focus-visible {
	outline: none;
	box-shadow: inset var(--wsscd-ring-focus);
}

/* Seeded badge — frosted-glass pill so it sits over any artwork legibly. */
.wsscd-visual-card__badge {
	position: absolute;
	top: 11px;
	left: 11px;
	z-index: 3;
}

/* Origin badge — frosted pill marking where a visual came from. "Default"
   (lock) = shipped/read-only; "Custom" (pencil) = the merchant's own/editable.
   Differentiated by icon + label, with only a quiet tone shift so it stays
   calm: defaults recede in muted grey, customs carry a subtle primary accent. */
.wsscd-visual-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px 3px 7px;
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--wsscd-radius-pill);
	color: var(--wsscd-color-text-light);
	font-size: 10px;
	font-weight: var(--wsscd-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wsscd-visual-card__chip svg {
	flex-shrink: 0;
	width: 11px;
	height: 11px;
}

.wsscd-visual-card__chip--default { color: var(--wsscd-color-text-muted); }
.wsscd-visual-card__chip--custom  { color: var(--wsscd-color-primary); }

/* Hover-reveal secondary actions (duplicate / delete) — frosted icon buttons
   that rise and fade in together. */
.wsscd-visual-card__hover {
	position: absolute;
	inset: auto 11px 11px auto;
	z-index: 3;
	display: flex;
	gap: 6px;
	opacity: 0;
	transform: translateY(6px) scale(0.96);
	transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wsscd-visual-card:hover .wsscd-visual-card__hover,
.wsscd-visual-card:focus-within .wsscd-visual-card__hover {
	opacity: 1;
	transform: none;
}

.wsscd-visual-card__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--wsscd-radius-lg);
	color: var(--wsscd-color-text-light);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
	text-decoration: none;
	transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.wsscd-visual-card__icon-btn:hover {
	background: var(--wsscd-color-white);
	color: var(--wsscd-color-primary);
	transform: translateY(-1px);
}

.wsscd-visual-card__icon-btn--danger:hover {
	background: var(--wsscd-color-danger-alpha-15);
	border-color: var(--wsscd-color-danger);
	color: var(--wsscd-color-danger-dark);
}

.wsscd-visual-card__body {
	display: flex;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.wsscd-visual-card__name {
	margin: 0;
	color: var(--wsscd-color-text);
	font-size: 14.5px;
	font-weight: var(--wsscd-font-weight-semibold);
	letter-spacing: -0.01em;
	line-height: var(--wsscd-line-height-tight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsscd-visual-card__recipe {
	margin: 4px 0 0;
	color: var(--wsscd-color-text-muted);
	font-size: 12px;
	line-height: var(--wsscd-line-height-base);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsscd-visual-card__recipe-hint { opacity: 0.8; }

/* Action — a quiet ghost button at rest that lights up in the card's family
   color on hover, with a trailing arrow that nudges right. */
.wsscd-visual-card__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 34px;
	margin-top: 14px;
	background: var(--wsscd-color-surface);
	border: 1px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-lg);
	color: var(--wsscd-color-text-light);
	font-size: 12.5px;
	font-weight: var(--wsscd-font-weight-semibold);
	text-decoration: none;
	transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.wsscd-visual-card__open::after {
	content: "\2192"; /* → */
	font-weight: 400;
	transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wsscd-visual-card:hover .wsscd-visual-card__open {
	background: color-mix(in srgb, var(--wsscd-fam) 12%, transparent);
	border-color: transparent;
	color: color-mix(in srgb, var(--wsscd-fam), #000 22%);
}

.wsscd-visual-card:hover .wsscd-visual-card__open::after { transform: translateX(3px); }

.wsscd-visual-card__open:focus-visible {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}


/* ============================================================
   Persistent "classic cart only" constraint tag
   ============================================================ */

.wsscd-visuals__classic-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
	padding: var(--wsscd-spacing-xxs) var(--wsscd-spacing-sm);
	background: var(--wsscd-color-info-alpha-15);
	color: var(--wsscd-color-info-dark);
	border: var(--wsscd-border-width) solid var(--wsscd-color-info-alpha-30);
	border-radius: var(--wsscd-radius-pill);
	font-size: 11px;
	font-weight: var(--wsscd-font-weight-medium);
	line-height: var(--wsscd-line-height-tight);
	white-space: nowrap;
	cursor: help;
}

.wsscd-visuals__classic-tag::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-color-info);
}


/* ============================================================
   Inline "add new {type}" tile (last item in each rail)
   ============================================================ */

/* The cell is the grid column; the anchor stretches to fill it so the dashed
   tile matches the height of the tallest card in the rail. */
.wsscd-shelf__add-cell {
	display: flex;
}

.wsscd-shelf__add {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-spacing-sm-large);
	/* Match a full card's height (preview + body) so the tile lines up with the
	   cards whether it shares their row or wraps onto its own. */
	min-height: var(--wsscd-v-card-h);
	padding: 20px;
	border: 2px dashed var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-xl);
	background: color-mix(in srgb, var(--wsscd-color-white) 60%, transparent);
	color: var(--wsscd-color-text-muted);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: var(--wsscd-font-weight-semibold);
	text-align: center;
	transition: var(--wsscd-transition-colors);
}

.wsscd-shelf__add:hover,
.wsscd-shelf__add:focus-visible {
	border-color: var(--wsscd-fam);
	color: var(--wsscd-fam);
	background: var(--wsscd-fam-soft);
	outline: none;
}

.wsscd-shelf__add-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-color-surface-dark);
	font-size: 21px;
	line-height: 1;
}

.wsscd-shelf__add:hover .wsscd-shelf__add-plus { background: var(--wsscd-color-white); }


/* ============================================================
   Empty states
   ============================================================ */

.wsscd-visuals__empty {
	padding: 64px 40px;
	background: var(--wsscd-color-white);
	border: 1px dashed var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-lg);
	text-align: center;
	color: var(--wsscd-color-text-muted);
}

.wsscd-visuals__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	color: var(--wsscd-color-text-muted);
	background: var(--wsscd-color-surface);
	border-radius: var(--wsscd-radius-full);
}

.wsscd-visuals__empty-title {
	margin: 0 0 10px;
	color: var(--wsscd-color-text);
	font-size: 18px;
	font-weight: var(--wsscd-font-weight-semibold);
}

.wsscd-visuals__empty-text {
	max-width: 480px;
	margin: 0 auto 12px;
	font-size: 13px;
	line-height: 1.55;
}

.wsscd-visuals__empty-hint {
	max-width: 480px;
	margin: 0 auto 20px;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.75;
}

.wsscd-visuals__empty-actions {
	display: inline-flex;
	gap: 8px;
}

/* Global "no search matches" state (injected by JS when search empties every shelf). */
.wsscd-visuals__no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 24px;
	background: var(--wsscd-color-white);
	border: 1px dashed var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-lg);
	text-align: center;
}

.wsscd-visuals__no-results-text {
	margin: 0;
	color: var(--wsscd-color-text-muted);
	font-size: 13px;
}


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

@media (max-width: 782px) {
	.wsscd-visuals__header       { flex-direction: column; }
	.wsscd-visuals__actions      { align-self: flex-start; }
	.wsscd-visuals__toolbar      { position: static; }
	.wsscd-visuals__search input { width: 100%; }
	.wsscd-brand-bar__spacer     { display: none; }
}