/* Personalized content region */

.wp-block-commerce7-personalized-region,
.wp-block-commerce7-personalized-variant {
	box-sizing: border-box;
	width: 100%;
}

.commerce7-personalized-region__stack {
	display: grid;
	position: relative;
}

/*
 * Variants stack in the same grid cell. SSR marks the fallback variant active;
 * inline activation resolves the first matching condition before paint.
 */
.commerce7-personalized-variant {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;

	&[data-personalized-active] {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
}

/*
 * No-JS safety net: if no variant is active, show the first variant so content
 * is never blank for crawlers or when scripts fail.
 */
.commerce7-personalized-region__stack:not(:has(> .commerce7-personalized-variant[data-personalized-active])) > .commerce7-personalized-variant:first-child {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Editor */

.commerce7-personalized-region-editor {
	outline: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
	outline-offset: -1px;
}

.commerce7-personalized-variant-editor {
	position: relative;
	margin-block-end: 1rem;

	&:not(.is-selected):not(.has-child-selected) {
		outline: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
		outline-offset: -1px;
	}
}

.commerce7-personalized-variant-editor--hidden {
	display: none;
}

.commerce7-personalized-variant-editor__badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.commerce7-personalized-region-editor__help {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	color: #646970;
}

.commerce7-personalized-region-editor__help code {
	font-size: 0.75rem;
}