.additional-accessories { --image-width: 7.5rem; width: 100%; }
.additional-accessories .price br { display: none; }

/* Kaartrijen (cards.php, de standaardweergave): checkbox + foto + naam + prijs op één regel, in een gedeelde
   omkaderde witte lijst; gekozen rij in een zachte merktint. Foto uit via wcp_additional_accessories_images. */
.additional-accessories__title { display: block; margin: 0 0 0.25rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); }
.additional-accessories__rows {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius, 0.375rem);
	overflow: hidden;
	margin-top: 0.5rem;
	background: var(--wcp-color-surface);
}
.additional-accessories__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem;
	cursor: pointer;
}
.additional-accessories__row + .additional-accessories__row {
	border-top: 1px solid var(--wcp-color-border);
}
.additional-accessories__row:has(.additional-accessories__checkbox:checked) {
	background: color-mix(in srgb, var(--wcp-color-primary) 7%, var(--wcp-color-surface));
}
.additional-accessories__row.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.additional-accessories__checkbox {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wcp-color-primary);
}
.additional-accessories__thumb {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	object-fit: contain;
	background: var(--wcp-color-surface);
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius, 0.375rem);
}
.additional-accessories__thumb--empty {
	display: block;
	background: var(--wcp-color-surface-alt);
}
.additional-accessories__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.additional-accessories__price {
	flex: none;
	font-weight: var(--wcp-font-weight-semibold, 600);
	white-space: nowrap;
}
.additional-accessories__price del {
	margin-inline-end: 0.25rem;
	color: var(--wcp-color-muted);
	font-weight: var(--wcp-font-weight-normal, 400);
	text-decoration: line-through;
}
.additional-accessories__name small { color: var(--wcp-color-muted); }
.additional-accessories__price .woocommerce-Price-amount { font-weight: inherit; }
.additional-accessories .images { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.additional-accessories .images .form-check {
	width: var(--image-width);
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	position: relative; padding: 0.5rem; margin: 0;
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.additional-accessories .images .form-check input { position: absolute; left: 0.5rem; top: 0.5rem; margin: 0; }
.additional-accessories .images .form-check .default-option {
	aspect-ratio: 1/1; width: 75%; opacity: 0.2;
	background-position: center; background-size: 75%; background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");
}
.additional-accessories .images .form-check img { aspect-ratio: 1/1; width: 75%; object-fit: contain; border-radius: var(--wcp-radius, 0.375rem); }
.additional-accessories .images .form-check img.disabled { opacity: 0.5; }
.additional-accessories .images .form-check .form-check-label { font-size: var(--wcp-font-size-sm, 0.875rem); text-align: center; }
.additional-accessories .images .form-check .form-check-label .price { display: block; }

/* Compacte productenlijst (WC+ .wcp-loop--compact / .wcp-products--compact): geen accessoirekeuze in de platte kaart (#5).
   De add-on rendert daar al niets (wcp_loop_is_compact()); dit vangt oudere WC+-versies zonder die functie op. */
:is(.wcp-loop--compact, .wcp-products--compact) .additional-accessories { display: none; }