/**
 * Order Limit console — one stylesheet, one design.
 *
 * It follows WordPress rather than inventing a look of its own:
 *
 * - Type: WooCommerce's own — the admin's system font stack (Segoe UI on
 *   Windows, San Francisco on a Mac, Roboto on Android…) and the sizes
 *   WooCommerce Home uses for each role (see the tokens below).
 * - Colour: the accent is the admin colour scheme the person picked in their
 *   profile (--wp-admin-theme-color), so the console matches their menu.
 * - Icons: WordPress's own icon set, from @wordpress/icons.
 * - Controls: one height (40px), one border, one radius, one focus ring —
 *   every input, dropdown, search box and button is drawn from the same rules.
 * - Width: two widths, each set by what the page holds, all centred.
 *   --wcol-max  1200px  the header, every tab and the template library, so
 *                       nothing moves when you switch between them. Limits
 *                       needs the room for its table; Messages and Settings
 *                       put the work in a reading column of about 830px (like
 *                       the builder) with a 340px help column beside it.
 *   --wcol-form  800px  the builder: one column of fields.
 *   Text inside a box never runs wider than 75 characters (--wcol-measure).
 * - Boxes: everything sits in white boxes on the grey admin page, each with
 *   its title inside (20px), the way WooCommerce Home draws its cards. Cards
 *   inside a box (a template, a Pro feature) are one step quieter. Small
 *   uppercase labels are only used inside a box.
 * - Pro: its own colour (--wcol-pro, Xfinity Soft's navy), used for nothing
 *   else, so everything Pro reads as Pro at a glance and is never mistaken
 *   for a free action. Pro features show inside the section they belong to
 *   (ProGroup chips), and all together in a Pro box at the end of the page.
 *
 * Everything is scoped under .wcol-admin, except the walkthrough (portalled
 * to <body>) and the two places drawn outside the console: the product and
 * category panels, and the deactivation card. They come last.
 *
 * Sections:
 *  1. Tokens            8. Buttons & icon buttons   15. Builder
 *  2. Base              9. Badges, tiles, callouts  16. Messages
 *  3. Page frame       10. Switch & status          17. Settings
 *  4. Header           11. Limits toolbar           18. Pro
 *  5. Summary bar      12. Limits table             19. Dialog, toast, save bar
 *  6. Tabs             13. "Why isn't it working?"  20. Motion
 *  7. Cards & fields   14. Template library         21. Tablet & phone
 *                      22. Product & category panels  23. Deactivation card
 */

/* =====================================================================
   1. Tokens — one set for every place the plugin draws: the console, the
      walkthrough, the product and category panels, and the Plugins screen.
   ===================================================================== */

.wcol-admin,
.wcol-tour,
.wcol-panel-wrap,
.woocommerce_variation .wcol-vrow,
.wcol-dx {
	/* Accent: the person's admin colour scheme. */
	--wcol-accent: var(--wp-admin-theme-color, #3858e9);
	--wcol-accent-dark: var(--wp-admin-theme-color-darker-10, #2145e6);
	--wcol-accent-soft: #eef1fd;
	--wcol-accent-line: #c9d2f8;

	/* WordPress greys. */
	--wcol-text: #1e1e1e;
	--wcol-text-2: #50575e;
	--wcol-text-3: #757575;
	--wcol-line-input: #949494;
	--wcol-line: #dcdcde;
	--wcol-line-soft: #f0f0f1;
	--wcol-surface: #fff;
	--wcol-surface-2: #f6f7f7;
	--wcol-page: #f0f0f1;

	/* WordPress notice colours. */
	--wcol-ok: #00a32a;
	--wcol-ok-text: #007017;
	--wcol-ok-soft: #edfaef;
	--wcol-warn: #dba617;
	--wcol-warn-text: #614a00;
	--wcol-warn-soft: #fcf9e8;
	--wcol-warn-line: #f2df9a;
	--wcol-error: #d63638;
	--wcol-error-text: #b32d2e;
	--wcol-error-soft: #fcf0f1;

	/* Pro: Xfinity Soft's own navy (xfinitysoft.com), used for Pro and for
	   nothing else. Navy, not the brand's bright blue, because bright blue is
	   already the admin accent for every free action. */
	--wcol-pro: #0e235a;
	--wcol-pro-dark: #0a0e19;
	--wcol-pro-soft: #eef1f7;
	--wcol-pro-line: #cfd6e8;

	/* Type: WooCommerce's font and sizes, by role, as measured on WooCommerce
	   Home (the admin's own system font; nothing is loaded):
	   page   23px/400  the page title (WooCommerce Home, WordPress h1)
	   xl     20px/400  the title of a box: every card, section and panel
	                    (a dialog title is 20px/600, as in WordPress modals)
	   lg     16px/600  the title of a card in a grid (a template, a feature);
	                    16px/400 for the builder's one-sentence summary
	   md     14px      everything you read: text, labels, help, callouts, lists
	   sm     13px      the one-line intro under a box title, and the controls:
	                    buttons, tabs, table, toolbar, chips, menus, links
	                    back to a list (as in WooCommerce's list tables)
	   xs     12px      badges, counts, tokens, tiny labels */
	--wcol-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--wcol-mono: Menlo, Consolas, Monaco, "Liberation Mono", monospace;
	--wcol-fs-page: 23px;
	--wcol-fs-xs: 12px;
	--wcol-fs-sm: 13px;
	--wcol-fs-md: 14px;
	--wcol-fs-lg: 16px;
	--wcol-fs-xl: 20px;

	/* Shape. */
	--wcol-r-sm: 2px;
	--wcol-r: 4px;
	--wcol-r-lg: 8px;
	--wcol-control: 40px;
	--wcol-shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 32px -8px rgba(0, 0, 0, 0.2);

	/* Rhythm. */
	--wcol-gutter: 32px;
	--wcol-card-pad: 24px;
	--wcol-max: 1200px;
	--wcol-aside: 340px;
	--wcol-form: 800px;
	--wcol-measure: 75ch;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.wcol-admin,
	.wcol-tour,
	.wcol-panel-wrap,
	.woocommerce_variation .wcol-vrow,
	.wcol-dx {
		--wcol-accent-soft: color-mix(in srgb, var(--wcol-accent) 8%, #fff);
		--wcol-accent-line: color-mix(in srgb, var(--wcol-accent) 28%, #fff);
	}
}

/* =====================================================================
   2. Base
   ===================================================================== */

.wcol-admin {
	box-sizing: border-box;
	min-height: calc(100vh - 32px);
	background: var(--wcol-page);
	color: var(--wcol-text);
	font-family: var(--wcol-font);
	font-size: var(--wcol-fs-md);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	h1,
	h2,
	h3,
	p {
		margin: 0;
		padding: 0;
		color: inherit;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		margin: 0;
	}

	a {
		color: var(--wcol-accent);
	}

	a:hover {
		color: var(--wcol-accent-dark);
	}

	code {
		font-family: var(--wcol-mono);
		font-size: var(--wcol-fs-xs);
		padding: 1px 4px;
		border-radius: var(--wcol-r-sm);
		background: var(--wcol-line-soft);
	}

	.wcol-ico {
		flex: none;
		fill: currentColor;
	}

	/* Keyboard focus, one ring everywhere. */
	:focus-visible {
		outline: 2px solid var(--wcol-accent);
		outline-offset: 2px;
	}

	/* The small uppercase heading used above groups. */
	.wcol-eyebrow {
		margin: 0 0 12px;
		font-size: var(--wcol-fs-xs);
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wcol-text-3);
	}
}

/* =====================================================================
   3. Page frame
   ===================================================================== */

.wcol-admin {
	.wcol-body {
		max-width: calc(var(--wcol-max) + 2 * var(--wcol-gutter));
		margin: 0 auto;
		padding: 24px var(--wcol-gutter) 48px;
	}

	.wcol-tab {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* Messages and Settings: the work in a reading column, with help beside
	   it that stays in view while the page scrolls, then Pro below both. */
	.wcol-page {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.wcol-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--wcol-aside);
		align-items: start;
		gap: 24px;
	}

	.wcol-layout__main,
	.wcol-layout__aside {
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-width: 0;
	}

	.wcol-layout__aside {
		position: sticky;
		top: 48px;
	}

	/* Loading. */
	.wcol-boot {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		min-height: 220px;
		padding: 48px 24px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		color: var(--wcol-text-2);
		font-size: var(--wcol-fs-md);

		.components-spinner {
			margin: 0;
		}
	}

	/* The bar above the library and the builder: back link, where you are. */
	.wcol-viewbar {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 16px;
		min-height: 40px;
	}

	.wcol-viewbar--narrow {
		max-width: var(--wcol-form);
		margin-left: auto;
		margin-right: auto;
	}

	.wcol-back {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		min-height: 40px;
		margin-left: -6px;
		padding: 0 8px 0 2px;
		background: none;
		border: 0;
		border-radius: var(--wcol-r-sm);
		font: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-accent);
		cursor: pointer;

		&:hover {
			background: var(--wcol-accent-soft);
		}
	}

	/* "/ Add limit" takes the free room, so whatever follows it (the limit's
	   ID, "Show me around", "Close") sits at the end of the bar. */
	.wcol-crumb {
		flex: 1 1 auto;
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	.wcol-idtag {
		padding: 2px 8px;
		border-radius: 999px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		font-size: var(--wcol-fs-xs);
		color: var(--wcol-text-2);
		font-variant-numeric: tabular-nums;
	}

	/* "Show me around" and "Close": quiet text buttons, the same size as the
	   crumb. The icon's own empty edge plus a 2px gap leaves about 8px
	   between icon and word; the 1px drop puts the icon on the middle of the
	   letters rather than the middle of the line box. */
	.wcol-viewbar__action {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		min-height: 40px;
		padding: 0 10px 0 6px;
		background: none;
		border: 0;
		border-radius: var(--wcol-r-sm);
		font: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-text-2);
		cursor: pointer;

		svg {
			flex: none;
			transform: translateY(1px);
		}

		&:hover {
			color: var(--wcol-accent);
			background: var(--wcol-accent-soft);
		}
	}
}

/* =====================================================================
   4. Header
   ===================================================================== */

.wcol-admin {
	.wcol-head {
		background: var(--wcol-surface);
		border-bottom: 1px solid var(--wcol-line);
		padding: 20px var(--wcol-gutter) 0;
	}

	.wcol-head__row,
	.wcol-summary,
	.wcol-tabs {
		max-width: var(--wcol-max);
		margin-left: auto;
		margin-right: auto;
	}

	.wcol-head__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 40px;
	}

	.wcol-head__title {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;

		.wcol-mark {
			color: var(--wcol-accent);
		}

		h1 {
			font-size: var(--wcol-fs-page);
			font-weight: 400;
			line-height: 1.3;
			color: var(--wcol-text);
		}
	}

	.wcol-head__actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

/* =====================================================================
   5. Summary bar
   ===================================================================== */

.wcol-admin {
	.wcol-summary {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px 28px;
		margin-top: 16px;
		padding: 12px 20px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-metric {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		font: inherit;
		color: var(--wcol-text);
		text-align: left;

		b {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			line-height: 1.3;
			font-variant-numeric: tabular-nums;
		}

		span {
			font-size: var(--wcol-fs-sm);
			line-height: 1.4;
			color: var(--wcol-text-2);
		}
	}

	.wcol-metric--link {
		cursor: pointer;
		border-radius: var(--wcol-r-sm);

		b {
			color: var(--wcol-warn-text);
		}

		&:hover span {
			color: var(--wcol-accent);
			text-decoration: underline;
		}
	}

	.wcol-summary__vr {
		align-self: stretch;
		width: 1px;
		background: var(--wcol-line);
	}

	.wcol-summary__fold {
		display: none;
	}
}

/* =====================================================================
   6. Tabs — natural width, left aligned, as in WordPress.
   ===================================================================== */

.wcol-admin {
	.wcol-tabs {
		margin-top: 12px;

		.components-tab-panel__tabs {
			display: flex;
			gap: 4px;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.components-tab-panel__tabs-item {
			position: relative;
			flex: none;
			height: 48px;
			margin: 0;
			padding: 0 12px;
			border: 0;
			border-radius: 0;
			background: none;
			box-shadow: none;
			font-family: inherit;
			font-size: var(--wcol-fs-sm);
			font-weight: 500;
			color: var(--wcol-text-2);
			white-space: nowrap;

			&::after {
				content: "";
				position: absolute;
				left: 12px;
				right: 12px;
				bottom: 0;
				height: 3px;
				border-radius: 3px 3px 0 0;
				background: transparent;
				transition: background 0.15s ease;
			}

			&:hover {
				color: var(--wcol-accent);
			}

			&.is-active {
				color: var(--wcol-text);
				font-weight: 600;

				&::after {
					background: var(--wcol-accent);
				}
			}

			&:focus-visible {
				outline: 2px solid var(--wcol-accent);
				outline-offset: -2px;
				box-shadow: none;
			}
		}

		.components-tab-panel__tabs-item:first-child {
			margin-left: -12px;
		}
	}
}

/* =====================================================================
   7. Cards & fields
   ===================================================================== */

.wcol-admin {
	.wcol-card {
		position: relative;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		padding: var(--wcol-card-pad);

		> * + * {
			margin-top: 16px;
		}

		> h3 {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			line-height: 1.4;
			color: var(--wcol-text);
		}

		> h3 + .wcol-card__sub {
			margin-top: 4px;
		}
	}

	/* A card whose content runs to its edges (the limits table). The table
	   measures this card, not the window. */
	.wcol-card--flush {
		padding: 0;
		overflow: hidden;
		container-type: inline-size;
	}

	.wcol-card__sub {
		max-width: var(--wcol-measure);
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	.wcol-card__foot {
		padding-top: 16px;
		border-top: 1px solid var(--wcol-line-soft);
	}

	/* A section is a box like any card, with its title inside — the way
	   WooCommerce Home draws "Inbox" or "Stats overview". Cards in it (a
	   template, a Pro feature) are drawn one step quieter than the box. */
	.wcol-section {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: var(--wcol-card-pad);
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	/* A Pro section: the same box, marked with Pro's colour along the top. */
	.wcol-section--pro {
		border-color: var(--wcol-pro-line);
		box-shadow: inset 0 3px 0 var(--wcol-pro);
	}

	.wcol-sechead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px 24px;
	}

	.wcol-sechead__text {
		min-width: 0;

		h2 {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			line-height: 1.4;
			color: var(--wcol-text);
		}

		p {
			max-width: var(--wcol-measure);
			margin-top: 2px;
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}

	.wcol-label {
		display: block;
		margin: 0 0 8px;
		font-size: var(--wcol-fs-md);
		font-weight: 600;
		color: var(--wcol-text);
	}

	.wcol-help {
		max-width: var(--wcol-measure);
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);
	}

	.wcol-help--warn {
		color: var(--wcol-warn-text);
	}

	.wcol-error {
		display: flex;
		gap: 6px;
		font-size: var(--wcol-fs-md);
		font-weight: 500;
		color: var(--wcol-error-text);

		&::before {
			content: "";
			flex: none;
			width: 16px;
			height: 16px;
			margin-top: 2px;
			border-radius: 50%;
			background: var(--wcol-error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
		}
	}

	.wcol-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcol-row__grow {
		flex: 1;
		min-width: 200px;
	}

	.wcol-inline {
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text);
		white-space: nowrap;
	}

	.wcol-field + .wcol-field {
		margin-top: 16px;
	}

	/* ---------- one control style ---------- */

	.components-base-control,
	.components-base-control__field {
		margin-bottom: 0;
	}

	.components-base-control__label,
	.components-base-control .components-base-control__label {
		display: block;
		margin: 0 0 8px;
		font-size: var(--wcol-fs-md);
		font-weight: 600;
		line-height: 1.4;
		text-transform: none;
		letter-spacing: 0;
		color: var(--wcol-text);
	}

	.components-base-control__help {
		margin: 8px 0 0;
		font-size: var(--wcol-fs-md);
		font-style: normal;
		color: var(--wcol-text-2);
	}

	input.components-text-control__input,
	textarea.components-textarea-control__input,
	.wcol-select__button,
	.wcol-picker__box,
	.wcol-search {
		width: 100%;
		margin: 0;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line-input);
		border-radius: var(--wcol-r-sm);
		box-shadow: none;
		color: var(--wcol-text);
		font-family: inherit;
		font-size: var(--wcol-fs-md);
		line-height: 1.4;
		transition: border-color 0.1s ease, box-shadow 0.1s ease;
	}

	input.components-text-control__input {
		height: var(--wcol-control);
		padding: 0 12px;
	}

	.wcol-select__button,
	.wcol-picker__box,
	.wcol-search {
		min-height: var(--wcol-control);
	}

	textarea.components-textarea-control__input {
		display: block;
		min-height: 72px;
		padding: 10px 12px;
		resize: vertical;
		field-sizing: content;
	}

	input.components-text-control__input:hover,
	textarea.components-textarea-control__input:hover {
		border-color: var(--wcol-text);
	}

	input.components-text-control__input:focus,
	textarea.components-textarea-control__input:focus,
	.wcol-select__button:focus-visible,
	.wcol-select.is-open .wcol-select__button,
	.wcol-picker__box:focus-within,
	.wcol-search:focus-within {
		outline: none;
		border-color: var(--wcol-accent);
		box-shadow: 0 0 0 1px var(--wcol-accent);
	}

	.wcol-input.has-error input.components-text-control__input,
	.wcol-picker__box.has-error {
		border-color: var(--wcol-error);
		box-shadow: 0 0 0 1px var(--wcol-error);
	}

	input[type="number"].components-text-control__input {
		font-variant-numeric: tabular-nums;
	}

	/* wp-admin's forms.css draws a second focus ring on raw inputs. */
	input:focus,
	textarea:focus,
	select:focus {
		outline: none;
	}

	/* ---------- the dropdown (src/components/select.js) ---------- */

	.wcol-select {
		position: relative;
		display: block;
		min-width: 0;
	}

	.wcol-select__button {
		display: flex;
		align-items: center;
		gap: 8px;
		height: var(--wcol-control);
		padding: 0 8px 0 12px;
		text-align: left;
		cursor: pointer;

		&:hover:not(:disabled) {
			border-color: var(--wcol-text);
		}

		&:disabled {
			cursor: default;
			background: var(--wcol-surface-2);
			color: var(--wcol-text-3);
		}
	}

	.wcol-select.is-open .wcol-select__button:hover {
		border-color: var(--wcol-accent);
	}

	.wcol-select__value {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wcol-select__chevron {
		color: var(--wcol-text-2);
		transition: transform 0.15s ease;
	}

	.wcol-select.is-open .wcol-select__chevron {
		transform: rotate(180deg);
		color: var(--wcol-accent);
	}

	/* Every list that drops down: the dropdown, the picker, the menu. */
	.wcol-select__list,
	.wcol-more__list,
	.wcol-picker__menu {
		position: absolute;
		z-index: 30;
		top: calc(100% + 4px);
		max-width: calc(100vw - 24px);
		max-height: 300px;
		overflow-y: auto;
		margin: 0;
		padding: 4px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		box-shadow: var(--wcol-shadow-pop);
		overscroll-behavior: contain;
		animation: wcol-drop 0.12s ease-out;
	}

	.wcol-select.is-upward .wcol-select__list {
		top: auto;
		bottom: calc(100% + 4px);
		animation-name: wcol-drop-up;
	}

	.wcol-select__option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 36px;
		margin: 0;
		padding: 6px 8px 6px 10px;
		border-radius: var(--wcol-r);
		font-size: var(--wcol-fs-md);
		line-height: 1.35;
		color: var(--wcol-text);
		white-space: nowrap;
		cursor: pointer;

		.wcol-ico {
			color: var(--wcol-accent);
		}

		&.is-active {
			background: var(--wcol-accent-soft);
		}

		&.is-selected {
			font-weight: 600;
		}

		&.is-disabled {
			color: var(--wcol-text-3);
			cursor: not-allowed;
			background: none;
		}
	}

	/* ---------- the search box (src/components/fields.js) ---------- */

	.wcol-search {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--wcol-control);
		padding: 0;
		cursor: text;

		&:hover {
			border-color: var(--wcol-text);
		}

		&:focus-within:hover {
			border-color: var(--wcol-accent);
		}
	}

	.wcol-search__icon {
		position: absolute;
		left: 8px;
		color: var(--wcol-text-2);
		pointer-events: none;
	}

	input.wcol-search__input,
	.wcol-search__input[type="search"] {
		flex: 1;
		width: 100%;
		min-width: 0;
		height: 100%;
		min-height: 0;
		margin: 0;
		padding: 0 36px 0 38px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		outline: none;
		font: inherit;
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text);
		-webkit-appearance: none;
		appearance: none;

		&::-webkit-search-cancel-button {
			display: none;
		}

		&::placeholder {
			color: var(--wcol-text-3);
		}

		&:focus {
			box-shadow: none;
			outline: none;
		}
	}

	.wcol-search__clear {
		position: absolute;
		right: 4px;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: var(--wcol-r-sm);
		color: var(--wcol-text-2);
		cursor: pointer;

		&:hover {
			background: var(--wcol-line-soft);
			color: var(--wcol-text);
		}
	}

	.wcol-search.is-large {
		height: 48px;

		.wcol-search__icon {
			left: 12px;
		}

		input.wcol-search__input {
			padding-left: 44px;
			font-size: var(--wcol-fs-lg);
		}
	}

	/* ---------- checkbox (wp-components) ---------- */

	.components-checkbox-control__input-container {
		width: 20px;
		height: 20px;
		margin: 0;
	}

	.components-checkbox-control__input[type="checkbox"] {
		width: 20px;
		height: 20px;
		border-color: var(--wcol-text);
		border-radius: var(--wcol-r-sm);

		&:checked {
			background: var(--wcol-accent);
			border-color: var(--wcol-accent);
		}

		&:focus {
			box-shadow: none;
		}

		&:focus-visible {
			box-shadow: 0 0 0 2px var(--wcol-surface), 0 0 0 4px var(--wcol-accent);
		}
	}
}

/* =====================================================================
   8. Buttons & icon buttons
   ===================================================================== */

.wcol-admin {
	.components-button {
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		border-radius: var(--wcol-r-sm);

		&:not(.is-link):not(.wcol-iconbtn):not(.is-compact):not(.is-small) {
			height: var(--wcol-control);
			min-height: var(--wcol-control);
			padding: 0 16px;
		}

		&.is-compact,
		&.is-small {
			height: 32px;
			min-height: 32px;
			padding: 0 12px;
		}

		&.is-primary:not(:disabled) {
			background: var(--wcol-accent);
			color: #fff;

			&:hover {
				background: var(--wcol-accent-dark);
			}
		}

		&.is-secondary:not(:disabled) {
			color: var(--wcol-accent);
			box-shadow: inset 0 0 0 1px var(--wcol-accent);

			&:hover {
				background: var(--wcol-accent-soft);
				color: var(--wcol-accent-dark);
			}
		}

		&.is-tertiary:not(:disabled) {
			color: var(--wcol-accent);

			&:hover {
				background: var(--wcol-accent-soft);
			}
		}

		&.has-icon.has-text:not(.wcol-iconbtn) {
			gap: 4px;
			padding-left: 10px;
		}

		&:focus:not(:focus-visible) {
			box-shadow: none;
			outline: none;
		}

		&.is-secondary:focus:not(:focus-visible) {
			box-shadow: inset 0 0 0 1px var(--wcol-accent);
		}

		// A secondary button that removes or resets things reads red, all of
		// it (core gives it a red border, the rule above a blue edge).
		&.is-secondary.is-destructive:not(:disabled) {
			border-color: transparent;
			color: var(--wcol-error-text);
			box-shadow: inset 0 0 0 1px var(--wcol-error);

			&:hover {
				background: var(--wcol-error-soft);
				color: var(--wcol-error-text);
			}

			&:focus:not(:focus-visible) {
				box-shadow: inset 0 0 0 1px var(--wcol-error);
			}
		}

		.components-spinner {
			width: 16px;
			height: 16px;
			margin: 0 8px 0 0;
		}
	}

	.components-button.is-link {
		font-size: inherit;
		color: var(--wcol-accent);
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.components-button.is-link.wcol-inline-link {
		height: auto;
		min-height: 0;
		padding: 0;
		vertical-align: baseline;
		font-weight: 500;
	}

	/* The console's own button, for the dialog: drawn like the ones above. */
	.wcol-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: var(--wcol-control);
		padding: 0 16px;
		border: 0;
		border-radius: var(--wcol-r-sm);
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
	}

	.wcol-btn--ghost {
		background: var(--wcol-surface);
		color: var(--wcol-accent);
		box-shadow: inset 0 0 0 1px var(--wcol-accent);

		&:hover {
			background: var(--wcol-accent-soft);
		}
	}

	.wcol-btn--primary {
		background: var(--wcol-accent);
		color: #fff;

		&:hover {
			background: var(--wcol-accent-dark);
		}
	}

	.wcol-btn--danger {
		background: var(--wcol-error);
		color: #fff;

		&:hover {
			background: var(--wcol-error-text);
		}
	}

	/* Icon buttons: one size, one hover, a red hover for delete. */
	.components-button.wcol-iconbtn {
		justify-content: center;
		width: 36px;
		min-width: 36px;
		height: 36px;
		padding: 0;
		border-radius: var(--wcol-r);
		color: var(--wcol-text-2);

		&:hover:not(:disabled) {
			background: var(--wcol-line-soft);
			color: var(--wcol-text);
		}

		&:disabled {
			opacity: 0.35;
		}

		&.is-on,
		&.is-on:hover:not(:disabled) {
			background: var(--wcol-accent);
			color: #fff;
		}

		&.is-working:disabled {
			opacity: 1;
			color: var(--wcol-accent);
		}
	}

	.components-button.wcol-iconbtn--danger:hover:not(:disabled) {
		background: var(--wcol-error-soft);
		color: var(--wcol-error);
	}

	.components-button.wcol-iconbtn--danger.is-working:disabled {
		color: var(--wcol-error);
	}

	.wcol-iconbtns {
		display: inline-flex;
		align-items: center;
		gap: 2px;
	}
}

/* =====================================================================
   9. Badges, tiles, callouts, chips
   ===================================================================== */

.wcol-admin {
	.wcol-badge {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		height: 22px;
		padding: 0 8px;
		border: 0;
		border-radius: 999px;
		font-family: inherit;
		font-size: var(--wcol-fs-xs);
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		background: var(--wcol-line-soft);
		color: var(--wcol-text-2);

		.wcol-ico {
			margin-left: -4px;
		}
	}

	.wcol-badge--accent,
	.wcol-badge--info {
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
	}

	.wcol-badge--ok {
		background: var(--wcol-ok-soft);
		color: var(--wcol-ok-text);
	}

	/* An icon on a soft square: templates, the Pro page, empty states. */
	.wcol-tile {
		display: inline-grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: var(--wcol-r-lg);
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
	}

	.wcol-tile--muted {
		background: var(--wcol-line-soft);
		color: var(--wcol-text-2);
	}

	/* Callouts: a tinted box with an icon, for anything the page needs to say. */
	.wcol-callout {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 12px 16px;
		border: 1px solid var(--wcol-accent-line);
		border-radius: var(--wcol-r-lg);
		background: var(--wcol-accent-soft);
		color: var(--wcol-text);
	}

	.wcol-callout__icon {
		color: var(--wcol-accent);
	}

	.wcol-callout__body {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
		min-width: 0;
		padding-top: 2px;

		> b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
			line-height: 1.4;
		}

		> span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}

		> .wcol-card {
			margin-top: 8px;
		}
	}

	.wcol-callout__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 8px;
	}

	.wcol-callout--card {
		padding: 16px 20px;
	}

	.wcol-callout--warn {
		background: var(--wcol-warn-soft);
		border-color: var(--wcol-warn-line);

		.wcol-callout__icon {
			color: var(--wcol-warn);
		}
	}

	/* Suggestion chips (the Pro page). */
	.wcol-chipbtn {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		padding: 4px 12px;
		border: 1px solid var(--wcol-line);
		border-radius: 999px;
		background: var(--wcol-surface);
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text);
		text-align: left;
		cursor: pointer;

		&:hover {
			border-color: var(--wcol-accent);
			color: var(--wcol-accent);
			background: var(--wcol-accent-soft);
		}
	}

	/* Progress (the first-run checklist). */
	.wcol-progress {
		height: 4px;
		border-radius: 4px;
		background: var(--wcol-line-soft);
		overflow: hidden;

		span {
			display: block;
			height: 100%;
			border-radius: 4px;
			background: var(--wcol-ok);
			transition: width 0.3s ease;
		}
	}
}

/* =====================================================================
   10. Switch & status
   ===================================================================== */

.wcol-admin {
	.wcol-switch {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 2px 0;
		background: none;
		border: 0;
		font-family: inherit;
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text);
		text-align: left;
		cursor: pointer;

		&:disabled {
			cursor: default;
			opacity: 0.6;
		}

		&:focus-visible {
			outline: 2px solid var(--wcol-accent);
			outline-offset: 2px;
			border-radius: var(--wcol-r-sm);
		}
	}

	/* The WordPress toggle: an outlined track that fills when on. */
	.wcol-track {
		position: relative;
		flex: none;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: var(--wcol-surface);
		box-shadow: inset 0 0 0 1px var(--wcol-text);
		transition: background 0.15s ease, box-shadow 0.15s ease;

		&::after {
			content: "";
			position: absolute;
			top: 4px;
			left: 4px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: var(--wcol-text);
			transition: transform 0.15s ease, background 0.15s ease;
		}

		&.is-on {
			background: var(--wcol-accent);
			box-shadow: none;

			&::after {
				transform: translateX(16px);
				background: #fff;
			}
		}
	}

	.wcol-switch.is-pending {
		cursor: progress;

		.wcol-track::after {
			top: 3px;
			left: 3px;
			width: 14px;
			height: 14px;
			border: 2px solid var(--wcol-text);
			border-right-color: transparent;
			background: transparent;
			animation: wcol-spin 0.7s linear infinite;
		}

		.wcol-track.is-on::after {
			left: 3px;
			border-color: #fff;
			border-right-color: transparent;
			transform: none;
			margin-left: 16px;
		}
	}

	/* The switch in a row, with its state written beside it. */
	.wcol-status {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.wcol-status__word {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		white-space: nowrap;
		color: var(--wcol-text-2);
	}

	.wcol-status.is-on .wcol-status__word {
		color: var(--wcol-text);
	}

	.wcol-status.is-busy .wcol-status__word {
		color: var(--wcol-accent);
	}

	.wcol-status.is-busy-delete .wcol-status__word {
		color: var(--wcol-error);
	}

	.wcol-status.is-saved-on .wcol-status__word,
	.wcol-status.is-saved-off .wcol-status__word {
		padding: 2px 8px 2px 4px;
		border-radius: 999px;
		animation: wcol-pop 0.25s ease-out;
	}

	.wcol-status.is-saved-on .wcol-status__word {
		background: var(--wcol-ok-soft);
		color: var(--wcol-ok-text);
	}

	.wcol-status.is-saved-off .wcol-status__word {
		background: var(--wcol-line-soft);
		color: var(--wcol-text);
	}

	.wcol-status__spin {
		display: inline-block;
		flex: none;
		width: 14px;
		height: 14px;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: wcol-spin 0.7s linear infinite;
	}
}

/* =====================================================================
   11. Limits toolbar
   ===================================================================== */

.wcol-admin {
	.wcol-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
	}

	.wcol-toolbar__group {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.wcol-toolbar__count {
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-text-2);
		white-space: nowrap;
	}

	.wcol-select--bulk {
		width: 168px;
	}

	.wcol-select--filter {
		width: 152px;
	}

	.wcol-select--sort {
		width: 148px;
	}

	.wcol-search--toolbar {
		width: 220px;
	}

	/* Export / Import. */
	.wcol-more {
		position: relative;
	}

	.wcol-more__button {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: var(--wcol-control);
		padding: 0 6px 0 10px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line-input);
		border-radius: var(--wcol-r-sm);
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text);
		white-space: nowrap;
		cursor: pointer;

		&:hover:not(:disabled) {
			border-color: var(--wcol-text);
		}

		&[aria-expanded="true"] {
			border-color: var(--wcol-accent);
			box-shadow: 0 0 0 1px var(--wcol-accent);
		}

		.wcol-ico {
			color: var(--wcol-text-2);
		}
	}

	/* The dropdown and the picker open under their field, as wide as it; the
	   menu opens under its button, from the right. */
	.wcol-select__list,
	.wcol-picker__menu {
		left: 0;
		min-width: 100%;
	}

	.wcol-more__list {
		right: 0;
		min-width: 300px;

		button {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2px;
			width: 100%;
			padding: 8px 10px;
			background: none;
			border: 0;
			border-radius: var(--wcol-r);
			font-family: inherit;
			text-align: left;
			cursor: pointer;

			&:hover,
			&:focus-visible {
				background: var(--wcol-accent-soft);
				outline: none;
			}
		}

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 500;
			color: var(--wcol-text);
		}

		span {
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}

	/* "These limits check the same products." */
	.wcol-overlap-bar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px 16px;
		padding: 16px 20px;
		background: var(--wcol-warn-soft);
		border: 1px solid var(--wcol-warn-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-overlap-bar__icon {
		align-self: flex-start;
		display: grid;
		color: var(--wcol-warn);
	}

	.wcol-overlap-bar__text {
		flex: 1 1 320px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
		}

		span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-overlap-bar__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcol-overlap-bar .components-button.is-secondary:not(:disabled) {
		background: var(--wcol-surface);
	}
}

/* =====================================================================
   12. Limits table
   ===================================================================== */

.wcol-admin {
	.wcol-table {
		width: 100%;
		border-collapse: collapse;
		background: var(--wcol-surface);
		font-size: var(--wcol-fs-sm);

		th {
			padding: 12px 16px;
			border-bottom: 1px solid var(--wcol-line);
			background: var(--wcol-surface);
			font-size: var(--wcol-fs-sm);
			font-weight: 500;
			color: var(--wcol-text-2);
			text-align: left;
			white-space: nowrap;
		}

		td {
			padding: 14px 16px;
			border-bottom: 1px solid var(--wcol-line-soft);
			vertical-align: middle;
		}

		tbody tr:last-child td {
			border-bottom: 0;
		}
	}

	.wcol-table--limits {
		table-layout: fixed;

		.wcol-col--cb { width: 52px; }
		.wcol-col--limit { width: 16%; }
		.wcol-col--when { width: 15%; }
		.wcol-col--src { width: 124px; }
		.wcol-col--on { width: 150px; }
		.wcol-col--act { width: 184px; }

		th.wcol-table__cb,
		td.wcol-table__cb {
			padding-right: 0;
		}

		th.wcol-table__actions {
			padding-right: 24px;
			text-align: right;
		}

		td.wcol-table__actions {
			padding: 8px 16px 8px 0;
			text-align: right;
		}

		/* A row's state (below) is two values set on the row: its colour and
		   its flash. Here every cell paints them; as cards, the row does. */
		td {
			overflow: hidden;
		}

		tbody tr.wcol-table__row td {
			background: var(--wcol-row-bg, transparent);
			animation: var(--wcol-row-anim, none);
		}
	}

	.wcol-table__selectall {
		display: none;
	}

	/* What the row limits: a tile (or the product photo), the name, what it covers. */
	.wcol-target {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}

	.wcol-target__thumb {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: var(--wcol-r-lg);
		background: var(--wcol-accent-soft) center / cover no-repeat;
		color: var(--wcol-accent);

		&.has-image {
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

			.wcol-target__kind {
				display: none;
			}
		}
	}

	.wcol-target__kind {
		display: grid;
		place-items: center;
	}

	.wcol-target__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 0;

		> span:not(.wcol-target__flags) {
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--wcol-text-2);
		}
	}

	.wcol-target__name,
	.wcol-target__text > b {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		font-family: inherit;
		font-size: var(--wcol-fs-md);
		font-weight: 600;
		line-height: 1.4;
		color: var(--wcol-text);
		text-align: left;
	}

	button.wcol-target__name {
		cursor: pointer;

		&:hover {
			color: var(--wcol-accent);
			text-decoration: underline;
		}
	}

	.wcol-target__flags {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin-top: 4px;
	}

	.wcol-flag {
		display: inline-flex;
		align-items: center;
		height: 22px;
		padding: 0 8px;
		border: 0;
		border-radius: 999px;
		font-family: inherit;
		font-size: var(--wcol-fs-xs);
		font-weight: 600;
		white-space: nowrap;
	}

	.wcol-flag--overlap {
		background: var(--wcol-warn-soft);
		color: var(--wcol-warn-text);
		box-shadow: inset 0 0 0 1px var(--wcol-warn-line);
		cursor: pointer;

		&:hover {
			background: #f8efc8;
		}
	}

	.wcol-flag--pro {
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
	}

	/* Where it was made. */
	.wcol-src {
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
		white-space: nowrap;
	}

	/* A paused limit reads quieter, but stays readable. */
	.wcol-table__row.is-paused {
		.wcol-target__name,
		.wcol-target__text > b {
			color: var(--wcol-text-2);
			font-weight: 500;
		}

		.wcol-target__thumb {
			background-color: var(--wcol-line-soft);
			color: var(--wcol-text-3);
			filter: grayscale(1);
		}

		td:nth-child(3),
		td:nth-child(4) {
			color: var(--wcol-text-3);
		}
	}

	/* Row states, weakest first: a later state wins over an earlier one. */
	.wcol-table__row:hover {
		--wcol-row-bg: var(--wcol-surface-2);
	}

	.wcol-table__row.is-pending {
		--wcol-row-bg: var(--wcol-accent-soft);
	}

	.wcol-table__row.is-pending.is-busy-delete {
		--wcol-row-bg: var(--wcol-error-soft);
	}

	.wcol-table__row.is-focus {
		--wcol-row-bg: var(--wcol-warn-soft);
	}

	.wcol-table__row.is-flash {
		--wcol-row-anim: wcol-row-flash 1.6s ease-out;
	}

	.wcol-table__row.is-saved-on {
		--wcol-row-anim: wcol-row-on 2.4s ease-out;
	}

	.wcol-table__row.is-saved-off {
		--wcol-row-anim: wcol-row-off 2.4s ease-out;
	}

	/* The row whose helper is open, and the helper under it, read as one. */
	.wcol-table__row.is-why {
		--wcol-row-bg: var(--wcol-accent-soft);
	}

	.wcol-table--limits tbody tr.wcol-table__row.is-why td {
		border-bottom-color: transparent;
	}

	.wcol-table__row.is-why .wcol-target__thumb {
		background-color: var(--wcol-surface);
	}


	.wcol-table--limits .wcol-table__why > td {
		overflow: visible;
		padding: 8px 16px 20px 68px;
		background: var(--wcol-accent-soft);
	}

	/* Empty state. */
	.wcol-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 40px 24px;
		text-align: center;

		h3 {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
		}

		p {
			max-width: 440px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}

		.wcol-row {
			justify-content: center;
			margin-top: 4px;
		}
	}

	.wcol-card > .wcol-empty {
		margin: 0;
	}

	/* A search or filter that finds nothing: the same empty state, a little
	   tighter because the toolbar above already says what was searched. */
	.wcol-empty--filter {
		padding: 32px 24px;

		h3 {
			overflow-wrap: anywhere;
		}
	}

	.wcol-empty__icon {
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		border-radius: 12px;
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
	}

	.wcol-tab > .wcol-help {
		padding: 16px;
		text-align: center;
	}

	/* First-run checklist. */
	.wcol-checklist {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px 24px 8px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-checklist__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;

		> div {
			display: flex;
			align-items: baseline;
			gap: 10px;
		}

		b {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
		}

		span {
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}

	.wcol-checklist__steps {
		li {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px 0;
			border-top: 1px solid var(--wcol-line-soft);

			> div {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 2px;
				min-width: 0;
			}

			b {
				font-size: var(--wcol-fs-md);
				font-weight: 600;
			}

			div > span {
				font-size: var(--wcol-fs-md);
				color: var(--wcol-text-2);
			}

			&.is-done b {
				color: var(--wcol-text-2);
				font-weight: 500;
				text-decoration: line-through;
				text-decoration-color: var(--wcol-text-3);
			}
		}

		li:first-child {
			border-top: 0;
		}
	}

	.wcol-checklist__mark {
		display: grid;
		place-items: center;
		flex: none;
		width: 24px;
		height: 24px;
		border: 2px solid var(--wcol-line-input);
		border-radius: 50%;
		color: transparent;
	}

	/* The step the merchant is on now. */
	li.is-current .wcol-checklist__mark {
		border-color: var(--wcol-accent);
		box-shadow: inset 0 0 0 4px var(--wcol-surface), inset 0 0 0 12px var(--wcol-accent);
	}

	/* Step one on a new store holds the most used templates. */
	.wcol-checklist__steps li.wcol-checklist__pick {
		flex-wrap: wrap;
		align-items: flex-start;

		> div {
			flex: 1 1 calc(100% - 36px);
		}
	}

	.wcol-quick {
		flex: 1 1 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 4px;
		padding-inline-start: 36px;
	}

	.wcol-quick__more {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0 4px;
	}

	.wcol-quick__more .components-button {
		gap: 6px;
	}

	li.is-done .wcol-checklist__mark {
		border-color: var(--wcol-ok);
		background: var(--wcol-ok);
		color: #fff;
	}
}

/* =====================================================================
   13. "Why isn't it working?"
   ===================================================================== */

.wcol-admin {
	.wcol-why {
		position: relative;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-accent-line);
		border-radius: var(--wcol-r-lg);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
		white-space: normal;
		text-align: left;

		/* A small notch pointing up at the row's ? button. */
		&::before {
			content: "";
			position: absolute;
			top: -7px;
			left: calc(var(--wcol-notch-x, calc(100% - 30px)) - 6px);
			width: 12px;
			height: 12px;
			background: var(--wcol-surface);
			border-left: 1px solid var(--wcol-accent-line);
			border-top: 1px solid var(--wcol-accent-line);
			transform: rotate(45deg);
		}
	}

	.wcol-why__head {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 12px 16px 20px;
		border-bottom: 1px solid var(--wcol-line-soft);
	}

	.wcol-why__badge {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.wcol-why.is-ok .wcol-why__badge {
		background: var(--wcol-ok-soft);
		color: var(--wcol-ok-text);
	}

	.wcol-why.is-bad .wcol-why__badge {
		background: var(--wcol-error-soft);
		color: var(--wcol-error);
	}

	.wcol-why__title {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		padding-top: 1px;

		b {
			font-size: var(--wcol-fs-lg);
			font-weight: 600;
			line-height: 1.4;
		}

		span {
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}

	.wcol-why__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		padding: 20px;
	}

	.wcol-why__col + .wcol-why__col {
		padding-left: 24px;
		border-left: 1px solid var(--wcol-line-soft);
	}

	.wcol-why__checks {
		display: flex;
		flex-direction: column;
		gap: 6px;

		li {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px 10px;
			min-height: 28px;
			font-size: var(--wcol-fs-md);

			> span {
				flex: 1 1 160px;
			}
		}

		.wcol-why__mark {
			width: 20px;
			height: 20px;
			padding: 2px;
			border-radius: 50%;
		}

		li.is-pass .wcol-why__mark {
			background: var(--wcol-ok-soft);
			color: var(--wcol-ok-text);
		}

		li.is-fail {
			margin: 2px -8px 2px -8px;
			padding: 6px 8px;
			border-radius: var(--wcol-r);
			background: var(--wcol-error-soft);

			> span {
				font-weight: 600;
				color: var(--wcol-error-text);
			}

			.wcol-why__mark {
				background: var(--wcol-error);
				color: #fff;
			}
		}
	}

	.wcol-why__notes {
		display: flex;
		flex-direction: column;
		gap: 8px;

		li {
			position: relative;
			padding-left: 16px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);

			&::before {
				content: "";
				position: absolute;
				left: 2px;
				top: 8px;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: var(--wcol-text-3);
			}
		}
	}

}

/* =====================================================================
   14. Template library
   ===================================================================== */

.wcol-admin {
	.wcol-gallery-page {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	/* A page heading, for pages that have no header tabs. */
	.wcol-pagehead {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 16px 24px;

		h2 {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			line-height: 1.3;
		}

		p {
			margin-top: 4px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-pagehead__tools {
		display: flex;
		align-items: center;
		gap: 8px;

		.wcol-search {
			width: 260px;
		}
	}

	.wcol-gallery {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.wcol-gallery--n4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wcol-gallery--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wcol-gallery--n1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.wcol-gallery-page.is-filtered .wcol-gallery:not(.wcol-gallery--pro) {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}

	.wcol-tpl {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		margin: 0;
		padding: 20px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		font-family: inherit;
		line-height: 1.5;
		color: var(--wcol-text);
		text-align: left;
		cursor: pointer;
		transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

		&:hover {
			border-color: var(--wcol-accent);
			box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
			transform: translateY(-1px);

			.wcol-tpl__example .wcol-ico {
				transform: translateX(3px);
			}
		}
	}

	.wcol-tpl__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 8px;
	}

	.wcol-tpl__title {
		font-size: var(--wcol-fs-lg);
		font-weight: 600;
		line-height: 1.4;
	}

	.wcol-tpl__text {
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);
	}

	.wcol-tpl__example {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin-top: auto;
		padding-top: 8px;
		font-size: var(--wcol-fs-md);
		font-weight: 500;
		color: var(--wcol-accent);

		.wcol-ico {
			transition: transform 0.15s ease;
		}
	}

	/* A Pro template: the same card, in Pro's colour, locked. */
	.wcol-tpl.is-locked {
		cursor: default;
		background: var(--wcol-pro-soft);
		border-color: var(--wcol-pro-line);

		&:hover {
			border-color: var(--wcol-pro-line);
			box-shadow: none;
			transform: none;
		}
	}

	.wcol-nomatch {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 40px 24px;
		text-align: center;
		background: var(--wcol-surface);
		border: 1px dashed var(--wcol-line-input);
		border-radius: var(--wcol-r-lg);

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
		}

		span:not(.wcol-tile) {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}

		.components-button {
			margin-top: 8px;
		}
	}

	/* Pro's templates: a banner that opens into a locked grid. */

}

/* =====================================================================
   15. Builder
   ===================================================================== */

.wcol-admin {
	.wcol-builder {
		display: flex;
		flex-direction: column;
		gap: 16px;
		max-width: var(--wcol-form);
		margin: 0 auto;
	}

	.wcol-step__head {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.wcol-step__n {
		display: grid;
		place-items: center;
		flex: none;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
		font-size: var(--wcol-fs-sm);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.wcol-step__title {
		min-width: 0;
		padding-top: 2px;

		h3 {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			line-height: 1.4;
		}

		.wcol-card__sub {
			margin-top: 2px;
		}
	}

	.wcol-step__body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 20px;
		padding-left: 40px;
	}

	/* Step 1: the kind of limit, then what it covers, on one line. */
	.wcol-row--target {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.wcol-select--type {
		flex: none;
		width: 170px;
	}

	/* The number range. */
	.wcol-row--bounds {
		gap: 12px 20px;
	}

	.wcol-bound {
		display: inline-flex;
		align-items: center;
		gap: 10px;

		input.components-text-control__input {
			width: 96px;
		}
	}

	.wcol-bound__sep {
		margin-left: 1px;
	}

	.wcol-bound__sep--solo {
		margin-left: -6px;
	}

	/* Option cards (radio). */
	.wcol-choice {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.wcol-opt {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin: 0;
		padding: 12px 16px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		cursor: pointer;
		transition: border-color 0.12s ease, background 0.12s ease;

		&:hover {
			border-color: var(--wcol-line-input);
		}

		&.is-on {
			border-color: var(--wcol-accent);
			background: var(--wcol-accent-soft);
			box-shadow: inset 0 0 0 1px var(--wcol-accent);
		}

		input[type="radio"] {
			appearance: none;
			-webkit-appearance: none;
			flex: none;
			width: 20px;
			min-width: 20px;
			height: 20px;
			margin: 0;
			padding: 0;
			border: 1px solid var(--wcol-text);
			border-radius: 50%;
			background: var(--wcol-surface);
			box-shadow: none;
			transition: border-width 0.1s ease, border-color 0.1s ease;

			&::before {
				content: none;
				display: none;
			}

			&:checked {
				border: 6px solid var(--wcol-accent);
			}

			&:focus {
				box-shadow: none;
				outline: none;
			}

			&:focus-visible {
				box-shadow: 0 0 0 2px var(--wcol-surface), 0 0 0 4px var(--wcol-accent);
			}
		}
	}

	.wcol-opt--only {
		cursor: default;
	}

	.wcol-opt__dot {
		flex: none;
		width: 20px;
		height: 20px;
		border: 6px solid var(--wcol-accent);
		border-radius: 50%;
		background: var(--wcol-surface);
	}

	.wcol-opt__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
			line-height: 1.4;
		}

		span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-opt--open {
		flex-direction: column;
		align-items: stretch;
	}

	.wcol-opt__lead {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.wcol-nest {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: 4px;
		padding: 12px 0 0 32px;
		border-top: 1px solid var(--wcol-accent-line);

		.wcol-row {
			gap: 8px 10px;
		}

		.wcol-select--nest {
			width: 150px;
		}

		input.components-text-control__input {
			width: 80px;
		}
	}

	.wcol-readout {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		padding: 4px 12px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r);
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);
	}

	/* What the shopper sees: drawn like the store's own error notice. */
	.wcol-preview {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.wcol-preview p,
	.wcol-notice {
		margin: 0;
		padding: 12px 16px;
		border-left: 4px solid var(--wcol-error);
		border-radius: var(--wcol-r);
		background: var(--wcol-surface-2);
		font-size: var(--wcol-fs-md);
		line-height: 1.5;
		color: var(--wcol-text);
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.wcol-preview__label {
		font-size: var(--wcol-fs-xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wcol-text-3);
	}

	/* The whole limit in one sentence. */
	.wcol-sentence {
		padding: 20px 24px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-accent-line);
		border-left: 4px solid var(--wcol-accent);
		border-radius: var(--wcol-r-lg);

		p {
			font-size: var(--wcol-fs-lg);
			line-height: 1.6;
			color: var(--wcol-text);
		}

		u {
			text-decoration: none;
			border-bottom: 2px solid var(--wcol-accent-line);
			color: var(--wcol-accent);
			font-weight: 600;
		}

		.wcol-sentence__note {
			margin-top: 8px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	/* The sticky footer with Save. */
	.wcol-foot {
		position: sticky;
		bottom: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
		margin: 8px -24px 0;
		padding: 12px 24px;
		background: rgba(255, 255, 255, 0.97);
		border: 1px solid var(--wcol-line);
		border-bottom: 0;
		border-radius: var(--wcol-r-lg) var(--wcol-r-lg) 0 0;
		box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.3);

		> .wcol-row {
			gap: 12px;
		}
	}

	.wcol-foot__error {
		flex-basis: 100%;
		padding: 8px 12px;
		border-radius: var(--wcol-r);
		background: var(--wcol-error-soft);
		font-size: var(--wcol-fs-md);
		font-weight: 500;
		color: var(--wcol-error-text);
	}

	/* The flash on the field that needs fixing. */
	.is-flash-error {
		border-radius: var(--wcol-r);
		animation: wcol-flash-error 0.9s ease-out;
	}

	/* The product and category picker. */
	.wcol-picker {
		position: relative;
	}

	.wcol-picker__box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		height: auto;
		padding: 4px;
		cursor: text;

		&:hover {
			border-color: var(--wcol-text);
		}

		&:focus-within:hover {
			border-color: var(--wcol-accent);
		}
	}

	input.wcol-picker__input,
	.wcol-picker__input[type="text"] {
		flex: 1;
		min-width: 120px;
		height: 30px;
		min-height: 0;
		margin: 0;
		padding: 0 8px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		outline: none;
		font-family: inherit;
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text);

		&:focus {
			box-shadow: none;
			outline: none;
		}

		&::placeholder {
			color: var(--wcol-text-3);
		}
	}

	.wcol-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		max-width: 100%;
		height: 30px;
		padding: 0 2px 0 4px;
		border-radius: var(--wcol-r);
		background: var(--wcol-line-soft);
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-text);
		white-space: nowrap;
	}

	.wcol-chip__thumb {
		flex: none;
		width: 22px;
		height: 22px;
		border-radius: var(--wcol-r-sm);
		background: var(--wcol-line) center / cover no-repeat;
	}

	.wcol-chip__x {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: var(--wcol-r-sm);
		color: var(--wcol-text-2);
		cursor: pointer;

		&:hover {
			background: var(--wcol-error-soft);
			color: var(--wcol-error);
		}
	}

	.wcol-picker__menu {
		right: 0;
	}

	.wcol-picker__item {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 44px;
		margin: 0;
		padding: 6px 8px;
		background: none;
		border: 0;
		border-radius: var(--wcol-r);
		font-family: inherit;
		text-align: left;
		cursor: pointer;

		img {
			flex: none;
			width: 32px;
			height: 32px;
			border-radius: var(--wcol-r);
			object-fit: cover;
		}

		&:hover,
		&.is-active {
			background: var(--wcol-accent-soft);
		}
	}

	.wcol-picker__ph {
		flex: none;
		width: 32px;
		height: 32px;
		border-radius: var(--wcol-r);
		background: var(--wcol-line-soft);
	}

	.wcol-picker__text {
		flex: 1;
		min-width: 0;

		b {
			display: block;
			font-size: var(--wcol-fs-md);
			font-weight: 500;
			color: var(--wcol-text);
		}

		small {
			display: block;
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}

	.wcol-picker__tick {
		color: var(--wcol-accent);
	}

	.wcol-picker__loading,
	.wcol-picker__empty {
		margin: 0;
		padding: 12px;
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	/* Stays at the bottom of the list while it scrolls. */
	.wcol-picker__foot {
		position: sticky;
		bottom: -4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 4px -4px -4px;
		padding: 8px 8px 8px 12px;
		background: var(--wcol-surface);
		border-top: 1px solid var(--wcol-line);

		span {
			font-size: var(--wcol-fs-sm);
			color: var(--wcol-text-2);
		}
	}
}

/* =====================================================================
   16. Messages
   ===================================================================== */

.wcol-admin {
	.wcol-acc {
		overflow: hidden;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-acc__head {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 72px;
		margin: 0;
		padding: 12px var(--wcol-card-pad) 12px 20px;
		background: none;
		border: 0;
		font-family: inherit;
		text-align: left;
		cursor: pointer;

		b {
			flex: 1;
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
			color: var(--wcol-text);
		}

		.wcol-chev {
			color: var(--wcol-text-2);
			transition: transform 0.15s ease;
		}

		&.is-open .wcol-chev {
			transform: rotate(90deg);
			color: var(--wcol-accent);
		}

		&:hover {
			background: var(--wcol-surface-2);
		}

		&:focus-visible {
			outline-offset: -2px;
		}
	}

	.wcol-acc__count {
		font-size: var(--wcol-fs-xs);
		color: var(--wcol-text-2);
		white-space: nowrap;
	}

	/* The open group: its messages sit as white boxes on a light grey. */
	.wcol-acc__body {
		display: flex;
		flex-direction: column;
		padding: 4px var(--wcol-card-pad) var(--wcol-card-pad);
		background: var(--wcol-surface-2);
		border-top: 1px solid var(--wcol-line-soft);
	}

	/* One message, in its own box: what it is for, then the text beside what
	   the shopper reads, then (for old wording) the new wording. */
	.wcol-msg {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 16px;
		padding: 20px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-msg.is-old {
		border-color: var(--wcol-accent-line);
	}

	.wcol-msg__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;

		h4 {
			margin: 0;
			font-size: var(--wcol-fs-lg);
			font-weight: 600;
			line-height: 1.4;
			color: var(--wcol-text);
		}

		p {
			margin-top: 2px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}

		.wcol-badge {
			flex: none;
		}
	}

	.wcol-msg__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 20px;
	}

	.wcol-msg__edit,
	.wcol-msg__see {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}

	.wcol-msg__label {
		font-size: var(--wcol-fs-md);
		font-weight: 600;
		color: var(--wcol-text);
	}

	/* A message on version 3's wording: the new one, and the button. */
	.wcol-msg__old {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px 16px;
		padding: 12px 16px;
		background: var(--wcol-accent-soft);
		border-radius: var(--wcol-r);
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text);

		> span {
			flex: 1 1 280px;
		}

		.components-button {
			flex: none;
			background: var(--wcol-surface);
		}
	}

	/* The fill-in words: named buttons that add the word at the cursor. */
	.wcol-tokens {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
	}

	.wcol-tokens__label {
		margin-right: 2px;
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	.wcol-tok {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		height: 28px;
		padding: 0 10px 0 6px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: 999px;
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-text);
		cursor: pointer;

		.wcol-ico {
			color: var(--wcol-accent);
		}

		&:hover {
			border-color: var(--wcol-accent);
			background: var(--wcol-accent-soft);
			color: var(--wcol-accent);
		}
	}

	/* The Pro messages of a group, after its last message. */
	.wcol-acc__body > .wcol-prochips,
	.wcol-acc__body > .wcol-pro {
		margin-top: 24px;
	}

	/* The end of a group: its reset. */
	.wcol-acc__foot {
		display: flex;
		justify-content: flex-end;
		margin-top: 24px;
		padding-top: 16px;
		border-top: 1px solid var(--wcol-line-soft);
	}

	/* How messages work: short facts, one per line. */
	.wcol-facts {
		display: flex;
		flex-direction: column;
		gap: 10px;

		li {
			position: relative;
			padding-left: 16px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);

			&::before {
				content: "";
				position: absolute;
				left: 2px;
				top: 9px;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: var(--wcol-accent);
			}
		}
	}

	/* Messages that can move to the new wording: what and why, the one
	   action, and the list folded away until asked for. */
	.wcol-update {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: var(--wcol-card-pad);
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-accent-line);
		border-radius: var(--wcol-r-lg);
		box-shadow: inset 0 3px 0 var(--wcol-accent);
	}

	.wcol-update__head {
		display: flex;
		align-items: flex-start;
		gap: 12px;

		> div {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		b {
			font-size: var(--wcol-fs-lg);
			font-weight: 600;
			line-height: 1.4;
		}

		span:not(.wcol-tile) {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-update__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcol-update__chev {
		transition: transform 0.15s ease;

		&.is-open {
			transform: rotate(180deg);
		}
	}

	.wcol-update__foot {
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	.wcol-oldlist {
		display: flex;
		flex-direction: column;

		li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			padding: 10px 0;
			border-top: 1px solid var(--wcol-line-soft);
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text);
		}

		.components-button {
			flex: none;
		}
	}
}

/* =====================================================================
   17. Settings
   ===================================================================== */

.wcol-admin {
	.wcol-set {
		display: flex;
		flex-direction: column;
		gap: 4px;

		+ .wcol-set {
			margin-top: 16px;
		}

		.wcol-switch {
			align-items: flex-start;
			font-weight: 500;
			line-height: 20px;
		}
	}

	.wcol-set__help {
		max-width: var(--wcol-measure);
		padding-left: 46px;
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);
	}

	.wcol-set__help--info {
		color: var(--wcol-accent);
		font-weight: 500;
	}


	.wcol-set.is-highlight {
		margin-left: -12px;
		margin-right: -12px;
		padding: 10px 12px;
		border-radius: var(--wcol-r);
		background: var(--wcol-accent-soft);
	}

	.wcol-select--setting {
		max-width: 280px;
	}

	/* The storefront sketch. */
	.wcol-sfp {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.wcol-sfp__page {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 12px;
		background: var(--wcol-surface-2);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-sfp__label {
		font-size: var(--wcol-fs-xs);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wcol-text-3);
	}

	.wcol-sfp__product {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.wcol-sfp__img {
		flex: none;
		width: 64px;
		height: 64px;
		border-radius: var(--wcol-r);
		background: linear-gradient(135deg, var(--wcol-line), var(--wcol-accent-line));
	}

	.wcol-sfp__img--tile {
		width: 100%;
		height: 56px;
	}

	.wcol-sfp__body,
	.wcol-sfp__tile {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;

		b {
			font-size: var(--wcol-fs-sm);
			font-weight: 600;
		}
	}

	.wcol-sfp__price {
		font-size: var(--wcol-fs-sm);
	}

	.wcol-sfp__line {
		font-size: var(--wcol-fs-xs);
		font-style: italic;
		color: var(--wcol-text-3);

		&.is-on {
			font-style: normal;
			font-weight: 500;
			color: var(--wcol-text);
		}
	}

	.wcol-sfp__cart {
		display: flex;
		gap: 6px;
		margin-top: 2px;
	}

	.wcol-sfp__qty {
		display: inline-grid;
		place-items: center;
		width: 34px;
		height: 26px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line-input);
		border-radius: var(--wcol-r-sm);
		font-size: var(--wcol-fs-xs);
	}

	.wcol-sfp__btn {
		display: inline-flex;
		align-items: center;
		height: 26px;
		padding: 0 10px;
		border-radius: var(--wcol-r-sm);
		background: var(--wcol-text);
		color: #fff;
		font-size: var(--wcol-fs-xs);
	}

	.wcol-sfp__tiles {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
}

/* =====================================================================
   18. Pro — one family: badge, button, tile, locked option, chips, panel;
       then the Pro page.
   ===================================================================== */

.wcol-admin {
	/* The PRO mark. */
	.wcol-probadge {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		flex: none;
		height: 22px;
		padding: 0 8px 0 4px;
		border-radius: 999px;
		background: var(--wcol-pro);
		color: #fff;
		font-family: inherit;
		font-size: var(--wcol-fs-xs);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: middle;
	}

	a.wcol-probadge:hover,
	a.wcol-probadge:focus {
		background: var(--wcol-pro-dark);
		color: #fff;
	}

	/* Get Pro: the one Pro action, in Pro's colour. */
	.wcol-getpro {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex: none;
		height: var(--wcol-control);
		padding: 0 12px 0 16px;
		border-radius: var(--wcol-r-sm);
		background: var(--wcol-pro);
		color: #fff;
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;

		&:hover,
		&:focus {
			background: var(--wcol-pro-dark);
			color: #fff;
		}
	}

	/* An icon on a soft Pro square. */
	.wcol-protile {
		display: inline-grid;
		place-items: center;
		flex: none;
		width: 32px;
		height: 32px;
		border-radius: var(--wcol-r-lg);
		background: var(--wcol-pro-soft);
		color: var(--wcol-pro);
	}

	/* On a Pro-tinted card the tile turns white, so it still stands out. */
	.wcol-feat .wcol-protile,
	.wcol-tpl.is-locked .wcol-protile,
	.wcol-procard .wcol-protile,
	.wcol-prosection__grid .wcol-protile {
		background: var(--wcol-surface);
	}

	.wcol-protile--lg {
		width: 40px;
		height: 40px;
	}

	/* One locked option, shaped like the option cards around it. */
	.wcol-pro {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 12px 16px;
		background: var(--wcol-pro-soft);
		border: 1px dashed var(--wcol-pro-line);
		border-radius: var(--wcol-r-lg);

		+ .wcol-pro {
			margin-top: 8px;
		}

		.wcol-probadge {
			margin-left: auto;
		}
	}

	.wcol-pro__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 20px;
		height: 20px;
		color: var(--wcol-pro);
	}

	.wcol-pro__body {
		flex: 1;
		min-width: 0;

		b {
			display: block;
			font-size: var(--wcol-fs-md);
			font-weight: 600;
			line-height: 1.4;
			color: var(--wcol-text);
		}

		span {
			display: block;
			margin-top: 2px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	/* The features Pro adds to one builder step, as chips. */
	.wcol-prochips {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 12px 16px;
		background: var(--wcol-pro-soft);
		border: 1px solid var(--wcol-pro-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-prochips__head {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: var(--wcol-fs-md);
		font-weight: 600;
		color: var(--wcol-text);
	}

	.wcol-prochips__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcol-prochip {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 32px;
		padding: 4px 12px 4px 8px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-pro-line);
		border-radius: 999px;
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
		color: var(--wcol-text);
		text-align: left;
		cursor: pointer;

		.wcol-ico {
			color: var(--wcol-pro);
		}

		&:hover,
		&.is-open {
			border-color: var(--wcol-pro);
			box-shadow: inset 0 0 0 1px var(--wcol-pro);
		}

		&:focus-visible {
			outline: 2px solid var(--wcol-pro);
			outline-offset: 2px;
		}
	}

	.wcol-prochips__detail {
		padding: 8px 12px;
		background: var(--wcol-surface);
		border-radius: var(--wcol-r);
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);

		b {
			color: var(--wcol-text);
			font-weight: 600;
		}
	}

	/* Everything Pro adds to a page, at the end of it (ProSection): the Pro
	   box of .wcol-section--pro, folding, with one Pro-tinted card per
	   feature — the same card as "What Pro adds" on the Pro tab. */
	.wcol-prosection__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 0 -4px;
		padding: 0;
		background: none;
		border: 0;
		font: inherit;
		color: inherit;
		text-align: left;
		cursor: pointer;

		.wcol-chev {
			color: var(--wcol-pro);
			transition: transform 0.15s ease;
		}

		&[aria-expanded="true"] .wcol-chev {
			transform: rotate(90deg);
		}

		&:hover {
			color: var(--wcol-pro);
		}

		&:focus-visible {
			outline: 2px solid var(--wcol-pro);
			outline-offset: 2px;
		}
	}

	.wcol-prosection__body {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* Grouped: one Pro card per group, packed in three columns. */
	.wcol-prosection__cols {
		column-count: 3;
		column-gap: 12px;
	}

	.wcol-procard {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 12px;
		padding: 20px;
		break-inside: avoid;
		background: var(--wcol-pro-soft);
		border: 1px solid var(--wcol-pro-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-procard__head {
		display: flex;
		align-items: center;
		gap: 12px;

		h3 {
			font-size: var(--wcol-fs-lg);
			font-weight: 600;
			line-height: 1.4;
		}
	}

	.wcol-procard__list {
		display: flex;
		flex-direction: column;
		gap: 10px;

		li {
			display: flex;
			align-items: flex-start;
			gap: 6px;
		}

		.wcol-ico {
			flex: none;
			margin-top: 2px;
			color: var(--wcol-pro);
		}

		div {
			display: flex;
			flex-direction: column;
			min-width: 0;
		}

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 500;
			line-height: 1.45;
		}

		span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-prosection__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;

		li {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 16px;
			background: var(--wcol-pro-soft);
			border: 1px solid var(--wcol-pro-line);
			border-radius: var(--wcol-r-lg);
		}

		div {
			display: flex;
			flex-direction: column;
			gap: 2px;
			min-width: 0;
			padding-top: 5px;
		}

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
			line-height: 1.4;
		}

		div > span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	/* ---------- the Pro page ---------- */

	.wcol-propage {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.wcol-prohero {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: center;
		gap: 32px;
		padding: 32px;
		border: 1px solid var(--wcol-pro-line);
		border-radius: var(--wcol-r-lg);
		background: linear-gradient(110deg, var(--wcol-pro-soft) 0%, var(--wcol-surface) 70%);

		h2 {
			margin-top: 12px;
			font-size: var(--wcol-fs-page);
			font-weight: 400;
			line-height: 1.3;
		}

		p {
			max-width: 520px;
			margin-top: 8px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-prohero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 20px;
	}

	.wcol-prohero__points {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);

		li {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			font-size: var(--wcol-fs-md);
			font-weight: 500;
		}

		.wcol-ico {
			padding: 2px;
			border-radius: 50%;
			background: var(--wcol-ok-soft);
			color: var(--wcol-ok-text);
		}
	}

	.wcol-ask-card {
		display: flex;
		flex-direction: column;
		gap: 16px;

		> * + * {
			margin-top: 0;
		}

		h3 {
			font-size: var(--wcol-fs-xl);
			font-weight: 400;
		}

		.wcol-card__sub {
			margin-top: 4px;
		}
	}

	.wcol-ask__examples {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcol-ask__try {
		font-size: var(--wcol-fs-sm);
		color: var(--wcol-text-2);
	}

	.wcol-ask__note {
		font-size: var(--wcol-fs-xs);
		color: var(--wcol-text-3);
	}

	.wcol-answer {
		padding: 12px 16px;
		border: 1px solid;
		border-radius: var(--wcol-r-lg);

		b {
			display: block;
			font-size: var(--wcol-fs-md);
			font-weight: 600;
		}

		p {
			margin-top: 2px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-answer--yes {
		background: var(--wcol-ok-soft);
		border-color: #b8e6bf;
	}

	.wcol-answer--pro {
		background: var(--wcol-pro-soft);
		border-color: var(--wcol-pro-line);
	}

	.wcol-answer--none {
		background: var(--wcol-warn-soft);
		border-color: var(--wcol-warn-line);
	}

	.wcol-answer__list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.wcol-cap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 16px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
	}

	.wcol-cap--big {
		border-color: var(--wcol-accent);
		box-shadow: inset 0 0 0 1px var(--wcol-accent);
	}

	.wcol-cap.is-pro {
		background: var(--wcol-pro-soft);
		border-color: var(--wcol-pro-line);
	}

	.wcol-cap--big.is-pro {
		border-color: var(--wcol-pro);
		box-shadow: inset 0 0 0 1px var(--wcol-pro);
	}

	.wcol-cap__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;

		> span {
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-cap__title {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
		}
	}

	.components-button.wcol-cap__go {
		flex: none;
	}

	/* What Pro adds: six Pro cards. */
	.wcol-feats__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.wcol-feat {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		background: var(--wcol-pro-soft);
		border: 1px solid var(--wcol-pro-line);
		border-radius: var(--wcol-r-lg);

		ul {
			display: flex;
			flex-direction: column;
		}
	}

	.wcol-feat__head {
		display: flex;
		align-items: center;
		gap: 12px;

		b {
			font-size: var(--wcol-fs-lg);
			font-weight: 600;
		}
	}

	.wcol-feat__item {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		width: 100%;
		margin: 0;
		padding: 6px 0;
		background: none;
		border: 0;
		font-family: inherit;
		font-size: var(--wcol-fs-md);
		line-height: 1.45;
		color: var(--wcol-text);
		text-align: left;
		cursor: pointer;

		.wcol-ico {
			margin-top: 1px;
			color: var(--wcol-pro);
		}

		&:hover span {
			color: var(--wcol-pro-dark);
			text-decoration: underline;
		}
	}

	/* Already yours in Free. */
	.wcol-freelist {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px 24px;

		li {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			font-size: var(--wcol-fs-md);
			line-height: 1.5;
		}

		.wcol-ico {
			padding: 2px;
			border-radius: 50%;
			background: var(--wcol-ok-soft);
			color: var(--wcol-ok-text);
		}
	}

	.wcol-propage__foot {
		font-size: var(--wcol-fs-md);
		color: var(--wcol-text-2);
	}
}

/* =====================================================================
   19. Dialog, toast, save bar
   ===================================================================== */

.wcol-admin {
	.wcol-dialog {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: grid;
		place-items: center;
		padding: 16px;
		background: rgba(0, 0, 0, 0.35);
		animation: wcol-fade 0.15s ease-out;
	}

	.wcol-dialog__box {
		position: relative;
		width: min(480px, 100%);
		overflow: hidden;
		background: var(--wcol-surface);
		border-radius: var(--wcol-r-lg);
		box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.4);
		animation: wcol-pop 0.2s ease-out;
	}

	.wcol-dialog__main {
		display: flex;
		gap: 16px;
		padding: 24px 24px 20px;
	}

	.wcol-dialog__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--wcol-accent-soft);
		color: var(--wcol-accent);
	}

	.is-danger .wcol-dialog__icon {
		background: var(--wcol-error-soft);
		color: var(--wcol-error);
	}

	.is-warning .wcol-dialog__icon {
		background: var(--wcol-warn-soft);
		color: var(--wcol-warn);
	}

	.wcol-dialog__copy {
		min-width: 0;
		padding: 6px 24px 0 0;

		h2 {
			font-size: var(--wcol-fs-xl);
			font-weight: 600; /* WordPress modals: 20px, semibold. */
			line-height: 1.4;
		}

		p {
			margin-top: 6px;
			font-size: var(--wcol-fs-md);
			color: var(--wcol-text-2);
		}
	}

	.wcol-dialog__x {
		position: absolute;
		top: 12px;
		right: 12px;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: var(--wcol-r);
		color: var(--wcol-text-2);
		cursor: pointer;

		&:hover {
			background: var(--wcol-line-soft);
			color: var(--wcol-text);
		}
	}

	.wcol-dialog__actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		padding: 16px 24px;
		background: var(--wcol-surface-2);
		border-top: 1px solid var(--wcol-line-soft);
	}

	/* Toasts: WordPress's dark snackbar. */
	.wcol-toasts {
		position: fixed;
		z-index: 100000;
		left: 160px;
		right: 0;
		bottom: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		pointer-events: none;
	}

	&:has(.wcol-savebar) .wcol-toasts,
	&:has(.wcol-builder .wcol-foot) .wcol-toasts {
		bottom: 96px;
	}

	.wcol-toast {
		--wcol-toast-accent: var(--wcol-ok);

		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 12px;
		width: min(480px, calc(100% - 32px));
		overflow: hidden;
		padding: 12px 8px 12px 12px;
		background: #1e1e1e;
		border-radius: var(--wcol-r-lg);
		box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
		color: #fff;
		pointer-events: auto;
		animation: wcol-toast-in 0.24s ease-out;
	}

	.wcol-toast--error {
		--wcol-toast-accent: var(--wcol-error);
	}

	.wcol-toast--info {
		--wcol-toast-accent: var(--wcol-accent);
	}

	.wcol-toast__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--wcol-toast-accent);
		color: #fff;
	}

	.wcol-toast__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		padding-top: 3px;

		b {
			font-size: var(--wcol-fs-md);
			font-weight: 600;
			color: #fff;
		}

		span {
			font-size: var(--wcol-fs-sm);
			color: rgba(255, 255, 255, 0.75);
		}
	}

	.wcol-toast__action,
	.wcol-toast__x {
		flex: none;
		align-self: center;
		background: none;
		border: 0;
		border-radius: var(--wcol-r);
		font-family: inherit;
		cursor: pointer;

		&:hover {
			background: rgba(255, 255, 255, 0.12);
		}

		&:focus-visible {
			outline: 2px solid #fff;
			outline-offset: 0;
		}
	}

	.wcol-toast__action {
		height: 32px;
		padding: 0 10px;
		color: #fff;
		font-size: var(--wcol-fs-sm);
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.wcol-toast__x {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		color: rgba(255, 255, 255, 0.7);
	}

	.wcol-toast__timer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 3px;
		background: var(--wcol-toast-accent);
		transform-origin: left center;
		animation-name: wcol-toast-timer;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}

	.wcol-toast.is-held .wcol-toast__timer {
		display: none;
	}

	/* Save bar (Messages, Settings). */
	.wcol-savebar {
		position: sticky;
		bottom: 16px;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 16px;
		padding: 12px 12px 12px 20px;
		background: var(--wcol-surface);
		border: 1px solid var(--wcol-line);
		border-radius: var(--wcol-r-lg);
		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.3);
		animation: wcol-toast-in 0.2s ease-out;
	}

	.wcol-savebar__text {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-right: auto;
		font-size: var(--wcol-fs-md);
		font-weight: 500;

		&::before {
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--wcol-warn);
		}
	}
}

body.folded .wcol-admin .wcol-toasts {
	left: 36px;
}

/* =====================================================================
   20. Motion
   ===================================================================== */

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

@keyframes wcol-drop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@keyframes wcol-drop-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@keyframes wcol-fade {
	from {
		opacity: 0;
	}
}

@keyframes wcol-pop {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
}

@keyframes wcol-toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes wcol-toast-timer {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

@keyframes wcol-row-flash {
	0%,
	35% {
		background: var(--wcol-accent-soft);
	}
}

@keyframes wcol-row-on {
	0%,
	40% {
		background: var(--wcol-ok-soft);
	}
}

@keyframes wcol-row-off {
	0%,
	40% {
		background: var(--wcol-line-soft);
	}
}

@keyframes wcol-flash-error {
	0%,
	30% {
		box-shadow: 0 0 0 4px var(--wcol-error-soft);
	}

	100% {
		box-shadow: 0 0 0 4px transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcol-admin *,
	.wcol-tour__card,
	.wcol-tour__ring {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   21. Tablet & phone
   ===================================================================== */

@media (max-width: 1279px) {
	.wcol-admin {
		.wcol-prosection__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.wcol-prosection__cols {
			column-count: 2;
		}

		.wcol-feats__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@media (max-width: 1100px) {
	.wcol-admin {
		.wcol-gallery--n4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		/* One column: the help column joins the flow. On Messages it comes
		   first (it holds the old wording to update); on Settings, after. */
		.wcol-layout {
			grid-template-columns: minmax(0, 1fr);
		}

		.wcol-layout__aside {
			position: static;
		}

		.wcol-layout--aside-first .wcol-layout__aside {
			order: -1;
		}

		.wcol-freelist {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.wcol-prohero {
			grid-template-columns: minmax(0, 1fr);
			gap: 24px;
		}
	}
}

/* WordPress folds its menu to icons here: the toasts follow it. */
@media (max-width: 960px) {
	body.auto-fold .wcol-admin .wcol-toasts {
		left: 36px;
	}
}

/* The table: "Added in" goes first; then one card per limit. */
@container (max-width: 960px) {
	.wcol-admin .wcol-table--limits .wcol-col--src,
	.wcol-admin .wcol-table--limits .wcol-cell--src {
		display: none;
	}
}

@container (max-width: 760px) {
	.wcol-admin .wcol-table--limits {
		display: block;

		colgroup {
			display: none;
		}

		thead,
		tbody {
			display: block;
		}

		thead tr {
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--wcol-line);
		}

		thead th {
			display: none;
		}

		thead th.wcol-table__cb {
			display: flex;
			align-items: center;
			gap: 12px;
			width: auto;
			padding: 12px 16px;
			border: 0;
		}

		.wcol-table__selectall {
			display: inline;
			font-size: var(--wcol-fs-sm);
			font-weight: 500;
			color: var(--wcol-text);
		}

		tbody tr.wcol-table__row {
			display: grid;
			grid-template-columns: 32px auto minmax(0, 1fr) auto;
			align-items: center;
			gap: 4px 0;
			padding: 16px;
			border-bottom: 1px solid var(--wcol-line-soft);
			background: var(--wcol-row-bg, transparent);
			animation: var(--wcol-row-anim, none);
		}

		tbody tr:last-child {
			border-bottom: 0;
		}

		tbody td {
			display: block;
			padding: 0;
			border: 0;
			overflow: visible;
			/* The cells stop painting the row's state: the card does. */
			--wcol-row-bg: transparent;
			--wcol-row-anim: none;
		}

		td.wcol-table__cb {
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			padding-top: 10px;
		}

		td:nth-child(2) {
			grid-column: 2 / -1;
			grid-row: 1;
		}

		/* "2 to 7 items · Every order", under the name. The limit may wrap,
		   so a long one never pushes the row wider than its card. */
		td:nth-child(3) {
			grid-column: 2;
			grid-row: 2;
			min-width: 0;
			padding-top: 4px;
			font-weight: 600;
		}

		td:nth-child(4) {
			grid-column: 3 / -1;
			grid-row: 2;
			padding-top: 4px;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--wcol-text-2);

			&::before {
				content: "·";
				margin: 0 8px;
				color: var(--wcol-text-3);
			}
		}

		td.wcol-cell--on {
			grid-column: 2 / 4;
			grid-row: 3;
			padding: 8px 0 0;
			min-width: 0;

			/* "Turning off…" is longer than "On": it shortens rather than
			   running under the buttons beside it. */
			.wcol-status,
			.wcol-status__word {
				min-width: 0;
			}

			.wcol-status__word {
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		td.wcol-table__actions {
			grid-column: 4;
			grid-row: 3;
			padding: 8px 0 0;
		}

		tbody tr.is-why {
			border-bottom: 0;
		}

		tbody tr.wcol-table__why {
			display: block;
			padding: 4px 12px 16px;
			background: var(--wcol-accent-soft);
			border-bottom: 1px solid var(--wcol-line-soft);
		}

		tbody tr.wcol-table__why > td {
			padding: 0;
		}
	}

	.wcol-admin .wcol-why__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.wcol-admin .wcol-why__col + .wcol-why__col {
		padding: 20px 0 0;
		border-left: 0;
		border-top: 1px solid var(--wcol-line-soft);
	}
}

/* Tablet: WordPress folds its menu away here. */
@media (max-width: 782px) {
	body .wcol-admin .wcol-toasts,
	body.auto-fold .wcol-admin .wcol-toasts {
		left: 0;
	}

	.wcol-admin {
		--wcol-gutter: 20px;

		.wcol-foot {
			margin-left: -20px;
			margin-right: -20px;
			padding-left: 20px;
			padding-right: 20px;
		}

		/* The summary folds to one line; the three numbers stay in view. */
		.wcol-summary {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 0;
			padding: 0;
			overflow: hidden;
		}

		.wcol-summary .wcol-metric {
			align-items: center;
			padding: 12px 4px;
			text-align: center;

			+ .wcol-metric {
				border-left: 1px solid var(--wcol-line-soft);
			}
		}

		.wcol-summary__vr {
			display: none;
		}

		.wcol-summary__fold {
			grid-column: 1 / -1;
			grid-row: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			min-height: 48px;
			margin: 0;
			padding: 0 16px;
			background: none;
			border: 0;
			border-top: 1px solid var(--wcol-line-soft);
			font-family: inherit;
			font-size: var(--wcol-fs-sm);
			font-weight: 500;
			color: var(--wcol-text);
			cursor: pointer;

			.wcol-ico {
				color: var(--wcol-text-2);
				transition: transform 0.15s ease;
			}
		}

		.wcol-summary:not(.is-folded) .wcol-summary__fold .wcol-ico {
			transform: rotate(180deg);
		}

		.wcol-summary > .wcol-switch {
			grid-column: 1 / -1;
			flex-direction: row-reverse;
			justify-content: space-between;
			width: 100%;
			min-height: 48px;
			padding: 0 16px;
			border-top: 1px solid var(--wcol-line-soft);
			border-radius: 0;
		}

		.wcol-summary.is-folded > .wcol-switch {
			display: none;
		}


		.wcol-toolbar {
			flex-direction: column;
			align-items: stretch;
		}

		.wcol-toolbar__group--filter {
			flex-wrap: wrap;

			.wcol-select--filter,
			.wcol-select--sort {
				flex: 1 1 140px;
				width: auto;
			}

			.wcol-search--toolbar {
				flex: 1 1 200px;
				width: auto;
			}
		}

		.wcol-gallery-page:not(.is-filtered) .wcol-gallery:not(.wcol-gallery--pro) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.wcol-gallery-page:not(.is-filtered) .wcol-gallery > .wcol-tpl:last-child:nth-child(odd) {
			grid-column: 1 / -1;
		}

		.wcol-gallery--pro {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	}
}

/* Phone. */
@media (max-width: 600px) {
	.wcol-admin {
		.wcol-msg {
			padding: 16px;
		}

		/* The "Old wording" badge goes above the title, so the title and its
		   line keep the full width. */
		.wcol-msg__head {
			flex-direction: column-reverse;
			align-items: flex-start;
			gap: 8px;
		}

		.wcol-msg__grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.wcol-prosection__toggle {
			min-height: 40px;
		}

		/* Small links a thumb must still hit: at least 32px tall. */
		a.wcol-probadge,
		button.wcol-flag {
			min-height: 32px;
		}

		.wcol-propage__foot a {
			display: inline-block;
			padding: 8px 0;
		}

		.wcol-prosection__grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.wcol-prosection__cols {
			column-count: 1;
		}

		--wcol-gutter: 16px;
		--wcol-card-pad: 16px;

		.wcol-body {
			padding-top: 16px;
		}

		.wcol-head {
			padding-top: 16px;
		}

		.wcol-tabs .components-tab-panel__tabs-item {
			padding: 0 10px;

			&::after {
				left: 10px;
				right: 10px;
			}
		}

		.wcol-tabs .components-tab-panel__tabs-item:first-child {
			margin-left: -10px;
		}

		/* Toolbar. */
		.wcol-toolbar__group--bulk .wcol-select--bulk {
			flex: 1;
			width: auto;
		}

		.wcol-toolbar__count {
			display: none;
		}

		.wcol-toolbar__group--filter .wcol-search--toolbar {
			order: 3;
			flex-basis: 100%;
		}

		.wcol-more {
			order: 4;
			flex: 1 1 100%;
		}

		.wcol-more__button {
			width: 100%;
			justify-content: center;
		}

		.wcol-more__list {
			left: 0;
			right: 0;
			min-width: 0;
		}

		.components-button.wcol-iconbtn {
			width: 40px;
			min-width: 40px;
			height: 40px;
		}

		.wcol-table--limits .wcol-switch {
			min-height: 40px;
		}

		.wcol-overlap-bar {
			padding: 16px;
		}

		.wcol-overlap-bar__icon {
			display: none;
		}

		.wcol-overlap-bar__actions {
			flex-direction: column;
			align-items: stretch;
			width: 100%;

			.components-button {
				justify-content: center;
			}
		}

		.wcol-why__head {
			padding: 16px 8px 16px 16px;
		}

		.wcol-why__badge {
			width: 32px;
			height: 32px;
		}

		.wcol-why__body {
			padding: 16px;
		}

		.wcol-checklist {
			padding: 16px 16px 8px;
		}

		.wcol-checklist__steps li {
			flex-wrap: wrap;

			> div {
				flex: 1 1 calc(100% - 36px);
			}

			> .components-button {
				margin-inline-start: 36px;
			}
		}

		.wcol-quick {
			padding-inline-start: 0;
		}

		.wcol-quick__more {
			flex-direction: column;

			.components-button {
				justify-content: center;
			}
		}

		/* Library: one card per row, icon beside the words. */
		.wcol-gallery-page {
			gap: 24px;
		}

		.wcol-pagehead__tools {
			flex-direction: column;
			align-items: stretch;
			width: 100%;

			.wcol-search {
				width: 100%;
			}

			.components-button {
				justify-content: center;
			}
		}

		.wcol-gallery-page .wcol-gallery,
		.wcol-gallery-page:not(.is-filtered) .wcol-gallery:not(.wcol-gallery--pro),
		.wcol-quick .wcol-gallery {
			grid-template-columns: minmax(0, 1fr);
			gap: 8px;
		}

		.wcol-tpl {
			display: grid;
			grid-template-columns: 40px minmax(0, 1fr);
			gap: 2px 12px;
			padding: 14px 16px;

			&:hover {
				transform: none;
			}
		}

		.wcol-tpl__top {
			display: contents;

			.wcol-tile,
			.wcol-protile {
				grid-column: 1;
				grid-row: 1 / span 4;
			}

			.wcol-badge,
			.wcol-probadge {
				grid-column: 2;
				grid-row: 1;
				justify-self: start;
				margin-bottom: 4px;
			}
		}

		.wcol-tpl__title,
		.wcol-tpl__text,
		.wcol-tpl__example {
			grid-column: 2;
		}

		.wcol-tpl__example {
			padding-top: 4px;
		}

		/* Builder. */
		.wcol-step__body {
			margin-top: 16px;
			padding-left: 0;
		}

		.wcol-row--target {
			flex-wrap: wrap;

			.wcol-select--type,
			.wcol-row__grow {
				flex: 1 1 100%;
				width: 100%;
			}
		}

		.wcol-row--bounds {
			flex-direction: column;
			align-items: stretch;
		}

		.wcol-bound {
			display: grid;
			grid-template-columns: 72px minmax(0, 1fr) 44px;

			input.components-text-control__input {
				width: 100%;
			}
		}

		.wcol-nest {
			padding-left: 0;

			.wcol-select--nest {
				flex: 1 1 100%;
				width: 100%;
			}
		}

		.wcol-sentence {
			padding: 16px;

			p {
				font-size: var(--wcol-fs-md);
			}
		}

		.wcol-foot {
			margin: 8px -16px 0;
			padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
			border-left: 0;
			border-right: 0;
			border-radius: 0;

			> .wcol-row {
				flex-wrap: nowrap;
				justify-content: space-between;
				width: 100%;
			}

			> .wcol-row:last-child .components-button {
				flex: 1;
				justify-content: center;
			}

			.wcol-switch {
				min-height: 40px;
			}
		}

		/* Messages & settings. */
		.wcol-acc__head {
			padding: 8px 16px 8px 12px;
		}

		.wcol-acc__count {
			display: none;
		}

		.wcol-acc__body {
			padding: 4px 16px 16px;
		}

		.wcol-set .wcol-switch {
			min-height: 40px;
		}

		.wcol-savebar {
			bottom: 8px;
			flex-wrap: wrap;
			padding: 12px;

			.wcol-savebar__text {
				flex-basis: 100%;
			}

			.components-button {
				flex: 1;
				justify-content: center;
			}
		}

		/* Pro page. */
		.wcol-prohero {
			padding: 20px 16px;
		}

		.wcol-prohero__actions .components-button {
			flex: 1 1 100%;
			justify-content: center;
		}

		.wcol-feats__grid,
		.wcol-freelist {
			grid-template-columns: minmax(0, 1fr);
		}

		.wcol-sechead .wcol-getpro {
			width: 100%;
		}

		.wcol-cap {
			flex-direction: column;
			align-items: stretch;

			.components-button.wcol-cap__go {
				justify-content: center;
			}
		}

		/* Dialog: a sheet from the bottom. */
		.wcol-dialog {
			align-items: end;
			padding: 0;
		}

		.wcol-dialog__box {
			width: 100%;
			border-radius: 12px 12px 0 0;
		}

		.wcol-dialog__main {
			padding: 20px 16px 16px;
		}

		.wcol-dialog__actions {
			flex-direction: column-reverse;
			padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));

			.wcol-btn {
				width: 100%;
				height: 44px;
			}
		}

		/* A small table becomes labelled lines. */
		.wcol-table--stack {
			thead {
				display: none;
			}

			tbody,
			tr,
			td {
				display: block;
			}

			tr {
				padding: 12px 16px;
				border-bottom: 1px solid var(--wcol-line-soft);
			}

			td {
				padding: 2px 0;
				border: 0;
			}

			td[data-label]:not(:first-child)::before {
				content: attr(data-label) ": ";
				color: var(--wcol-text-2);
			}
		}

		.wcol-toast__x {
			width: 40px;
			height: 40px;
		}

		/* The builder's top bar keeps one line. */
		.wcol-idtag {
			display: none;
		}

		.wcol-crumb,
		.wcol-viewbar__action {
			white-space: nowrap;
		}

				/* Small links and chips get a thumb-sized hit area. */
		.wcol-flag--overlap {
			height: 28px;
		}

		.components-button.is-link.wcol-inline-link {
			padding: 10px 0;
			margin: -10px 0;
		}

		.wcol-chip__x {
			width: 32px;
			height: 32px;
		}

		.wcol-chip {
			height: 34px;
		}
	}
}

/* =====================================================================
   The walkthrough — portalled to <body>, so outside .wcol-admin.
   ===================================================================== */

.wcol-tour__ring {
	position: fixed;
	z-index: 100010;
	border-radius: var(--wcol-r-lg);
	box-shadow: 0 0 0 3px var(--wcol-accent), 0 0 0 9999px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
}

.wcol-tour__card {
	position: fixed;
	z-index: 100011;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 380px;
	max-width: calc(100vw - 24px);
	padding: 20px 20px 16px;
	background: var(--wcol-surface);
	border-radius: var(--wcol-r-lg);
	box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45);
	font-family: var(--wcol-font);
	color: var(--wcol-text);

	&::before {
		content: "";
		position: absolute;
		left: 26px;
		width: 12px;
		height: 12px;
		background: var(--wcol-surface);
		transform: rotate(45deg);
	}

	&.is-below::before {
		top: -6px;
	}

	&.is-above::before {
		bottom: -6px;
	}

	&.is-phone {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;

		&::before {
			display: none;
		}

		&.is-top {
			top: 12px;
			bottom: auto;
		}
	}

	b {
		font-size: var(--wcol-fs-lg);
		font-weight: 600;
		line-height: 1.4;
	}

	p {
		margin: 0;
		font-size: var(--wcol-fs-md);
		line-height: 1.55;
		color: var(--wcol-text-2);
	}
}

.wcol-tour__step {
	font-size: var(--wcol-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wcol-accent);
}

.wcol-tour__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wcol-line-soft);

	.components-button {
		height: 40px;
		padding: 0 16px;
		border-radius: var(--wcol-r-sm);
		font-family: inherit;
		font-size: var(--wcol-fs-sm);
		font-weight: 500;
	}

	.components-button.is-primary {
		background: var(--wcol-accent);
	}

	.components-button.is-secondary {
		color: var(--wcol-accent);
		box-shadow: inset 0 0 0 1px var(--wcol-accent);
	}

	.components-button.wcol-tour__skip {
		padding: 0 4px;
		color: var(--wcol-text-2);

		&:hover {
			color: var(--wcol-accent);
		}
	}
}

.wcol-tour__spacer {
	flex: 1;
}

@media (max-width: 600px) {
	.wcol-tour__actions .components-button {
		height: 44px;
	}
}

/* Right-to-left languages: arrows and chevrons point the way the page reads. */
body.rtl .wcol-flip-rtl,
body.rtl .wcol-chev {
	transform: scaleX(-1);
}

/* The mirrored stylesheet flips these values once more, so they are
   written here the other way round. */
body.rtl .wcol-admin .wcol-tpl:hover .wcol-tpl__example .wcol-flip-rtl {
	transform: translateX(3px) scaleX(-1);
}

body.rtl .wcol-admin .wcol-acc__head.is-open .wcol-chev,
body.rtl .wcol-admin .wcol-prosection__toggle[aria-expanded="true"] .wcol-chev {
	transform: rotate(-90deg);
}

/* =====================================================================
   22. Product and category screens: the Order Limit panels and the
       variation rows. Type follows the WooCommerce screen they sit in:
       14px bold for a box title, 13px for text, buttons and links, 12px
       for small tags; the admin's own font, inherited.
   ===================================================================== */

/* The tab's icon in Product data. */
#woocommerce-product-data ul.wc-tabs li.wcol_tab a::before {
	font-family: dashicons;
	content: "\f160";
}

#wcol_tab.wcol-panel-wrap {
	padding: 14px 16px 18px;
}

.wcol-panel-wrap--term td {
	padding-top: 0;
}

/* ---------- The list of limits ---------- */

.wcol-panel {
	box-sizing: border-box;
	max-width: 760px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--wcol-line);
	border-radius: var(--wcol-r-lg);
	color: var(--wcol-text);
	font-size: var(--wcol-fs-sm);
	line-height: 1.5;
}

.wcol-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.wcol-panel__head h4 {
	margin: 0 0 2px;
	padding: 0;
	font-size: var(--wcol-fs-md);
	font-weight: 600;
	color: var(--wcol-text);
}

.wcol-panel__head p {
	margin: 0;
	color: var(--wcol-text-2);
}

.wcol-panel .wcol-panel__add {
	flex: none;
}

.wcol-panel__list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wcol-line-soft);
}

.wcol-panel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--wcol-line-soft);
}

.wcol-panel__row.is-paused .wcol-panel__text {
	opacity: 0.6;
}

.wcol-panel__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--wcol-text-2);
}

.wcol-panel__text b {
	font-weight: 600;
	color: var(--wcol-text);
}

.wcol-panel__when {
	font-weight: 500;
	color: var(--wcol-text-2);
}

.wcol-panel__name {
	font-weight: 500;
	color: var(--wcol-text);
}

.wcol-panel__scope {
	color: var(--wcol-warn-text);
}

.wcol-panel__side {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

.wcol-panel__pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--wcol-fs-xs);
	font-weight: 600;
	white-space: nowrap;
}

.wcol-panel__pill.is-here {
	background: var(--wcol-ok-soft);
	color: var(--wcol-ok-text);
}

.wcol-panel__pill.is-far {
	background: var(--wcol-accent-soft);
	color: var(--wcol-accent);
}

.wcol-panel__pill.is-paused {
	background: var(--wcol-line-soft);
	color: var(--wcol-text-2);
}

.wcol-panel__action {
	font-weight: 600;
	color: var(--wcol-accent);
	text-decoration: none;
	white-space: nowrap;
}

.wcol-panel__action:hover {
	text-decoration: underline;
}

.wcol-panel__action.is-locked {
	font-weight: 500;
	color: var(--wcol-text-3);
}

.wcol-panel__note {
	margin: 12px 0 0;
	color: var(--wcol-text-2);
}

.wcol-panel__empty {
	margin: 0;
	color: var(--wcol-text-2);
}

/* WooCommerce sets every paragraph in Product data to 12px and pads it in
   from the left; ours are help text, 13px as WooCommerce's own .description,
   and line up with their heading. */
#woocommerce-product-data #wcol_tab .wcol-panel p {
	padding: 0;
	font-size: var(--wcol-fs-sm);
	line-height: 1.5;
}

/* ---------- Variation row and variable products: the one Pro lock pattern ---------- */

.woocommerce_variation .wcol-vrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	clear: both;
	box-sizing: border-box;
	max-width: 760px;
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--wcol-pro-soft);
	border: 1px solid var(--wcol-pro-line);
	border-radius: var(--wcol-r-lg);
	font-size: var(--wcol-fs-sm);
	line-height: 1.5;
}

.wcol-vrow__lock {
	flex: none;
	margin-top: 2px;
	color: var(--wcol-pro);
}

.wcol-vrow__body {
	flex: 1;
	min-width: 0;
}

.wcol-vrow__body b {
	display: block;
	font-weight: 600;
	color: var(--wcol-text);
}

.wcol-vrow__body span {
	display: block;
	margin-top: 2px;
	color: var(--wcol-text-2);
}

.woocommerce_variation .wcol-vrow__tag,
.wcol-panel .wcol-vrow__tag {
	display: inline-flex;
	flex: none;
	align-self: center;
	align-items: center;
	gap: 2px;
	padding: 2px 8px 2px 4px;
	border-radius: 999px;
	background: var(--wcol-pro);
	color: #fff;
	font-size: var(--wcol-fs-xs);
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce_variation .wcol-vrow__tag:hover,
.woocommerce_variation .wcol-vrow__tag:focus,
.wcol-panel .wcol-vrow__tag:hover,
.wcol-panel .wcol-vrow__tag:focus {
	background: var(--wcol-pro-dark);
	color: #fff;
}

.woocommerce_variation .wcol-vrow__note {
	clear: both;
	margin: 6px 0 4px;
	padding: 0;
	font-size: var(--wcol-fs-sm);
	color: var(--wcol-text-2);
}

@media (max-width: 600px) {
	.wcol-panel__head,
	.wcol-panel__row {
		flex-direction: column;
		align-items: stretch;
	}

	.wcol-panel__side {
		justify-content: space-between;
	}

	.wcol-panel .wcol-panel__add {
		text-align: center;
	}
}

/* =====================================================================
   23. The deactivation card on the Plugins screen: the console's dialog,
       drawn outside the console.
   ===================================================================== */

.wcol-dx {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(30, 30, 30, 0.62);
	font-family: var(--wcol-font);
	box-sizing: border-box;
}

.wcol-dx.is-open {
	display: flex;
}

body.has-wcol-modal {
	overflow: hidden;
}

.wcol-dx *,
.wcol-dx *::before,
.wcol-dx *::after {
	box-sizing: border-box;
}

.wcol-dx__box {
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	background: var(--wcol-surface);
	border: 1px solid var(--wcol-line);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
	animation: wcol-dx-in 0.16s ease-out;
}

@keyframes wcol-dx-in {
	from {
		transform: translateY(8px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

.wcol-dx__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 22px 4px;
}

.wcol-dx__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wcol-warn-soft);
	color: var(--wcol-warn-text);
}

.wcol-dx__head h2 {
	margin: 4px 0 4px;
	padding: 0;
	font-size: var(--wcol-fs-xl);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wcol-text);
}

.wcol-dx__head p {
	margin: 0;
	font-size: var(--wcol-fs-md);
	color: var(--wcol-text-2);
}

.wcol-dx__body {
	padding: 14px 22px 18px;
}

.wcol-dx__choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wcol-dx__opt {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--wcol-line);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}

.wcol-dx__opt:hover {
	border-color: #c9cdd6;
	background: var(--wcol-surface-2);
}

.wcol-dx__opt.is-on {
	border-color: var(--wcol-accent);
	background: var(--wcol-accent-soft);
}

.wcol-dx__opt input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.wcol-dx__dot {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border: 2px solid #b4b9c2;
	border-radius: 50%;
	background: var(--wcol-surface);
	position: relative;
	transition: border-color 0.12s;
}

.wcol-dx__opt.is-on .wcol-dx__dot {
	border-color: var(--wcol-accent);
}

.wcol-dx__opt.is-on .wcol-dx__dot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--wcol-accent);
}

.wcol-dx__opt input[type="radio"]:focus-visible + .wcol-dx__dot {
	box-shadow: 0 0 0 2px var(--wcol-surface), 0 0 0 4px var(--wcol-accent);
}

.wcol-dx__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.wcol-dx__text b {
	font-size: var(--wcol-fs-md);
	font-weight: 500;
	color: var(--wcol-text);
	line-height: 1.35;
}

.wcol-dx__opt.is-on .wcol-dx__text b {
	font-weight: 600;
}

.wcol-dx__detail {
	display: none;
	flex-direction: column;
	gap: 5px;
}

.wcol-dx__opt.is-on .wcol-dx__detail {
	display: flex;
}

.wcol-dx .wcol-dx__detail input[type="text"] {
	width: 100%;
	max-width: none;
	min-height: 36px;
	margin: 0;
	padding: 6px 10px;
	font-size: var(--wcol-fs-md);
	font-family: inherit;
	border: 1px solid #c9cdd6;
	border-radius: 4px;
	background: var(--wcol-surface);
	color: var(--wcol-text);
	box-shadow: none;
}

.wcol-dx .wcol-dx__detail input[type="text"]:focus {
	border-color: var(--wcol-accent);
	box-shadow: 0 0 0 1px var(--wcol-accent);
	outline: none;
}

.wcol-dx__need {
	display: none;
	font-size: var(--wcol-fs-sm);
	font-style: normal;
	color: var(--wcol-error);
}

.wcol-dx__opt.has-error {
	border-color: var(--wcol-error);
}

.wcol-dx__opt.has-error .wcol-dx__need {
	display: block;
}

.wcol-dx__opt.has-error .wcol-dx__detail input[type="text"] {
	border-color: var(--wcol-error);
}

.wcol-dx__disclosure {
	margin-top: 14px;
	padding: 11px 13px;
	border-radius: 8px;
	background: var(--wcol-accent-soft);
	border: 1px solid #d9e0fb;
}

.wcol-dx__disclosure p {
	margin: 0 0 8px;
	font-size: var(--wcol-fs-sm);
	line-height: 1.5;
	color: #2f3d8f;
}

.wcol-dx__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wcol-fs-md);
	color: var(--wcol-text);
	cursor: pointer;
}

.wcol-dx .wcol-dx__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid #8c8f94;
	border-radius: 3px;
}

.wcol-dx .wcol-dx__check input[type="checkbox"]:checked {
	background: var(--wcol-accent);
	border-color: var(--wcol-accent);
}

.wcol-dx .wcol-dx__check input[type="checkbox"]:checked::before {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 1px 0 0 4px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wcol-dx__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--wcol-surface-2);
	border-top: 1px solid var(--wcol-line-soft);
	border-radius: 0 0 10px 10px;
}

.wcol-dx__spacer {
	flex: 1;
}

.wcol-dx .wcol-dx__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	font-family: inherit;
	font-size: var(--wcol-fs-md);
	font-weight: 500;
	line-height: 1;
	border-radius: 2px;
	border: 1px solid var(--wcol-accent);
	background: var(--wcol-surface);
	color: var(--wcol-accent);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.wcol-dx .wcol-dx__btn--ghost:hover {
	background: var(--wcol-accent-soft);
	color: var(--wcol-accent-dark);
	border-color: var(--wcol-accent-dark);
}

.wcol-dx .wcol-dx__btn--primary {
	background: var(--wcol-accent);
	border-color: var(--wcol-accent);
	color: #fff;
}

.wcol-dx .wcol-dx__btn--primary:hover {
	background: var(--wcol-accent-dark);
	border-color: var(--wcol-accent-dark);
}

.wcol-dx .wcol-dx__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wcol-surface), 0 0 0 4px var(--wcol-accent);
}

.wcol-dx .wcol-dx__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.wcol-dx.is-busy .wcol-dx__box {
	pointer-events: none;
}

@keyframes wcol-dx-up {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@media (max-width: 600px) {
	.wcol-dx {
		padding: 0;
		align-items: flex-end;
	}

	.wcol-dx__box {
		max-width: none;
		max-height: 92vh;
		border-radius: 12px 12px 0 0;
		animation-name: wcol-dx-up;
	}

	.wcol-dx__head,
	.wcol-dx__body,
	.wcol-dx__actions {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wcol-dx__actions {
		flex-wrap: wrap;
		border-radius: 0;
	}

	.wcol-dx__spacer {
		display: none;
	}

	.wcol-dx .wcol-dx__btn {
		flex: 1 1 100%;
		min-height: 44px;
	}

	.wcol-dx .wcol-dx__btn.wcol-button-cancel {
		order: 2;
	}

	.wcol-dx .wcol-dx__detail input[type="text"] {
		font-size: var(--wcol-fs-lg);
	}
}