/* Shared by the Kit Products and Kit Savings widgets. */

/* ── Kit Products ──────────────────────────────────────────────────── */
.cct-kit {
	display: flex;
	flex-direction: column;
}

.cct-kit-heading {
	margin: 0 0 16px;
}

.cct-kit-grid {
	display: grid;
	grid-template-columns: repeat(var(--cct-kit-columns, 3), minmax(0, 1fr));
	column-gap: var(--cct-kit-column-gap, 24px);
	row-gap: var(--cct-kit-row-gap, 24px);
	align-items: stretch;
}

.cct-kit-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The Loop Item template's own wrapper fills the cell. */
.cct-kit-item > .e-loop-item,
.cct-kit-main > .e-loop-item {
	width: 100%;
	flex: 1 1 auto;
}

/* ── Kit card + breakdown (product page) ───────────────────────────── */
/* The kit card and, beside it, the grid of the products it contains.
   The widget's Position control sets flex-direction and the card's width
   basis (a share of the row when side by side, 100% when stacked). */
.cct-kit-item-body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	--cct-kit-main-basis: var(--cct-kit-main-width, 50%);
}

.cct-kit-main {
	flex: 0 0 auto;
	width: var(--cct-kit-main-basis);
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Without a breakdown the card simply fills the cell. */
.cct-kit-item:not(.cct-kit-item--with-breakdown) .cct-kit-main {
	width: 100%;
}

.cct-kit-breakdown {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
}

.cct-kit-breakdown-heading {
	margin: 0 0 12px;
}

.cct-kit-breakdown-grid {
	display: grid;
	grid-template-columns: repeat(var(--cct-kit-columns, 2), minmax(0, 1fr));
	column-gap: var(--cct-kit-column-gap, 16px);
	row-gap: var(--cct-kit-row-gap, 16px);
}

/* Default WooCommerce card when no Loop template is chosen. */
.cct-kit-wc-card.products {
	display: block;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.cct-kit-wc-card.products > li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* ── Quantity badge ────────────────────────────────────────────────── */
.cct-kit-item-qty {
	position: absolute;
	z-index: 2;
	top: var(--cct-kit-qty-offset, 8px);
	inset-inline-start: var(--cct-kit-qty-offset, 8px);
	padding: 2px 10px;
	border-radius: 999px;
	background-color: #111;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
	pointer-events: none;
}

.cct-kit-qty-top-right .cct-kit-item-qty {
	inset-inline-start: auto;
	inset-inline-end: var(--cct-kit-qty-offset, 8px);
}

.cct-kit-qty-bottom-left .cct-kit-item-qty {
	top: auto;
	bottom: var(--cct-kit-qty-offset, 8px);
}

.cct-kit-qty-bottom-right .cct-kit-item-qty {
	top: auto;
	bottom: var(--cct-kit-qty-offset, 8px);
	inset-inline-start: auto;
	inset-inline-end: var(--cct-kit-qty-offset, 8px);
}

.cct-kit-qty-below .cct-kit-item-qty {
	position: static;
	align-self: flex-start;
	margin-top: 8px;
	pointer-events: auto;
}

/* ── Savings ───────────────────────────────────────────────────────── */
.cct-kit-savings {
	margin: 0;
}

.cct-kit-savings-above {
	margin-bottom: var(--cct-kit-savings-spacing, 16px);
}

.cct-kit-savings-below {
	margin-top: var(--cct-kit-savings-spacing, 16px);
}

.cct-kit-savings-value {
	font-weight: 600;
}

.cct-kit-savings-value .woocommerce-Price-amount {
	font-weight: inherit;
	color: inherit;
}

/* ── Empty text ────────────────────────────────────────────────────── */
.cct-kit-empty {
	margin: 0;
}