/**
 * Kinetic Product Bundles — front-office.
 *
 * Palette scopée : le composant définit ses propres tokens `--kb-*` et ne
 * touche à aucune variable du thème. Le jeu par défaut est clair (sûr sur un
 * thème WooCommerce standard) ; il bascule en sombre pour Kinetic Ultra
 * (`body.kb-theme-kinetic`), pour un thème sombre déclaré
 * (`html[data-theme="dark"]`) et selon la préférence système. Le bascule clair
 * de Kinetic (`html[data-theme="light"]`) reprend la main.
 */

.kb-form {
	--kb-surface: #ffffff;
	--kb-surface-alt: #f6f7f9;
	--kb-surface-raised: #ffffff;
	--kb-text: #1d2327;
	--kb-text-muted: #646970;
	--kb-line: rgba(29, 35, 39, 0.12);
	--kb-accent: #2271b1;
	--kb-accent-contrast: #ffffff;
	--kb-positive: #00854a;
	--kb-danger: #b32d2e;
	--kb-radius: 10px;
	--kb-gap: 10px;

	display: block;
	color: var(--kb-text);
}

body.kb-theme-kinetic .kb-form,
html[data-theme='dark'] .kb-form {
	--kb-surface: #131319;
	--kb-surface-alt: #19191f;
	--kb-surface-raised: #1f1f26;
	--kb-text: #f9f5fd;
	--kb-text-muted: #acaab1;
	--kb-line: rgba(249, 245, 253, 0.12);
	--kb-accent: #00d4ff;
	--kb-accent-contrast: #0a0a0f;
	--kb-positive: #00ff88;
	--kb-danger: #ff3b5c;
}

@media (prefers-color-scheme: dark) {
	.kb-form {
		--kb-surface: #131319;
		--kb-surface-alt: #19191f;
		--kb-surface-raised: #1f1f26;
		--kb-text: #f9f5fd;
		--kb-text-muted: #acaab1;
		--kb-line: rgba(249, 245, 253, 0.12);
		--kb-accent: #00d4ff;
		--kb-accent-contrast: #0a0a0f;
		--kb-positive: #00ff88;
		--kb-danger: #ff3b5c;
	}
}

html[data-theme='light'] .kb-form {
	--kb-surface: #ffffff;
	--kb-surface-alt: #f6f7f9;
	--kb-surface-raised: #ffffff;
	--kb-text: #1d2327;
	--kb-text-muted: #646970;
	--kb-line: rgba(29, 35, 39, 0.12);
	--kb-accent: #2271b1;
	--kb-accent-contrast: #ffffff;
	--kb-positive: #00854a;
	--kb-danger: #b32d2e;
}

/* ── Liste des articles ──────────────────────────────────────────────────── */

.kb-items {
	display: grid;
	gap: var(--kb-gap);
	margin: 0 0 14px;
}

/* `minmax(0, 1fr)` : sans le minimum à 0, une piste `1fr` adopte le
   min-content de son contenu (image, mot long) et fait déborder la carte. */
.kb-form--grid .kb-items {
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.kb-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 10px;
	min-width: 0;
	padding: 10px;
	background: var(--kb-surface-alt);
	border-radius: var(--kb-radius);
	transition: opacity 160ms linear, background 160ms linear;
}

.kb-item.is-excluded {
	opacity: 0.5;
}

.kb-item--unavailable {
	opacity: 0.55;
}

.kb-form--compact .kb-item {
	padding: 6px 8px;
	align-items: center;
}

.kb-form--compact .kb-item__desc,
.kb-form--compact .kb-item__thumb {
	display: none;
}

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

/* Case à cocher — pastille dessinée, sans dépendre du style du thème. */
.kb-item__check {
	position: relative;
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	cursor: pointer;
}

.kb-item__check input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kb-item__check-box {
	pointer-events: none;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--kb-surface-raised);
	box-shadow: inset 0 0 0 1px var(--kb-line);
}

.kb-item__check input:checked + .kb-item__check-box {
	background: var(--kb-accent);
	box-shadow: none;
}

.kb-item__check input:checked + .kb-item__check-box::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid var(--kb-accent-contrast);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.kb-item__check input:focus-visible + .kb-item__check-box {
	outline: 2px solid var(--kb-accent);
	outline-offset: 2px;
}

.kb-item__check input:disabled + .kb-item__check-box {
	opacity: 0.4;
}

/* Article obligatoire : point plein, pas de case décochable. */
.kb-item__required {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: var(--kb-accent);
	opacity: 0.35;
}

.kb-item__thumb img {
	display: block;
	width: 40px;
	height: 40px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 6px;
}

.kb-item__body {
	min-width: 0;
}

.kb-item__title {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.kb-item__desc {
	margin-top: 3px;
	font-size: 0.8125rem;
	color: var(--kb-text-muted);
}

.kb-item__desc p {
	margin: 0;
}

.kb-item__variations {
	display: grid;
	gap: 6px;
	margin-top: 8px;
}

.kb-item__variation {
	display: grid;
	gap: 3px;
}

.kb-item__variation-label {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kb-text-muted);
}

.kb-item__select {
	width: 100%;
	max-width: 100%;
	padding: 7px 9px;
	font: inherit;
	font-size: 0.875rem;
	color: var(--kb-text);
	background: var(--kb-surface-raised);
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--kb-line);
}

.kb-item__select:focus-visible {
	outline: 2px solid var(--kb-accent);
	outline-offset: 1px;
}

.kb-item__notice {
	margin: 6px 0 0;
	font-size: 0.75rem;
	color: var(--kb-danger);
}

.kb-item__notice:empty {
	display: none;
}

.kb-item__aside {
	display: grid;
	justify-items: end;
	gap: 5px;
	text-align: right;
}

.kb-item__price {
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
}

.kb-item__badge {
	padding: 1px 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--kb-accent-contrast);
	background: var(--kb-positive);
	border-radius: 4px;
	white-space: nowrap;
}

.kb-item__qty {
	width: 58px;
	padding: 5px 6px;
	font: inherit;
	font-size: 0.875rem;
	text-align: center;
	color: var(--kb-text);
	background: var(--kb-surface-raised);
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--kb-line);
}

.kb-item__qty-fixed {
	font-size: 0.8125rem;
	color: var(--kb-text-muted);
}

/* ── Récapitulatif ───────────────────────────────────────────────────────── */

.kb-summary {
	padding: 12px;
	background: var(--kb-surface);
	border-radius: var(--kb-radius);
	box-shadow: inset 0 0 0 1px var(--kb-line);
}

.kb-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.kb-summary__label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kb-text-muted);
}

.kb-summary__total {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
}

.kb-summary__total del {
	font-size: 0.75em;
	font-weight: 400;
	color: var(--kb-text-muted);
}

.kb-summary__error {
	display: none;
	margin: 0 0 10px;
	font-size: 0.8125rem;
	color: var(--kb-danger);
}

.kb-summary__error.is-visible {
	display: block;
}

.kb-summary__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
}

.kb-summary__actions .quantity {
	flex: 0 0 auto;
}

.kb-summary__submit {
	flex: 1 1 140px;
	min-width: 0;
}

.kb-summary__submit[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.kb-summary__stock {
	margin: 8px 0 0;
	font-size: 0.75rem;
	color: var(--kb-text-muted);
}

.kb-summary__stock.out-of-stock {
	color: var(--kb-danger);
}

.kb-form__unavailable {
	margin: 0 0 12px;
	padding: 9px 11px;
	font-size: 0.8125rem;
	color: var(--kb-danger);
	background: var(--kb-surface-alt);
	border-radius: 8px;
}

/* ── Panier, mini-panier, commande ───────────────────────────────────────── */

.kb-cart-contents,
.kb-order-contents {
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	opacity: 0.75;
}

.kb-cart-contents__item,
.kb-order-contents li {
	margin: 1px 0;
	line-height: 1.4;
}

.kb-cart-contents__qty {
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.kb-mini-contents {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	opacity: 0.7;
}

.kb-child-qty {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}