/*
 * The configurator on a product page. It takes the theme's fonts and text colour;
 * the one colour of its own is the accent, which a theme or the shop can set:
 *   .ckit { --ckit-accent: #b3001b; }
 * The Look tab's Style panel sets more of these on the configurator itself (see "Look" near
 * the end): colours, sizes and spaces as variables, the rest as ckit-{setting}-{choice} classes.
 * Phone first. On phones frontend.js pins the price bar to the bottom of the screen
 * while the configurator is in view (.ckit-bar-pinned), above any bar the theme fixes there.
 */

/* The quote form may sit after the buy button, outside .ckit, so it carries the tokens too,
   and so does the shop's buy button when the look says it matches. */
.ckit,
.ckit-quote,
.ckit-buy-button {
	/* The theme's main colour, else its text colour, else near-black. Never currentColor:
	   inside the Next button that would be the button's own light text, and it vanished. */
	--ckit-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1e1e1e));
	--ckit-line: rgba(127, 127, 127, 0.3);
	--ckit-line-strong: rgba(127, 127, 127, 0.55);
	--ckit-soft: rgba(127, 127, 127, 0.08);
	--ckit-soft-strong: rgba(127, 127, 127, 0.14);
	/* Boxes take the configurator's own background when the look gives it one. */
	--ckit-field: var(--ckit-bg, var(--wp--preset--color--base, #fff));
	--ckit-picked: rgba(127, 127, 127, 0.08);
	--ckit-ring: rgba(127, 127, 127, 0.25);
	--ckit-accent-soft: rgba(127, 127, 127, 0.15);
	/* Words on the accent colour: the theme's page colour. A look's own accent sets its own. */
	--ckit-on-accent: var(--wp--preset--color--base, #fff);
	--ckit-bad: #b3261e;
	--ckit-radius: 6px;
}

/* Lines and tints taken from the theme's own text and accent colour, where the browser can. */
@supports (color: color-mix(in srgb, red, blue)) {
	.ckit,
	.ckit-quote,
	.ckit-buy-button {
		--ckit-line: color-mix(in srgb, currentColor 18%, transparent);
		--ckit-line-strong: color-mix(in srgb, currentColor 40%, transparent);
		--ckit-soft: color-mix(in srgb, currentColor 5%, transparent);
		--ckit-soft-strong: color-mix(in srgb, currentColor 9%, transparent);
		--ckit-picked: color-mix(in srgb, var(--ckit-accent) 7%, transparent);
		--ckit-ring: color-mix(in srgb, var(--ckit-accent) 22%, transparent);
		/* Solid, so a pinned price bar in it hides what scrolls under it. */
		--ckit-accent-soft: color-mix(in srgb, var(--ckit-accent) 13%, var(--ckit-field));
	}
}

/* The theme's font, but never lighter than normal. Some themes set their body text light (Twenty Twenty-Five
   uses 300), and in a form that made option names, help lines and prices thin and grey (18 Oct 2026). Labels,
   prices and buttons keep their own heavier weights below. */
.ckit,
.ckit-quote {
	font-weight: 400;
}

.ckit {
	/* Look: a background, padding and text colour of its own. Unset, these change nothing. */
	background-color: var(--ckit-bg);
	border-radius: calc(var(--ckit-radius) + 6px);
	box-sizing: border-box;
	margin: 0 0 1.25em;
	/* A theme may make the product form a flex row; without this the widest thing
	   inside (a file picker, two size boxes) pushes the page wider than a phone. */
	min-width: 0;
	padding: var(--ckit-pad);
	width: 100%;
}

.ckit,
.ckit-quote {
	color: var(--ckit-text);
}

/* Look: text size. The quote form inside the configurator is already scaled with it. */
.ckit,
.ckit-quote:not(.ckit .ckit-quote) {
	font-size: calc(1em * var(--ckit-scale, 1));
}

/* A configured product's quantity is the configurator's own; WooCommerce's hidden one
   (sold one line per piece) must not take room. Some themes make the product form a grid
   with a quantity column: the configurator, the buy button and the quote form take the
   whole row, the button on the left under the price. */
.ckit-product form.cart div.quantity {
	display: none !important;
}

/* A theme that lays the buy form out as a grid (StoreWise, Twenty Twenty-Five) would squeeze
   the configurator into its columns: with a configurator the form is one column. */
.ckit-product form.cart:has(> .ckit) {
	display: block !important;
}

.ckit-product form.cart:has(> .ckit) > .single_add_to_cart_button {
	margin: 0.25em 0 0;
}

.ckit-product form.cart > .ckit,
.ckit-product form.cart > .ckit-quote,
.ckit-product form.cart > .single_add_to_cart_button {
	grid-column: 1 / -1;
	justify-self: start;
}

.ckit-product form.cart > .ckit,
.ckit-product form.cart > .ckit-quote {
	justify-self: stretch;
}

.ckit [hidden],
.ckit-quote[hidden],
.ckit-quote [hidden],
.ckit-product .single_add_to_cart_button[hidden] {
	display: none !important;
}

.ckit-step-title {
	font-size: 1.1em;
	margin: 0 0 0.75em;
}

.ckit-block {
	/* Option cards count the room their own block has (see the option list below). */
	container-type: inline-size;
	margin: 0 0 var(--ckit-space, 1.4em);
}

.ckit-fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.ckit-label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.4em;
	padding: 0;
}

.ckit-req {
	color: var(--ckit-bad);
}

.ckit-input {
	box-sizing: border-box;
	font: inherit;
	max-width: 100%;
	min-height: 44px;
	padding: 0.5em 0.75em;
	width: 100%;
}

/* ConfigKit's own boxes, whatever the theme does to inputs (some themes leave the browser's
   bevelled border): one line, round corners, a ring on focus. */
.ckit input.ckit-input,
.ckit select.ckit-input,
.ckit textarea.ckit-input,
.ckit-quote input.ckit-input,
.ckit-quote textarea.ckit-input {
	background-color: var(--ckit-field);
	border: max(1px, var(--ckit-bw, 1px)) solid var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	box-shadow: none;
	color: inherit;
	line-height: 1.4;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ckit input.ckit-input:hover,
.ckit select.ckit-input:hover,
.ckit textarea.ckit-input:hover,
.ckit-quote input.ckit-input:hover,
.ckit-quote textarea.ckit-input:hover {
	border-color: currentColor;
}

.ckit input.ckit-input:focus,
.ckit select.ckit-input:focus,
.ckit textarea.ckit-input:focus,
.ckit-quote input.ckit-input:focus,
.ckit-quote textarea.ckit-input:focus {
	border-color: var(--ckit-accent);
	box-shadow: 0 0 0 3px var(--ckit-ring);
}

.ckit input.ckit-input[readonly] {
	background-color: var(--ckit-soft);
}

.ckit-hint,
.ckit-help {
	font-size: 0.875em;
	margin: 0.35em 0 0;
	opacity: 0.8;
}

.ckit-error {
	color: var(--ckit-bad);
	font-size: 0.9em;
	font-weight: 600;
	margin: 0.4em 0 0;
}

.ckit .ckit-block.has-error input.ckit-input,
.ckit .ckit-block.has-error select.ckit-input,
.ckit .ckit-block.has-error textarea.ckit-input,
.ckit .ckit-block.has-error .ckit-option {
	border-color: var(--ckit-bad);
}

.ckit .ckit-block.has-error input.ckit-input:focus,
.ckit .ckit-block.has-error select.ckit-input:focus,
.ckit .ckit-block.has-error textarea.ckit-input:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

/* Sizes */

.ckit-dims {
	display: grid;
	gap: 0.75em;
	grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}

.ckit-dim-name {
	display: block;
	font-size: 0.875em;
	margin: 0 0 0.25em;
}

/* One length named like its block: said once on screen, still read out with the box. */
.ckit .ckit-dim-name.ckit-sr {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ckit-dim-box {
	align-items: center;
	display: flex;
	gap: 0.4em;
}

.ckit-dim-box .ckit-input {
	flex: 1 1 auto;
	min-width: 0;
}

.ckit-unit {
	flex: none;
	font-size: 0.9em;
	opacity: 0.8;
	white-space: nowrap;
}

.ckit-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 0.75em;
}

.ckit-preset,
.ckit-qty-step,
.ckit .ckit-back,
.ckit .ckit-next {
	background: var(--ckit-field);
	border: 1px solid var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	line-height: 1.3;
	min-height: 44px;
	padding: 0.4em 0.9em;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ckit-preset:hover,
.ckit-qty-step:hover,
.ckit .ckit-back:hover {
	border-color: currentColor;
}

.ckit-preset.is-picked {
	background: var(--ckit-picked);
	border-color: var(--ckit-accent);
	box-shadow: 0 0 0 1px var(--ckit-accent);
}

.ckit-preset:focus-visible,
.ckit-qty-step:focus-visible,
.ckit .ckit-back:focus-visible,
.ckit .ckit-next:focus-visible {
	box-shadow: 0 0 0 3px var(--ckit-ring);
	outline: none;
}

/* Options */

.ckit-option-list {
	display: grid;
	gap: var(--ckit-optgap, 0.6em);
	grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
}

.ckit-display-radio .ckit-option-list,
.ckit-display-checkboxes .ckit-option-list {
	grid-template-columns: 1fr;
}

/* Even rows: 2 cards side by side, 3 stacked on a phone and in a row with room, 4 as two by
   two or one row, 6 as two rows of three. Counted from the block's own width. A number the
   shop owner picks under Look (below) wins over these. */
.ckit-display-cards .ckit-option-list[data-count="2"],
.ckit-display-swatches .ckit-option-list[data-count="2"],
.ckit-display-cards .ckit-option-list[data-count="4"],
.ckit-display-swatches .ckit-option-list[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ckit-display-cards .ckit-option-list[data-count="3"] {
	grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 26em) {
	.ckit-display-cards .ckit-option-list[data-count="3"],
	.ckit-display-swatches .ckit-option-list[data-count="3"],
	.ckit-display-cards .ckit-option-list[data-count="6"],
	.ckit-display-swatches .ckit-option-list[data-count="6"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 38em) {
	.ckit-display-cards .ckit-option-list[data-count="4"],
	.ckit-display-swatches .ckit-option-list[data-count="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A card with a picture beside its words needs more room: three or four in a row only where
   each gets about 13em, else the words broke in the middle (a theme's large text made it worse).
   Tiles put the picture on top, and a number the owner picked under Look wins. */
@container (max-width: 39.99em) {
	.ckit:not(.ckit-opt-tiles, .ckit-cols-1, .ckit-cols-2, .ckit-cols-3, .ckit-cols-4) .ckit-display-cards .ckit-option-list[data-count="3"]:has(.ckit-option-image) {
		grid-template-columns: minmax(0, 1fr);
	}

	.ckit:not(.ckit-opt-tiles, .ckit-cols-1, .ckit-cols-2, .ckit-cols-3, .ckit-cols-4) .ckit-display-cards .ckit-option-list[data-count="6"]:has(.ckit-option-image) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 25.99em) {
	.ckit:not(.ckit-opt-tiles, .ckit-cols-1, .ckit-cols-2, .ckit-cols-3, .ckit-cols-4) .ckit-display-cards .ckit-option-list:is([data-count="2"], [data-count="4"]):has(.ckit-option-image) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (min-width: 38em) and (max-width: 51.99em) {
	.ckit:not(.ckit-opt-tiles, .ckit-cols-1, .ckit-cols-2, .ckit-cols-3, .ckit-cols-4) .ckit-display-cards .ckit-option-list[data-count="4"]:has(.ckit-option-image) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Look: how many cards side by side, when the shop owner picked a number. Phones keep at most two. */
.ckit-cols-1 .ckit-display-cards .ckit-option-list,
.ckit-cols-1 .ckit-display-swatches .ckit-option-list {
	grid-template-columns: 1fr;
}

.ckit-cols-2 .ckit-display-cards .ckit-option-list,
.ckit-cols-2 .ckit-display-swatches .ckit-option-list,
.ckit-cols-3 .ckit-display-cards .ckit-option-list,
.ckit-cols-4 .ckit-display-cards .ckit-option-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.ckit-cols-3 .ckit-display-cards .ckit-option-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ckit-cols-4 .ckit-display-cards .ckit-option-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ckit-option {
	align-items: center;
	background: var(--ckit-field);
	border: var(--ckit-bw, 1px) solid var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	box-shadow: var(--ckit-shadow, none);
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	gap: 0.6em;
	min-height: 44px;
	padding: var(--ckit-optpad, 0.7em) calc(var(--ckit-optpad, 0.7em) * 1.2);
	position: relative;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* WooCommerce gives every label on its pages a margin (.woocommerce-page label), which added to
   the space between options set under Look; the builder's canvas has none. */
.ckit .ckit-option {
	margin: 0;
}

.ckit-option:hover {
	border-color: currentColor;
}

/* Picked: one accent line two pixels wide, a light tint, and a tick on cards. */
.ckit-option.is-picked {
	background: var(--ckit-picked);
	border-color: var(--ckit-accent);
	box-shadow: 0 0 0 1px var(--ckit-accent), var(--ckit-shadow, 0 0 #0000);
}

.ckit-display-cards .ckit-option,
.ckit-display-swatches .ckit-option {
	padding-right: 2.2em;
}

.ckit-display-cards .ckit-option.is-picked::after,
.ckit-display-swatches .ckit-option.is-picked::after {
	background: var(--ckit-accent);
	content: "";
	height: 1.1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20a10 10 0 0 0 0-20Zm-1.4 14.2l-4.1-4.1 1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4-6.7 6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20a10 10 0 0 0 0-20Zm-1.4 14.2l-4.1-4.1 1.4-1.4 2.7 2.7 5.3-5.3 1.4 1.4-6.7 6.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	position: absolute;
	right: 0.65em;
	top: 0.65em;
	width: 1.1em;
}

.ckit-option.is-off {
	cursor: not-allowed;
	opacity: 0.45;
}

.ckit-option input {
	accent-color: var(--ckit-accent);
	flex: none;
	margin: 0;
}

.ckit-display-cards .ckit-option input,
.ckit-display-swatches .ckit-option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

/* A focus ring for the keyboard only, so a mouse click does not draw a second outline. */
.ckit-option:has(input:focus-visible) {
	outline: 2px solid var(--ckit-accent);
	outline-offset: 2px;
}

@supports not selector(:has(a)) {
	.ckit-option:focus-within {
		outline: 2px solid var(--ckit-accent);
		outline-offset: 2px;
	}
}

.ckit-option-image {
	border-radius: 4px;
	flex: none;
	height: var(--ckit-img, 48px);
	object-fit: cover;
	width: var(--ckit-img, 48px);
}

.ckit-swatch {
	border: 1px solid var(--ckit-line);
	border-radius: 50%;
	flex: none;
	height: calc(var(--ckit-img, 48px) * 0.58);
	width: calc(var(--ckit-img, 48px) * 0.58);
}

.ckit-option-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.ckit-option-price {
	font-size: 0.85em;
	opacity: 0.8;
}

/* Quantity */

.ckit-qty {
	align-items: stretch;
	display: flex;
	gap: 0.4em;
	max-width: 12em;
}

.ckit-qty-input {
	text-align: center;
}

.ckit-breaks {
	font-size: 0.875em;
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
}

/* Price grid */

.ckit-grid-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.ckit-grid-table {
	border-collapse: collapse;
	font-size: 0.9em;
	margin: 0;
}

.ckit-grid-table th,
.ckit-grid-table td {
	border: 1px solid var(--ckit-line);
	padding: 0;
	text-align: center;
}

.ckit-grid-table th {
	padding: 0.5em 0.6em;
}

.ckit-cell label {
	cursor: pointer;
	display: block;
	padding: 0.5em 0.6em;
}

.ckit-cell input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.ckit-cell.is-picked {
	box-shadow: inset 0 0 0 2px var(--ckit-accent);
}

.ckit-cell-empty {
	opacity: 0.4;
}

/* Steps and price */

.ckit-nav {
	align-items: center;
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
	margin: 0 0 1em;
}

.ckit .ckit-back,
.ckit .ckit-next {
	font-weight: 600;
	min-width: 6.5em;
}

.ckit .ckit-next {
	background: var(--ckit-accent);
	border-color: var(--ckit-accent);
	color: var(--ckit-on-accent);
	margin-left: auto;
}

.ckit-progress {
	font-size: 0.875em;
	opacity: 0.8;
}

.ckit-bar {
	align-items: baseline;
	background: var(--ckit-bg, var(--wp--preset--color--base, #fff));
	border-top: 1px solid var(--ckit-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	padding: 0.75em 0;
}

/* The whole width of the phone, its words lined up with the configurator (padding set by
   frontend.js), above a theme's own bar at the bottom (--ckit-bar-bottom). */
.ckit .ckit-bar.ckit-bar-pinned {
	bottom: var(--ckit-bar-bottom, 0);
	/* A clear shadow, so what scrolls under the pinned price reads as going under it, not cut off (18 Oct). */
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	left: 0;
	margin: 0;
	position: fixed;
	right: 0;
	z-index: 50;
}

.ckit-total {
	color: var(--ckit-price);
	font-size: 1.35em;
}

.ckit-bar-note {
	flex-basis: 100%;
	font-size: 0.875em;
	opacity: 0.85;
}

.ckit-bar-note:empty {
	display: none;
}

/* Look "the price bar stays in its place": frontend.js never pins it. */

.ckit-bar-suffix {
	opacity: 0.85;
}

/* Several pieces at once */

.ckit-pieces {
	margin: 0.75em 0 0;
}

.ckit-pieces-title {
	font-weight: 600;
	margin: 0.5em 0 0;
}

.ckit-piece-list {
	list-style: none;
	margin: 0.25em 0 0.5em;
	padding: 0;
}

.ckit-piece {
	align-items: baseline;
	border-top: 1px solid var(--ckit-line);
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.5em 0 0;
}

.ckit-piece-price {
	text-align: right;
	white-space: nowrap;
}

.ckit-piece-actions {
	display: flex;
	gap: 0.75em;
	grid-column: 1 / -1;
}

.ckit .ckit-piece-button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	min-height: 44px;
	padding: 0;
	text-decoration: underline;
}

.ckit-pieces-total {
	font-weight: 600;
	margin: 0 0 0.75em;
}

.ckit-pieces-total:empty {
	display: none;
}

.ckit .ckit-add-piece {
	background: transparent;
	border: 1px solid var(--ckit-line);
	border-radius: var(--ckit-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	min-height: 44px;
	padding: 0.4em 0.9em;
}

/* On a page or the homepage */

.ckit-page-form .ckit-page-add {
	cursor: pointer;
	font: inherit;
	margin-top: 0.5em;
	min-height: 44px;
	padding: 0.6em 1.6em;
}

.ckit-admin-note {
	border: 1px dashed currentColor;
	padding: 0.75em;
}

/* Files: a box to pick or drop them, then one line each with Remove. */
/* WooCommerce floats the buttons in a product form (with a long selector); the
   configurator's own never float. */
.ckit .button,
.ckit-quote .button {
	float: none !important;
}

/* Summary: every answer so far, label and answer side by side. */
.ckit-summary {
	border-top: 1px solid var(--ckit-line);
	display: grid;
	gap: 0.35em 1em;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	margin: 0;
	padding: 0.6em 0 0;
}

.ckit-summary dt {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ckit-summary dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.ckit-summary .ckit-summary-empty {
	grid-column: 1 / -1;
	opacity: 0.75;
}

.ckit-date {
	max-width: 16em;
}

/* Quote requests */
.ckit-quote {
	clear: both;
	margin: 1em 0 0;
	min-width: 0;
	width: 100%;
}

/* "Or ask for a quote" is ConfigKit's own second button, not the theme's plain .button
   (a block theme leaves that to the browser's grey box). */
.ckit-quote button.ckit-quote-open {
	background: var(--ckit-field);
	border: 1px solid var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	min-height: 44px;
	padding: 0.5em 1.1em;
	text-transform: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ckit-quote button.ckit-quote-open:hover {
	border-color: currentColor;
}

.ckit-quote button.ckit-quote-open:focus-visible {
	box-shadow: 0 0 0 3px var(--ckit-ring);
	outline: none;
}

.ckit-quote-fields {
	border-top: 1px solid var(--ckit-line);
	margin-top: 0.75em;
	padding-top: 0.75em;
}

.ckit-quote-title {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0;
}

.ckit-quote-field {
	margin: 0.75em 0 0;
}

.ckit-quote .ckit-quote-send,
.ckit-quote .ckit-quote-open {
	cursor: pointer;
	font: inherit;
	margin-top: 0.75em;
	min-height: 44px;
	padding: 0.6em 1.6em;
}

.ckit-quote-answer {
	font-weight: 600;
	margin: 0.6em 0 0;
}

.ckit-editing {
	font-weight: 600;
	margin: 0 0 1em;
}

.ckit-quote-done {
	border: 2px solid var(--ckit-accent);
	border-radius: var(--ckit-radius);
	font-weight: 600;
	margin: 0 0 1em;
	padding: 0.75em 1em;
}

.ckit-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.ckit-drop {
	background: var(--ckit-field);
	border: 1px dashed var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	padding: 1em;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ckit-drop.is-over {
	background: var(--ckit-soft);
	border-color: var(--ckit-accent);
}

.ckit-file {
	box-sizing: border-box;
	display: block;
	font: inherit;
	max-width: 100%;
	min-height: 44px;
	width: 100%;
}

/* The browser's own "Choose files" button, drawn like ConfigKit's other buttons. */
.ckit-file::file-selector-button {
	background: var(--ckit-field);
	border: 1px solid var(--ckit-line-strong);
	border-radius: var(--ckit-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin: 0 0.75em 0 0;
	min-height: 44px;
	padding: 0.45em 1em;
	transition: border-color 0.15s ease;
}

.ckit-file:hover::file-selector-button {
	border-color: currentColor;
}

.ckit-file:focus-visible {
	border-radius: var(--ckit-radius);
	box-shadow: 0 0 0 3px var(--ckit-ring);
	outline: none;
}

.ckit-drop .ckit-hint {
	margin: 0.4em 0 0;
}

.ckit-files {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
}

.ckit-file-row {
	align-items: center;
	border-top: 1px solid var(--ckit-line);
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: minmax(0, 1fr) auto auto;
}

.ckit-file-name {
	overflow-wrap: anywhere;
}

.ckit-file-state {
	font-size: 0.9em;
	opacity: 0.75;
	white-space: nowrap;
}

.ckit-file-row.is-sending .ckit-file-name {
	opacity: 0.6;
}

/* ------------------------------------------------------------------ Layouts
 * settings.layout: steps (a stepper on top), accordion (steps that fold up), wide (under the
 * photo, a summary card beside it) or single (everything on one page). Each one measures its
 * own width, not the screen's, so it fits a narrow product column and a full-width page alike.
 */

.ckit {
	container: ckit / inline-size;
}

/* Buttons of ConfigKit's own layouts: none of the theme's button look. */
.ckit .ckit-stepper-step,
.ckit .ckit-acc-head {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	min-height: 44px;
	padding: 0;
	text-align: inherit;
	text-transform: none;
	width: 100%;
}

.ckit .ckit-stepper-step:focus-visible,
.ckit .ckit-acc-head:focus-visible {
	border-radius: var(--ckit-radius);
	box-shadow: 0 0 0 3px var(--ckit-ring);
	outline: none;
}

/* A step's number in a circle: the stepper, the accordion, the wide layout's titles. */
.ckit-num,
.ckit-stepper-n {
	align-items: center;
	background: var(--ckit-field);
	border: 2px solid var(--ckit-line-strong);
	border-radius: 50%;
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	font-size: 0.85em;
	font-weight: 700;
	height: 30px;
	justify-content: center;
	line-height: 1;
	position: relative;
	width: 30px;
}

.ckit-stepper-step.is-on .ckit-stepper-n,
.ckit-step.is-open .ckit-num {
	background: var(--ckit-accent);
	border-color: var(--ckit-accent);
	color: var(--ckit-on-accent);
}

/* Done: filled with the text colour, a tick in the page colour. */
.ckit-stepper-step.is-done .ckit-stepper-n,
.ckit-step.is-done .ckit-num {
	background: currentColor;
	border-color: currentColor;
	font-size: 0;
}

.ckit-stepper-step.is-done .ckit-stepper-n::after,
.ckit-step.is-done .ckit-num::after {
	border-bottom: 2px solid var(--ckit-field);
	border-left: 2px solid var(--ckit-field);
	content: "";
	height: 5px;
	transform: translate(0, -1px) rotate(-45deg);
	width: 10px;
}

/* Steps: the stepper, numbered and clickable, with a line between the numbers. */
.ckit:not(.ckit-ready) .ckit-stepper,
.ckit:not(.ckit-ready) .ckit-stepline {
	display: none;
}

.ckit .ckit-stepper {
	display: flex;
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}

.ckit-stepper li {
	flex: 1 1 0;
	margin: 0;
	min-width: 0;
	position: relative;
}

.ckit-stepper li + li::before {
	background: var(--ckit-line-strong);
	content: "";
	height: 2px;
	left: calc(-50% + 20px);
	position: absolute;
	right: calc(50% + 20px);
	top: 14px;
}

.ckit-stepper li:has(.is-on)::before,
.ckit-stepper li:has(.is-done)::before {
	background: currentColor;
}

.ckit .ckit-stepper-step {
	align-content: start;
	display: grid;
	gap: 0.4em;
	justify-items: center;
	text-align: center;
}

.ckit-stepper-name {
	font-size: 0.8125em;
	font-weight: 600;
	opacity: 0.7;
	overflow-wrap: anywhere;
}

.ckit-stepper-step.is-on .ckit-stepper-name {
	opacity: 1;
}

/* Where the stepper has no room: "Step 2 of 3 · Material" and a bar. */
.ckit-stepline {
	display: none;
	margin: 0 0 1em;
}

.ckit-stepline-text {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	margin: 0 0 0.4em;
}

.ckit-stepline-track {
	background: var(--ckit-line);
	border-radius: 4px;
	display: block;
	height: 4px;
	overflow: hidden;
}

.ckit-stepline-bar {
	background: var(--ckit-accent);
	border-radius: 4px;
	display: block;
	height: 100%;
	transition: width 0.3s ease;
	width: 0;
}

/* The stepper already says where you are; "Step 1 of 3" stays for screen readers only. */
.ckit .ckit-stepper ~ .ckit-nav .ckit-progress {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@container ckit (max-width: 30em) {
	.ckit .ckit-stepper {
		display: none;
	}

	.ckit.ckit-ready .ckit-stepline {
		display: block;
	}
}

/* Accordion: each step a card; the open one shows its blocks, the others what was picked. */
.ckit[data-layout="accordion"] .ckit-step {
	background: var(--ckit-field);
	border: 1px solid var(--ckit-line);
	border-radius: calc(var(--ckit-radius) + 4px);
	margin: 0 0 0.75em;
}

.ckit[data-layout="accordion"] .ckit-step.is-open {
	border-color: var(--ckit-line-strong);
}

.ckit .ckit-acc-head {
	align-items: center;
	display: flex;
	gap: 0.75em;
	padding: 0.8em 1em;
}

.ckit-acc-title {
	font-size: 1.05em;
	font-weight: 700;
}

.ckit-acc-recap {
	flex: 1;
	font-size: 0.875em;
	min-width: 0;
	opacity: 0.75;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ckit-acc-change {
	display: none;
	font-size: 0.875em;
	font-weight: 600;
	text-decoration: underline;
}

.ckit-step:not(.is-open) .ckit-acc-recap:not(:empty) + .ckit-acc-change {
	display: inline;
}

.ckit-acc-body {
	padding: 0.25em 1em 1em;
}

.ckit .ckit-continue {
	background: var(--ckit-accent);
	border: 1px solid var(--ckit-accent);
	border-radius: var(--ckit-radius);
	box-shadow: none;
	color: var(--ckit-on-accent);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-height: 44px;
	padding: 0.4em 1.4em;
}

.ckit .ckit-continue:focus-visible {
	box-shadow: 0 0 0 3px var(--ckit-ring);
	outline: none;
}

@container ckit (max-width: 30em) {
	.ckit-acc-recap {
		display: none;
	}
}

/* Wide: under the photo, across the page; the steps on the left, a card on the right with
   every pick and what it adds, the total and the buy button. The card follows on phones. */
/* No side margins or max-width: a block theme's layout centres it and sets its width. */
.ckit-wide-slot {
	box-sizing: border-box;
	clear: both;
	flex-basis: 100%;
	grid-column: 1 / -1;
	margin-bottom: 2em;
	margin-top: 1.5em;
	min-width: 0;
	width: 100%;
}

.ckit-product form.cart.ckit-wide-form {
	display: block !important;
	margin: 0;
	width: 100%;
}

.ckit .ckit-jump,
.ckit-jump {
	display: inline-block;
	font-weight: 600;
	margin: 0.5em 0 1em;
}

.ckit:is([data-layout="wide"], [data-layout="showcase"], [data-layout="columns"]) .ckit-step {
	margin: 0 0 1.75em;
}

.ckit:is([data-layout="wide"], [data-layout="showcase"], [data-layout="columns"]) .ckit-step-title {
	align-items: center;
	display: flex;
	font-size: 1.25em;
	gap: 0.6em;
}

.ckit-card {
	background: var(--ckit-field);
	border: 1px solid var(--ckit-line);
	border-radius: calc(var(--ckit-radius) + 6px);
	box-sizing: border-box;
	margin: 0.5em 0 0;
	padding: 1.25em;
}

.ckit-card-title {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 0.6em;
}

/* Each pick stacked: its name small, then what was picked and what it adds. Reads the same in
   a wide card and in a narrow one (a theme may give the card little room). */
.ckit .ckit-card-lines {
	border-top: 0;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

.ckit .ckit-card-lines dt {
	font-size: 0.8125em;
	font-weight: 400;
	margin: 0.7em 0 0.1em;
	opacity: 0.75;
}

.ckit .ckit-card-lines dt:first-child {
	margin-top: 0;
}

.ckit .ckit-card-lines dd {
	display: flex;
	font-weight: 600;
	gap: 0.75em;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

.ckit-line-price {
	flex: none;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
	white-space: nowrap;
}

.ckit-card-total {
	align-items: baseline;
	border-top: 2px solid currentColor;
	display: flex;
	font-weight: 600;
	justify-content: space-between;
	margin: 0.9em 0 0;
	padding: 0.7em 0 0;
}

.ckit-card-total strong {
	color: var(--ckit-price);
	font-size: 1.6em;
	font-variant-numeric: tabular-nums;
}

.ckit-card-note {
	font-size: 0.875em;
	margin: 0.25em 0 0;
	opacity: 0.8;
}

.ckit-card-note:empty {
	display: none;
}

.ckit-card-buy .single_add_to_cart_button {
	box-sizing: border-box;
	justify-content: center;
	margin: 1em 0 0 !important;
	text-align: center;
	width: 100%;
}

.ckit-card-buy .ckit-quote {
	margin-top: 0.75em;
}

@container ckit (min-width: 44em) {
	.ckit-wide {
		align-items: start;
		display: grid;
		gap: 2.5em;
		grid-template-columns: minmax(0, 1fr) minmax(17em, 34%);
	}

	.ckit-card {
		margin: 0;
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5em);
	}

	/* The card shows the price on a wide screen; the bar is for phones. */
	.ckit-wide ~ .ckit-bar {
		display: none;
	}
}

/* Showcase: under the photo, a big picture beside the options that becomes the picked option's
   own picture (frontend.js), the price and the buy button under the options. Stacked when narrow. */
.ckit .ckit-show-pic {
	margin: 0 0 1.5em;
	min-width: 0;
}

.ckit .ckit-show-img {
	background: var(--ckit-soft);
	border-radius: calc(var(--ckit-radius) + 6px);
	display: block;
	height: auto;
	max-height: 60vh;
	object-fit: contain;
	width: 100%;
}

.ckit .ckit-show-name {
	font-size: 1em;
	font-style: normal;
	font-weight: 600;
	margin: 0.6em 0 0;
	text-align: center;
}

.ckit .ckit-show-name:empty {
	display: none;
}

.ckit-show-main {
	min-width: 0;
}

.ckit-show-buy .single_add_to_cart_button {
	box-sizing: border-box;
	justify-content: center;
	margin: 0.75em 0 0 !important;
	text-align: center;
	width: 100%;
}

.ckit-show-buy:empty {
	display: none;
}

@container ckit (min-width: 44em) {
	.ckit-show {
		align-items: start;
		display: grid;
		gap: 2.5em;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.ckit .ckit-show-pic {
		margin: 0;
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5em);
	}

	.ckit .ckit-show-img {
		max-height: calc(100vh - 6em);
	}
}

/* Columns: under the photo, everything at once, two blocks side by side where there is room.
   Wide blocks (a price grid, files, a summary, many option cards) take the whole row. */
@container ckit (min-width: 40em) {
	.ckit[data-layout="columns"] .ckit-step {
		align-items: start;
		column-gap: 2em;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ckit[data-layout="columns"] .ckit-step > :is(.ckit-step-title, .ckit-type-grid, .ckit-type-upload, .ckit-type-summary, .ckit-type-info),
	.ckit[data-layout="columns"] .ckit-step > .ckit-block:has(.ckit-option:nth-child(5)) {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ Look
 * The Look tab's Style panel. Colours, sizes and spaces arrive as variables on .ckit (used in
 * the rules above); each choice of a few words arrives as a class ckit-{setting}-{choice}.
 * The quote form carries the same classes, for when it sits outside the configurator.
 */

/* Font: the theme's (nothing set), or one of four stacks every computer already has. */
.ckit-font-system {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ckit-font-modern {
	font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
}

.ckit-font-rounded {
	font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
}

.ckit-font-serif {
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
	/* Sitka and Georgia draw old-style numbers by default ("3oo x 1oo cm", "£25.00" with dropping digits); sizes
	   and prices read better with the numbers all one height. */
	font-variant-numeric: lining-nums;
}

/* A theme's own heading and button fonts would win inside; the picked font goes all the way. */
:is(.ckit-font-system, .ckit-font-modern, .ckit-font-rounded, .ckit-font-serif) :is(h3, legend, label, button, input, select, textarea, dt, dd, strong) {
	font-family: inherit;
}

/* Labels in small capitals. */
.ckit-labels-caps .ckit-label {
	font-size: 0.8125em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Option boxes: soft (a tint, no outline), pills (round, side by side), tiles (picture on top). */
.ckit-opt-soft .ckit-option {
	background: var(--ckit-soft);
	border-color: transparent;
}

.ckit-opt-soft .ckit-option:hover {
	background: var(--ckit-soft-strong);
	border-color: transparent;
}

.ckit-opt-soft .ckit-option.is-picked {
	background: var(--ckit-picked);
	border-color: var(--ckit-accent);
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option-list {
	display: flex;
	flex-wrap: wrap;
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option {
	border-radius: 999px;
	padding: 0.45em 1.15em;
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option.is-picked::after {
	display: none;
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option-text {
	align-items: baseline;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 0.5em;
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option-image {
	border-radius: 50%;
	height: 30px;
	margin-left: -0.65em;
	width: 30px;
}

.ckit-opt-pills :is(.ckit-display-cards, .ckit-display-swatches) .ckit-swatch {
	height: 22px;
	margin-left: -0.6em;
	width: 22px;
}

.ckit-opt-tiles :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option {
	align-items: stretch;
	flex-direction: column;
	gap: 0.55em;
	padding: var(--ckit-optpad, 0.6em);
	text-align: center;
}

.ckit-opt-tiles :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option-image {
	aspect-ratio: 1;
	border-radius: max(0px, calc(var(--ckit-radius) - 2px));
	height: auto;
	width: 100%;
}

.ckit-opt-tiles :is(.ckit-display-cards, .ckit-display-swatches) .ckit-swatch {
	aspect-ratio: 2;
	border-radius: max(0px, calc(var(--ckit-radius) - 2px));
	height: auto;
	width: 100%;
}

.ckit-opt-tiles :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option-text {
	align-items: center;
}

.ckit-opt-tiles :is(.ckit-display-cards, .ckit-display-swatches) .ckit-option.is-picked::after {
	right: 1em;
	top: 1em;
}

/* Picked: filled with the accent colour instead of a tint. */
.ckit-pick-fill .ckit-option.is-picked,
.ckit-pick-fill .ckit-preset.is-picked {
	background: var(--ckit-accent);
	border-color: var(--ckit-accent);
	color: var(--ckit-on-accent);
}

.ckit-pick-fill .ckit-option.is-picked::after {
	background: var(--ckit-on-accent);
}

.ckit-pick-fill .ckit-option.is-picked input {
	accent-color: var(--ckit-on-accent);
}

.ckit-pick-fill .ckit-cell.is-picked {
	background: var(--ckit-accent);
	color: var(--ckit-on-accent);
}

/* Shadow under option boxes (used by the rules above as --ckit-shadow). */
.ckit-shadow-soft {
	--ckit-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 3px 10px rgba(0, 0, 0, 0.07);
}

.ckit-shadow-deep {
	--ckit-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 26px rgba(0, 0, 0, 0.13);
}

/* Buttons: outline, pill or soft; solid (nothing set) is as before. The quote's "Or ask for a
   quote" has a stronger rule of its own above, so it is named with its tag here. */
.ckit-btn-pill :is(.ckit-next, .ckit-back, .ckit-continue, .ckit-preset, .ckit-qty-step, .ckit-add-piece),
.ckit-btn-pill button.ckit-quote-open,
.ckit-btn-pill .ckit-file::file-selector-button {
	border-radius: 999px;
}

/* Words in the accent colour: --ckit-accent-ink is a darker (or lighter) shade of it when the
   accent itself would not read on the background, worked out with the look. */
.ckit-btn-outline :is(.ckit-next, .ckit-continue) {
	background: transparent;
	border: 2px solid var(--ckit-accent);
	color: var(--ckit-accent-ink, var(--ckit-accent));
}

.ckit-btn-soft :is(.ckit-next, .ckit-continue) {
	background: var(--ckit-accent-soft);
	border-color: transparent;
	color: var(--ckit-accent-ink, var(--ckit-accent));
}

.ckit-btn-soft :is(.ckit-back, .ckit-preset, .ckit-qty-step, .ckit-add-piece),
.ckit-btn-soft button.ckit-quote-open {
	background: var(--ckit-soft-strong);
	border-color: transparent;
}

/* The shop's own buy button (and the quote's send button) made to match: frontend.js gives it
   ckit-buy-button and the configurator's colours. Themes style that button hard, hence !important. */
.single_add_to_cart_button.ckit-buy-button,
.ckit-buy .ckit-quote-send {
	background: var(--ckit-accent) !important;
	border: 2px solid var(--ckit-accent) !important;
	border-radius: var(--ckit-radius) !important;
	box-shadow: none !important;
	color: var(--ckit-on-accent) !important;
	min-height: 48px;
}

.single_add_to_cart_button.ckit-buy-button:hover,
.ckit-buy .ckit-quote-send:hover {
	filter: brightness(1.08);
}

.single_add_to_cart_button.ckit-buy-button.ckit-btn-pill,
.ckit-buy.ckit-btn-pill .ckit-quote-send {
	border-radius: 999px !important;
}

.single_add_to_cart_button.ckit-buy-button.ckit-btn-outline,
.ckit-buy.ckit-btn-outline .ckit-quote-send {
	background: transparent !important;
	color: var(--ckit-accent-ink, var(--ckit-accent)) !important;
}

.single_add_to_cart_button.ckit-buy-button.ckit-btn-soft,
.ckit-buy.ckit-btn-soft .ckit-quote-send {
	background: var(--ckit-accent-soft) !important;
	border-color: transparent !important;
	color: var(--ckit-accent-ink, var(--ckit-accent)) !important;
}

/* The whole configurator as a card: a shadow or an outline around its background. */
.ckit.ckit-panel-shadow {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.09);
}

.ckit.ckit-panel-border {
	border: 1px solid var(--ckit-line);
}

/* The price: in a tinted band, on the accent colour, or big. */
.ckit-barlook-band .ckit-bar,
.ckit-barlook-accent .ckit-bar {
	border-radius: var(--ckit-radius);
	border-top: 0;
	margin: 0 0 0.75em;
	padding: 0.85em 1.1em;
}

.ckit-barlook-band .ckit-bar {
	background: var(--ckit-accent-soft);
}

.ckit-barlook-accent .ckit-bar {
	background: var(--ckit-accent);
	color: var(--ckit-on-accent);
}

.ckit-barlook-accent .ckit-total {
	color: inherit;
}

.ckit-barlook-big .ckit-bar {
	align-items: flex-start;
	border-top: 0;
	flex-direction: column;
	gap: 0.15em;
}

.ckit-barlook-big .ckit-bar-label {
	font-size: 0.8125em;
	letter-spacing: 0.06em;
	opacity: 0.75;
	text-transform: uppercase;
}

.ckit-barlook-big .ckit-total {
	font-size: 2.2em;
	line-height: 1.1;
}

.ckit .ckit-bar.ckit-bar-pinned {
	border-radius: 0;
}

/* Steps on top: round pills with the step's name, or only "Step 2 of 3" and a bar. */
.ckit.ckit-stepper-line .ckit-stepper {
	display: none;
}

.ckit.ckit-stepper-line.ckit-ready .ckit-stepline {
	display: block;
}

.ckit.ckit-stepper-pills .ckit-stepper {
	flex-wrap: wrap;
	gap: 0.5em;
}

.ckit-stepper-pills .ckit-stepper li {
	flex: 0 0 auto;
}

.ckit-stepper-pills .ckit-stepper li + li::before {
	display: none;
}

.ckit.ckit-stepper-pills .ckit-stepper-step {
	align-items: center;
	background: var(--ckit-soft-strong);
	border-radius: 999px;
	display: inline-flex;
	gap: 0.5em;
	padding: 0.3em 1em 0.3em 0.3em;
	width: auto;
}

.ckit-stepper-pills .ckit-stepper-n {
	border-width: 0;
	height: 28px;
	width: 28px;
}

.ckit-stepper-pills .ckit-stepper-name {
	opacity: 0.85;
}

.ckit.ckit-stepper-pills .ckit-stepper-step.is-on {
	background: var(--ckit-accent);
	color: var(--ckit-on-accent);
}

.ckit-stepper-pills .ckit-stepper-step.is-on .ckit-stepper-n {
	background: var(--ckit-on-accent);
	color: var(--ckit-accent);
}

.ckit-stepper-pills .ckit-stepper-step.is-on .ckit-stepper-name {
	opacity: 1;
}