/**
 * Storefront styles driven by StoreEngine → Customize.
 *
 * Every rule is scoped to a class the Customize subsystem adds (body classes,
 * .storeengine-customize-* wrappers, [data-se-theme]), so a site that never opens
 * the Customize screen renders exactly as before. Values come from custom
 * properties printed by StoreEngine\Customize\Palette and Customize\Frontend.
 */

/* ---------- Shape tokens on the product grid ---------- */

.storeengine-product-wrapper .storeengine-product,
.storeengine-customize-card {
	border-radius: var(--se-shop-radius, 8px);
	overflow: hidden;
}

.storeengine-product__thumbnail img,
.storeengine-customize-card .wp-block-storeengine-product-media img {
	aspect-ratio: var(--se-shop-image-ratio, auto);
	object-fit: cover;
	width: 100%;
}

.storeengine-product__title,
.storeengine-customize-card .wp-block-storeengine-product-title {
	font-size: var(--se-shop-title-size, 18px);
}

.storeengine-product .storeengine-btn,
.storeengine-customize-card .storeengine-btn,
.storeengine-customize-buy-box .storeengine-btn {
	border-radius: var(--se-shop-button-radius, 6px);
}

/* ---------- Brand colours on StoreEngine buttons ---------- */

/*
 * Classic themes (Twenty Twenty-One, for one) style every <button> with rules
 * like `button:not(:hover):not(:active):not(.has-background)` — specificity
 * 0,3,1, which beats `.storeengine-btn` (0,1,0) — so the theme's colours
 * replaced the brand colour on every StoreEngine button. Restate the button's
 * own variables (set by its preset class from --storeengine-*-color) at 0,4,0
 * / 0,3,0. Theme buttons are untouched; only `.storeengine-btn` is targeted.
 */
.storeengine-btn:not(:hover):not(:active):not(:focus) {
	border-color: var(--border-color);
	background: var(--bg-color);
	color: var(--text-color);
}

.storeengine-btn.storeengine-btn:hover,
.storeengine-btn.storeengine-btn:focus,
.storeengine-btn.storeengine-btn:active {
	border-color: var(--hover-border-color, var(--border-color));
	background: var(--hover-bg-color, var(--bg-color));
	color: var(--hover-text-color, var(--text-color));
}

/* ---------- Parts the Customize screen adds to classic cards ---------- */

.storeengine-customize-classic-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.storeengine-customize-classic-badges .storeengine-badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--storeengine-secondary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
}

.storeengine-customize-classic-badges .storeengine-badge--out-of-stock {
	background: var(--storeengine-text-color);
}

/*
 * The Product Badges block (block cards and product pages) had no style of
 * its own, so "Sale" showed as plain text and Secondary was never used. Same
 * pills as the classic card; a background or text colour picked on the block
 * in the editor is kept.
 */
.wp-block-storeengine-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wp-block-storeengine-product-badges .storeengine-badge {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
}

.wp-block-storeengine-product-badges:not(.has-background) .storeengine-badge {
	background: var(--storeengine-secondary-color);
}

.wp-block-storeengine-product-badges:not(.has-background) .storeengine-badge--out-of-stock {
	background: var(--storeengine-text-color);
}

.wp-block-storeengine-product-badges:not(.has-text-color) .storeengine-badge {
	color: #fff;
}

.storeengine-customize-classic-rating,
.storeengine-customize-classic-excerpt {
	margin: 4px 16px;
	font-size: 14px;
}

/*
 * Products per row on the classic shop. Its 12-column classes can only make
 * 1, 2, 3, 4 or 6 a row (5 came out as 4), so size the cards from the same
 * values and breakpoints as the block catalog.
 */
.se-customize-classic .storeengine-products__body > .storeengine-row > .storeengine-product-wrapper {
	flex: 0 0 calc(100% / var(--se-shop-cols-desktop, 3));
	max-width: calc(100% / var(--se-shop-cols-desktop, 3));
}

@media (max-width: 1024px) {

	.se-customize-classic .storeengine-products__body > .storeengine-row > .storeengine-product-wrapper {
		flex-basis: calc(100% / var(--se-shop-cols-tablet, 2));
		max-width: calc(100% / var(--se-shop-cols-tablet, 2));
	}
}

@media (max-width: 600px) {

	.se-customize-classic .storeengine-products__body > .storeengine-row > .storeengine-product-wrapper {
		flex-basis: calc(100% / var(--se-shop-cols-mobile, 1));
		max-width: calc(100% / var(--se-shop-cols-mobile, 1));
	}
}

/* ---------- Block catalog built from the customization ---------- */

.storeengine-customize-catalog .wp-block-post-template {
	grid-template-columns: repeat(var(--se-shop-cols-desktop, 3), minmax(0, 1fr)) !important;
}

.storeengine-customize-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding-bottom: 16px;
	background: var(--storeengine-surface-color, #fff);
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
}

.storeengine-customize-card > :not(.wp-block-storeengine-product-media) {
	padding-inline: 16px;
	margin: 0;
}

/*
 * Shared by every card style. Theme link underlines and the theme's body-size
 * stock line made the card look unstyled; the buttons sit side by side (and
 * wrap when the card is narrow) at the foot, so a row of cards lines up.
 */
.storeengine-customize-card .wp-block-storeengine-product-title {
	line-height: 1.35;
}

.storeengine-customize-card .wp-block-storeengine-product-title a,
.storeengine-customize-page .wp-block-storeengine-product-title a {
	text-decoration: none;
}

.storeengine-customize-card .wp-block-storeengine-product-add-to-cart {
	margin-top: auto;
}

.storeengine-customize-card .storeengine-stock-badge,
.storeengine-customize-buy-box .storeengine-stock-badge {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
}

.storeengine-customize-card .storeengine-single-product-quantity-wrap {
	flex-flow: row wrap;
	gap: 8px;
}

.storeengine-customize-card .storeengine-single-product-quantity-wrap > .storeengine-btn {
	flex: 1 1 110px;
	min-width: 0;
	margin: 0;
}

/* The product's name heads the buy box, sized for its narrower column. */
.storeengine-customize-buy-box .wp-block-storeengine-product-title {
	margin-top: 0;
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.2;
}

@media (max-width: 1024px) {

	.storeengine-customize-catalog .wp-block-post-template {
		grid-template-columns: repeat(var(--se-shop-cols-tablet, 2), minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {

	.storeengine-customize-catalog .wp-block-post-template {
		grid-template-columns: repeat(var(--se-shop-cols-mobile, 1), minmax(0, 1fr)) !important;
	}
}

.storeengine-customize-buy-box {
	position: sticky;
	top: 24px;
	padding: 20px;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: var(--se-shop-radius, 8px);
	background: var(--storeengine-surface-color, #fff);
}

/* ---------- Global colours on StoreEngine's own parts ---------- */

/*
 * Text, Border and Surface from Customize → Colors. The cards, the product
 * page, the checkout and the dashboard set no ink of their own, so their text
 * inherited the theme's body colour; headings and title links got the theme's
 * heading and link colours, which beat inheritance. Like Academy's course card: the ink is set on the
 * part at no specificity (:where), headings and title links take it unless a
 * colour was picked on that block (.has-text-color; a link colour shows as
 * .has-link-color or, in newer WordPress, a .wp-elements-* class), and
 * anything set on a block in the editor still wins.
 */
:where(.storeengine-customize-card, .storeengine-customize-page, .se-customize-classic .storeengine-product, .se-customize-classic .storeengine-single-product, .se-customize-classic .storeengine-products, .storeengine-customize-catalog-columns, .storeengine-customize-checkout-page, .storeengine-frontend-dashboard) {
	color: var(--storeengine-text-color, #1d2939);
}

/* The shop's own heading, sidebar titles and filter labels included. */
:where(.storeengine-customize-card, .storeengine-customize-page, .se-customize-classic .storeengine-product, .se-customize-classic .storeengine-single-product, .se-customize-classic .storeengine-products, .storeengine-customize-catalog-columns, .storeengine-customize-checkout-page, .storeengine-frontend-dashboard) :is(h1, h2, h3, h4, h5, h6, label):not(.has-text-color) {
	color: var(--storeengine-text-color, #1d2939);
}

/* Old (struck) prices: a softer Text, not the theme's grey. */
.storeengine-customize-card del .storeengine-price,
.storeengine-customize-page del .storeengine-price,
.se-customize-classic .storeengine-product del .storeengine-price,
.se-customize-classic .storeengine-single-product del .storeengine-price {
	color: color-mix(in srgb, var(--storeengine-text-color, #1d2939) 60%, transparent);
}

/*
 * The Price block prints the classic card's price element, which the classic
 * card styles as a centred column: inside a block card on a classic shop the
 * price jumped to the centre whatever the block's alignment. Let the block's
 * own text-align place it.
 */
.wp-block-storeengine-product-price .storeengine-product__simple-price {
	display: inline;
}

.wp-block-storeengine-product-price .storeengine-product__simple-price del {
	margin-inline-end: 6px;
}

/*
 * The Add to Cart block prints the product form, price included; where the
 * card or product page also has a Price block that price showed twice. Keep
 * the form's own price only when there is no Price block.
 */
.storeengine-customize-card:has(.wp-block-storeengine-product-price) .wp-block-storeengine-product-add-to-cart :is(.storeengine-single-product-simple-price, .storeengine-single-product-prices, .storeengine-product__simple-price),
.storeengine-customize-page:has(.wp-block-storeengine-product-price) .wp-block-storeengine-product-add-to-cart :is(.storeengine-single-product-simple-price, .storeengine-single-product-prices, .storeengine-product__simple-price) {
	display: none;
}

/* Add to Cart block with "Show quantity" off (the product card uses it so). */
.storeengine-product-add-to-cart--no-quantity .storeengine-quantity-input {
	display: none;
}

/*
 * Add to Cart and Buy Now (and the in-cart button) side by side: the same
 * border, in the Borders colour. Only one of them got a border from theme
 * button styles, so Buy Now looked borderless.
 */
.storeengine-ajax-add-to-cart-form button.storeengine-btn:is(.storeengine-btn--add-to-cart, .storeengine-btn--direct-checkout, .storeengine-btn--add-to-cart-replacement) {
	--border-size: 1px;
	--hover-border-size: 1px;
	border: 1px solid var(--border-color, var(--storeengine-border-color, #e4e7ec));
}

.storeengine-customize-card .wp-block-storeengine-product-title:not(.has-link-color):not([class*="wp-elements-"]) a,
.storeengine-customize-page .wp-block-storeengine-product-title:not(.has-link-color):not([class*="wp-elements-"]) a,
.se-customize-classic .storeengine-product .storeengine-product__title a {
	color: inherit;
}

.storeengine-customize-card .wp-block-storeengine-product-title:not(.has-link-color):not([class*="wp-elements-"]) a:is(:hover, :focus-visible),
.storeengine-customize-page .wp-block-storeengine-product-title:not(.has-link-color):not([class*="wp-elements-"]) a:is(:hover, :focus-visible),
.se-customize-classic .storeengine-product .storeengine-product__title a:is(:hover, :focus-visible) {
	color: var(--storeengine-primary-color, currentColor);
}

/* The classic card is the same card as the block one: a surface with a border. */
.se-customize-classic .storeengine-product-wrapper .storeengine-product {
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	background: var(--storeengine-surface-color, #fff);
}

/* The quantity field sits on the surface too (its box takes the border colour). */
.storeengine-quantity-input .storeengine-quantity-input__input {
	background-color: var(--storeengine-surface-color, #fff);
	color: var(--storeengine-text-color, #1d2939);
}

/* ---------- Colour mode ---------- */

[data-se-theme="dark"] body,
[data-se-theme="dark"] .storeengine-customize-checkout-page,
[data-se-theme="dark"] .storeengine-frontend-dashboard {
	color: var(--storeengine-text-color);
}

[data-se-theme="dark"] body {
	background: var(--storeengine-background-color);
}

/*
 * Theme headings and titles keep the theme's own (dark) ink, which is
 * unreadable on the dark background. Only while StoreEngine's dark mode is on
 * (checkout, dashboard, or the Customize preview of the dark colours).
 */
[data-se-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .wp-block-post-title, .site-title) {
	color: var(--storeengine-text-color);
}

[data-se-theme="dark"] body :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea) {
	border-color: var(--storeengine-border-color);
	background-color: var(--storeengine-surface-color);
	color: var(--storeengine-text-color);
}

[data-se-theme="dark"] body :is(.entry-content, .storeengine-customize-checkout-page, .storeengine-frontend-dashboard) a:not(.storeengine-btn) {
	color: var(--storeengine-primary-color);
}

/*
 * Dark mode swaps the palette, but labels, field text and placeholders use
 * StoreEngine's subtitle / input / placeholder colours, which stayed dark on
 * the dark surface. Derive them from the dark Text colour.
 */
[data-se-theme="dark"] {
	--storeengine-subtitle-color: color-mix(in srgb, var(--storeengine-text-color) 72%, transparent);
	--storeengine-input-text-color: var(--storeengine-text-color);
	--storeengine-placeholder-color: color-mix(in srgb, var(--storeengine-text-color) 50%, transparent);
}

@media (prefers-color-scheme: dark) {

	[data-se-theme="system"] {
		--storeengine-subtitle-color: color-mix(in srgb, var(--storeengine-text-color) 72%, transparent);
		--storeengine-input-text-color: var(--storeengine-text-color);
		--storeengine-placeholder-color: color-mix(in srgb, var(--storeengine-text-color) 50%, transparent);
	}
}

[data-se-theme="dark"] :is(.storeengine-customize-checkout-page, .storeengine-frontend-dashboard) label {
	color: var(--storeengine-subtitle-color);
}

/* Empty states sit on a white illustration panel; in dark mode keep them on the surface. */
[data-se-theme="dark"] .storeengine-oops__message {
	background-color: var(--storeengine-surface-color);
}

[data-se-theme="dark"] .storeengine-oops__message img {
	opacity: 0.2;
}

.storeengine-customize-theme-switch {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;

	/* Themes pad every <button> (Astra: 15px 30px); the switch was oval. */
	padding: 0;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: 50%;
	background: var(--storeengine-surface-color, #fff);
	color: var(--storeengine-text-color, #1d2939);
	cursor: pointer;
}

.storeengine-customize-theme-switch::before {
	content: "\25D0";
	font-size: 20px;
	line-height: 1;
}

/* ---------- Cart & Checkout ---------- */

/*
 * Cart totals, mini cart and thank-you page: their muted text (variant name,
 * notes, summary rows) uses StoreEngine's fixed greys, so derive those from
 * Text here, and the "View My Cart" button from Gray / Text / Borders.
 */
:where(.storeengine-cart-sub-total-table-shortcode, .storeengine-mini-cart-drawer, .storeengine-order-details-shortcode, .storeengine-thankyou-order-info-shortcode, .storeengine-thankyou-payment-instructions) {
	--storeengine-subtitle-color: color-mix(in srgb, var(--storeengine-text-color, #1d2939) 72%, transparent);
	--storeengine-gray-color: color-mix(in srgb, var(--storeengine-text-color, #1d2939) 65%, transparent);
	color: var(--storeengine-text-color, #1d2939);
}

.storeengine-thankyou-summery--item p:last-child,
.storeengine-order-details-shortcode .storeengine-order-item__price,
.storeengine-order-details-shortcode .storeengine-order-item__title :is(h6, h6 a) {
	color: var(--storeengine-text-color, #1d2939);
}

.storeengine-mini-cart-drawer .storeengine-btn--bg-gray {
	--bg-color: var(--storeengine-background-color, #f6f7f9);
	--hover-bg-color: color-mix(in srgb, var(--storeengine-background-color, #f6f7f9) 88%, var(--storeengine-text-color, #1d2939));
	--text-color: var(--storeengine-text-color, #1d2939);
	--hover-text-color: var(--storeengine-text-color, #1d2939);
	--border-color: var(--storeengine-border-color, #e4e7ec);
	--hover-border-color: var(--storeengine-border-color, #e4e7ec);
	--border-size: 1px;
	--hover-border-size: 1px;
}

.storeengine-customize-checkout-page {
	margin-inline: auto;
	padding: 24px 0;
	background: var(--se-checkout-page, transparent);
}

.se-checkout-width-standard .storeengine-customize-checkout-page {
	max-width: 1140px;
}

.se-checkout-width-wide .storeengine-customize-checkout-page {
	max-width: 1400px;
}

.se-checkout-width-focused .storeengine-customize-checkout-page {
	max-width: 760px;
}

.storeengine-customize-checkout-page > .wp-block-columns {
	gap: 32px;
}

.storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:first-child {
	background: var(--se-checkout-form, transparent);
}

/* The form's box takes the same corners as the summary beside it. */
.storeengine-customize-checkout-page .storeengine-ajax-checkout-form {
	border-radius: var(--se-shop-radius, 8px);
}

.storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:last-child {
	flex: 0 0 var(--se-checkout-summary-width, 380px) !important;
	align-self: flex-start;
	padding: 20px;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: var(--se-shop-radius, 8px);
	background: var(--se-checkout-summary, var(--storeengine-surface-color, #fff));
}

.se-checkout-sticky .storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:last-child {
	position: sticky;
	top: 24px;
}

.se-checkout-summary-left .storeengine-customize-checkout-page > .wp-block-columns {
	flex-direction: row-reverse;
}

.se-checkout-stacked .storeengine-customize-checkout-page > .wp-block-columns {
	flex-direction: column;
}

.se-checkout-stacked .storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:last-child {
	flex-basis: auto !important;
	width: 100%;
	/* Sticky is for the side-by-side layout; on top of the form it would cover it. */
	position: static;
}

/*
 * One column: what is being bought first, then the form. Picked by content,
 * not position, so it holds whichever side the summary was set to.
 */
.se-checkout-stacked .storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:has(.storeengine-ajax-checkout-form) {
	order: 1;
}

/*
 * The button's own variables too: the brand-colour rule for every
 * .storeengine-btn above restates `background: var(--bg-color)` at a higher
 * specificity, which hid the Place order colour.
 */
.storeengine-customize-checkout-page .storeengine-btn--preset-blue,
.storeengine-customize-checkout-page button[type="submit"] {
	--bg-color: var(--se-checkout-button, var(--storeengine-primary-color));
	--border-color: var(--se-checkout-button, var(--storeengine-primary-color));
	--hover-bg-color: color-mix(in srgb, var(--se-checkout-button, var(--storeengine-primary-color)) 86%, #000);
	--hover-border-color: color-mix(in srgb, var(--se-checkout-button, var(--storeengine-primary-color)) 86%, #000);
	border-radius: var(--se-shop-button-radius, 6px);
	background: var(--se-checkout-button, var(--storeengine-primary-color));
}

.storeengine-customize-checkout-page input:checked + label,
.storeengine-customize-checkout-page .is-selected {
	border-color: var(--se-checkout-highlight, var(--storeengine-primary-color));
}

.se-checkout-hide-coupon .storeengine-customize-checkout-page .storeengine-ajax-apply-coupon-form {
	display: none;
}

.se-checkout-steps .storeengine-ajax-checkout-form {
	counter-reset: se-checkout-step;
}

.se-checkout-steps .storeengine-ajax-checkout-form h3::before,
.se-checkout-steps .storeengine-ajax-checkout-form h4::before {
	counter-increment: se-checkout-step;
	content: counter(se-checkout-step) ". ";
	color: var(--se-checkout-highlight, var(--storeengine-primary-color));
}

.storeengine-customize-secure-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13px;
	opacity: 0.8;
}

@media (max-width: 781px) {

	.storeengine-customize-checkout-page > .wp-block-columns,
	.se-checkout-summary-left .storeengine-customize-checkout-page > .wp-block-columns {
		flex-direction: column;
	}

	.storeengine-customize-checkout-page > .wp-block-columns > .wp-block-column:last-child {
		flex-basis: auto !important;
		position: static;
	}
}

/* ---------- Customer dashboard ---------- */

.storeengine-frontend-dashboard {
	/*
	 * The menu section labels ("Vendor", "Account") and the collapse button use
	 * StoreEngine's fixed grey (#475467), outside the palette; mix it from Text
	 * instead (about the same grey with the default colours).
	 */
	--storeengine-gray-color: color-mix(in srgb, var(--storeengine-text-color, #1d2939) 78%, var(--storeengine-surface-color, #fff));
	background: var(--se-dashboard-background, transparent);
}

/*
 * The dashboard pages' own parts, in StoreEngine and its add-ons (vendor
 * analytics, orders, downloads): number cards, filter fields and tables sat on
 * fixed white with theme borders. Surface, Borders, Gray and Text instead.
 */
.storeengine-frontend-dashboard :is(.storeengine-stat-card, .storeengine-table-wrap) {
	border-color: var(--storeengine-border-color, #e4e7ec);
	background-color: var(--se-dashboard-card, var(--storeengine-surface-color, #fff));
	color: var(--storeengine-text-color, #1d2939);
}

.storeengine-frontend-dashboard :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
	border-color: var(--storeengine-border-color, #e4e7ec);
	background-color: var(--storeengine-surface-color, #fff);
	color: var(--storeengine-text-color, #1d2939);
}

.storeengine-frontend-dashboard .storeengine-table :is(th, td) {
	border-color: var(--storeengine-border-color, #e4e7ec);
}

.storeengine-frontend-dashboard .storeengine-table thead :is(th, td) {
	background-color: var(--storeengine-background-color, #f9fafb);
	color: var(--storeengine-text-color, #1d2939);
}

.storeengine-frontend-dashboard .storeengine-topbar__breadcrumb-link {
	color: color-mix(in srgb, var(--storeengine-text-color, #1d2939) 70%, transparent);
}

/* min-width: StoreEngine's stylesheet gives the dashboard min-width: 100%, which beat the cap. */
.se-dashboard-width-boxed .storeengine-frontend-dashboard {
	min-width: 0;
	max-width: 1140px;
	margin-inline: auto;
}

.se-dashboard-width-full .storeengine-frontend-dashboard {
	max-width: none;
	width: 100%;
}

@media (min-width: 768px) {

	.storeengine-frontend-dashboard__sidebar {
		flex: 0 0 var(--se-dashboard-menu-width, 260px) !important;
		max-width: var(--se-dashboard-menu-width, 260px) !important;
		background: var(--se-dashboard-sidebar, transparent);
	}

	.storeengine-frontend-dashboard__content {
		flex: 1 1 0 !important;
		max-width: none !important;
	}

	.se-dashboard-collapsed .storeengine-frontend-dashboard__sidebar {
		flex-basis: 72px !important;
		max-width: 72px !important;
	}

	.se-dashboard-collapsed .storeengine-frontend-dashboard__sidebar .storeengine-dashboard-menu__item-label,
	.se-dashboard-collapsed .storeengine-dashboard-menu__separator {
		display: none;
	}
}

/*
 * As specific as StoreEngine's own rule for the current item (which uses the
 * Gray colour and beat this one, so "Current menu item" never showed); with no
 * colour picked it stays Gray, as before.
 */
.storeengine-frontend-dashboard .storeengine-dashboard-menu__item-current > a.storeengine-dashboard-menu__item-link,
.storeengine-frontend-dashboard .storeengine-dashboard-menu__item-current > a {
	background: var(--se-dashboard-active, var(--storeengine-background-color));
}

.storeengine-frontend-dashboard .storeengine-topbar {
	background: var(--se-dashboard-topbar, transparent);
}

.storeengine-customize-welcome {
	margin: 0 0 20px;
	font-size: 22px;
}

.storeengine-customize-stats {
	display: grid;
	grid-template-columns: repeat(var(--se-dashboard-card-columns, 4), minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.storeengine-customize-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: var(--se-shop-radius, 8px);
	background: var(--se-dashboard-card, var(--storeengine-surface-color, #fff));
}

.storeengine-customize-stat__value {
	font-size: 22px;
	font-weight: 600;
}

.storeengine-customize-stat__label {
	font-size: 13px;
	opacity: 0.75;
}

@media (max-width: 600px) {

	.storeengine-customize-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Bare page ---------- */

.storeengine-customize-bare__main {
	padding: 24px 16px;
}