/*!
 * WooKit — Store Benefits / Features grid.
 * Responsive icon + title + text cards on a soft accent-tinted surface.
 * Styled entirely from --wookit-* tokens so it tracks the configured theme.
 */

.wookit-benefits {
	container-type: inline-size;
	container-name: wookit-benefits;
	font-family: var( --wookit-font, inherit ) !important;
	color: var( --wookit-body, inherit ) !important;
}

.wookit-benefits *,
.wookit-benefits *::before,
.wookit-benefits *::after { box-sizing: border-box !important; }

/* ── Grid: `columns` on wide screens, collapsing to 2 → 1 as it narrows ─── */
.wookit-benefits__grid {
	display: grid;
	grid-template-columns: repeat( var( --wookit-benefits-cols, 4 ), minmax( 0, 1fr ) );
	gap: 16px;
}

@container wookit-benefits ( max-width: 820px ) {
	.wookit-benefits__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@container wookit-benefits ( max-width: 480px ) {
	.wookit-benefits__grid { grid-template-columns: 1fr; }
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.wookit-benefit {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border-radius: var( --wookit-radius-lg, 16px ) !important;
	/* Soft accent tint with a graceful fallback for browsers without color-mix. */
	background: var( --wookit-surface-alt, #f1f5f9 ) !important;
	background: color-mix( in srgb, var( --wookit-accent, #6366f1 ) 12%, var( --wookit-surface, #fff ) ) !important;
}

/* Stacked variant: icon above the text, left-aligned. */
.wookit-benefits--stacked .wookit-benefit {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* ── Icon ───────────────────────────────────────────────────────────────── */
.wookit-benefit__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --wookit-accent, #6366f1 ) !important;
}
.wookit-benefit__icon svg {
	display: block;
	width: 34px;
	height: 34px;
}

/* ── Text ───────────────────────────────────────────────────────────────── */
.wookit-benefit__text { min-width: 0; }

.wookit-benefit__title {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var( --wookit-text, #0f172a ) !important;
	letter-spacing: -0.01em !important;
}

.wookit-benefit__desc {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --wookit-body, #334155 ) !important;
}

/* The Elementor flex container hosting the benefits wraps (flex-wrap:wrap — the
   default on some breakpoints, esp. mobile): the wrap inflates the container
   height, leaving a big gap below the cards (the "extra padding"). Forcing
   nowrap on the host makes it size to the content. Verified fix; scoped via
   :has() so only benefits hosts are affected, and nowrap is the safe default. */
.e-con:has( .wookit-benefits ),
.e-con:has( .wookit-benefits ) > .e-con-inner {
	flex-wrap: nowrap !important;
}