/*
 * Combi deal — scoped add-on styling (v2, Bootstrap-free).
 * Reads the WCP design tokens (tokens.css) with sane fallbacks so the
 * add-on also renders acceptably outside a WCP v2 theme.
 * Structural/JS hook classes (.card, .combi-button, .totals, .quantity)
 * are only styled inside .row-type-combi-deal to avoid bleeding.
 */

.row-type-combi-deal {
	margin-block: 2rem;
}

.row-type-combi-deal h2 {
	margin-bottom: 0.25rem;
}

.row-type-combi-deal .wcp-cd__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wcp-gutter, 2rem);
	margin-top: 1.5rem;
}

@media (min-width: 62rem) {
	.row-type-combi-deal .wcp-cd__layout {
		grid-template-columns: 2fr 1fr;
		grid-template-areas: "products totals";
		align-items: start;
	}

	/* Explicit areas: single-product form.cart styling must not re-place these. */
	.row-type-combi-deal .wcp-cd__products { grid-area: products; }
	.row-type-combi-deal .wcp-cd__totals   { grid-area: totals; }
}

/* ── Product cards ── */
.row-type-combi-deal .wcp-cd__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}

.row-type-combi-deal .wcp-cd__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wcp-color-surface, #fff);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
}

.row-type-combi-deal .wcp-cd__body {
	flex: 1 1 auto;
	padding: 1rem;
}

.row-type-combi-deal .wcp-cd__badge {
	display: inline-block;
	background: var(--wcp-color-secondary, #ff6a00);
	color: #fff;
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1;
	padding: 0.35em 0.6em;
	border-radius: var(--wcp-radius-sm, 0.25rem);
}

.row-type-combi-deal .wcp-cd__badge--muted {
	background: var(--wcp-color-muted, #6c757d);
	margin-left: 0.5rem;
}

.row-type-combi-deal .wcp-cd__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	margin: 0.75rem 0;
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
}

.row-type-combi-deal .wcp-cd__thumb {
	flex: 0 0 4.5rem;
	width: 4.5rem;
}

.row-type-combi-deal .wcp-cd__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.row-type-combi-deal .wcp-cd__title {
	font-size: var(--wcp-h6, 1rem);
	margin: 0;
}

.row-type-combi-deal .wcp-cd__title a {
	color: inherit;
	text-decoration: none;
}

.row-type-combi-deal .wcp-cd__title a:hover {
	color: var(--wcp-color-link-hover, #6f2be6);
}

.row-type-combi-deal .price del {
	display: block;
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

.row-type-combi-deal .price ins {
	display: block;
	text-decoration: none;
	font-weight: var(--wcp-font-weight-bold, 700);
}

.row-type-combi-deal .price ins .woocommerce-price-suffix {
	font-weight: var(--wcp-font-weight-normal, 400);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	color: var(--wcp-color-muted, #6c757d);
}

/* ── Card footer: variations, qty, toggle ── */
.row-type-combi-deal .wcp-cd__card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--wcp-color-border, #e5e7eb);
	background: var(--wcp-color-surface-alt, #f5f4f0);
	border-radius: 0 0 var(--wcp-radius, 0.375rem) var(--wcp-radius, 0.375rem);
}

/* De tabel is het enige element in de footer dat mag krimpen; de stepper en de +-knop hebben
   een vaste maat en worden anders platgedrukt tot een paar pixels. Past het alsnog niet, dan
   is een tweede regel beter dan een onbruikbare knop — vandaar flex-wrap op de footer. */
.row-type-combi-deal .combi-deal-variations {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.row-type-combi-deal .wcp-cd__card-footer .quantity,
.row-type-combi-deal .combi-button {
	flex: 0 0 auto;
}

.row-type-combi-deal .combi-deal-variations th.label {
	display: none; /* the select's first option already names the attribute */
}

.row-type-combi-deal .combi-deal-variations select {
	width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius-sm, 0.25rem);
	background: var(--wcp-color-surface, #fff);
}

.row-type-combi-deal .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius-sm, 0.25rem);
	background: var(--wcp-color-surface, #fff);
	overflow: hidden;
}

.row-type-combi-deal .quantity.is-hidden {
	display: none;
}

.row-type-combi-deal .quantity input.qty {
	width: 3rem;
	border: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
	order: 1;
}

.row-type-combi-deal .quantity input.qty::-webkit-outer-spin-button,
.row-type-combi-deal .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.row-type-combi-deal .quantity .minus,
.row-type-combi-deal .quantity .plus {
	width: 2rem;
	height: 2.25rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	color: var(--wcp-color-dark, #374151);
}

.row-type-combi-deal .quantity .minus { order: 0; }
.row-type-combi-deal .quantity .plus  { order: 2; }

.row-type-combi-deal .quantity .minus::before { content: "\2212"; }
.row-type-combi-deal .quantity .plus::before  { content: "+"; }

/* Checkbox rendered as a toggle button (JS hook: .combi-button) */
.row-type-combi-deal .combi-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: var(--wcp-color-primary, #873EFF);
	border: 0;
	border-radius: var(--wcp-radius-sm, 0.25rem);
	transition: background-color 0.15s ease;
}

.row-type-combi-deal .combi-button:hover {
	background: var(--wcp-color-primary-hover, #6f2be6);
}

.row-type-combi-deal .combi-button input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.row-type-combi-deal .combi-button .icon::before {
	content: "+";
	color: #fff;
	font-size: 1.35rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1;
}

.row-type-combi-deal .combi-button:has(input:checked) {
	background: var(--wcp-color-success, #21C55D);
}

.row-type-combi-deal .combi-button:has(input:checked) .icon::before {
	content: "\2713";
}

.row-type-combi-deal .combi-button.disabled,
.row-type-combi-deal .combi-button:has(input:disabled) {
	background: var(--wcp-color-muted, #6c757d);
	cursor: not-allowed;
	opacity: 0.6;
}

.row-type-combi-deal .combi-out-of-stock {
	opacity: 0.6;
}

/* ── Totals / overview column ── */
.row-type-combi-deal .wcp-cd__summary {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wcp-color-surface-alt, #f5f4f0);
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	padding: 1.5rem;
}

.row-type-combi-deal .wcp-cd__main-product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0;
}

.row-type-combi-deal .wcp-cd__main-product .wcp-cd__thumb {
	flex-basis: 3.5rem;
	width: 3.5rem;
}

.row-type-combi-deal .wcp-cd__main-info h6 {
	margin: 0;
	font-size: var(--wcp-h6, 1rem);
}

.row-type-combi-deal .wcp-cd__product-list {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0.75rem 0;
	flex: 1 1 auto;
	font-style: italic;
	color: var(--wcp-color-muted, #6c757d);
	border-top: 1px solid var(--wcp-color-border, #e5e7eb);
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
}

.row-type-combi-deal .wcp-cd__product-list li {
	margin: 0.25rem 0;
}

/* combi-deal.js wisselt is-hidden op .empty en op .price del; de template zet hem ook initieel
   op .quantity en del (was d-none uit het Bootstrap-tijdperk, nu één naam voor alle drie). */
.row-type-combi-deal .is-hidden {
	display: none;
}

.row-type-combi-deal .wcp-cd__checkout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.row-type-combi-deal .wcp-cd__amounts .discount-wrap {
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

.row-type-combi-deal .wcp-cd__amounts .price ins {
	font-size: var(--wcp-font-size-lg, 1.25rem);
}

.row-type-combi-deal .wcp-cd__amounts .price del.is-hidden {
	display: none;
}

/* Icon-only submit (cart icon as inline SVG mask, label via aria-label) */
.row-type-combi-deal .single_add_to_cart_button {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-primary, #873EFF);
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease;
}

.row-type-combi-deal .single_add_to_cart_button:hover {
	background: var(--wcp-color-primary-hover, #6f2be6);
}

.row-type-combi-deal .single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') center / contain no-repeat;
}

.row-type-combi-deal .single_add_to_cart_button.disabled,
.row-type-combi-deal .single_add_to_cart_button:disabled {
	background: var(--wcp-color-muted, #6c757d);
	cursor: not-allowed;
	opacity: 0.65;
}

/* ── Mobiel: compacte kaart in één rij (referentie: v1/productie) ──
   Links badge, thumb en titel; rechts de aantalstepper met daaronder prijs en +-knop. De DOM is
   body (badge, head, pricewrap) + footer (variaties, quantity, combi-button); met display: contents
   op beide worden hun kinderen grid-items van de kaart en kan de prijs naast de knop staan. De
   desktopkaart (kolom met footerbalk) blijft ongewijzigd. */
@media (max-width: 47.99rem) {
	.row-type-combi-deal .wcp-cd__grid { gap: 0.75rem; }

	.row-type-combi-deal .wcp-cd__card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"head  qty   qty"
			"head  price btn"
			"vars  vars  vars";
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0.5rem;
		padding: 0.75rem;
		height: auto;
	}

	.row-type-combi-deal .wcp-cd__body,
	.row-type-combi-deal .wcp-cd__card-footer { display: contents; }

	.row-type-combi-deal .wcp-cd__badge {
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		z-index: 1;
		font-size: 0.75rem;
	}
	.row-type-combi-deal .wcp-cd__badge--muted { top: 2rem; left: 0.5rem; margin: 0; }

	.row-type-combi-deal .wcp-cd__head {
		grid-area: head;
		align-self: center;
		margin: 0;
		padding: 1rem 0 0; /* ruimte voor de badge boven de thumb */
		border: 0;
	}
	.row-type-combi-deal .wcp-cd__thumb { flex-basis: 3.5rem; width: 3.5rem; }
	.row-type-combi-deal .wcp-cd__title { font-size: var(--wcp-font-size-sm, 0.875rem); }

	.row-type-combi-deal .wcp-cd__card-footer .quantity { grid-area: qty; justify-self: end; }
	.row-type-combi-deal .wcp-cd__pricewrap { grid-area: price; justify-self: end; text-align: right; }
	.row-type-combi-deal .wcp-cd__pricewrap .price del { font-size: 0.75rem; }
	.row-type-combi-deal .combi-button { grid-area: btn; justify-self: end; }
	.row-type-combi-deal .combi-deal-variations { grid-area: vars; }

	/* Zonder aantalveld (is-hidden) rukt de prijsrij op naar de eerste rij. */
	.row-type-combi-deal .wcp-cd__card:has(.quantity.is-hidden) {
		grid-template-areas:
			"head  price btn"
			"vars  vars  vars";
	}
}

/* Main product out of stock: mute the whole section */
.row-type-combi-deal.main-out-of-stock .wcp-cd__grid,
.row-type-combi-deal.main-out-of-stock .wcp-cd__summary {
	opacity: 0.7;
}

/* ── 2.x: in de taal van de WooCommerce Plus-productpagina ─────────────────────────────────────────────
   Producten als regels in één omkaderde witte lijst (zoals accessoires en de bundellijst) i.p.v. losse kaarten in
   een raster met lege cellen; overzicht als witte kaart ernaast. Kortingslabel als groene pil (zoals "Bespaar"),
   de toevoegknop als omlijnde knop met "+" in de CTA-kleur (--wcp-color-secondary, de kleur van de koopknop) die
   na kiezen gevuld wordt met een vinkje. "0,00 korting" pas zodra er iets gekozen is. */
.row-type-combi-deal .wcp-cd__layout { gap: 1.5rem; }
@media (min-width: 62rem) {
	.row-type-combi-deal .wcp-cd__layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.row-type-combi-deal .wcp-cd__grid {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	overflow: hidden;
}
.row-type-combi-deal .wcp-cd__cell + .wcp-cd__cell { border-top: var(--wcp-border-width) solid var(--wcp-color-border); }
.row-type-combi-deal .wcp-cd__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	grid-template-areas: "head price qty btn" "vars vars vars vars";
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.6rem;
	height: auto;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.row-type-combi-deal .wcp-cd__card:not(:has(.combi-deal-variations)) { grid-template-areas: "head price qty btn"; }
.row-type-combi-deal .wcp-cd__body,
.row-type-combi-deal .wcp-cd__card-footer { display: contents; }
.row-type-combi-deal .wcp-cd__head { grid-area: head; margin: 0; padding: 0; border: 0; gap: 0.85rem; min-width: 0; }
.row-type-combi-deal .wcp-cd__thumb { flex: 0 0 3.25rem; width: 3.25rem; }
.row-type-combi-deal .wcp-cd__thumb img { border: var(--wcp-border-width) solid var(--wcp-color-border); border-radius: calc(var(--wcp-radius) * 0.8); background: var(--wcp-color-surface); padding: 0.2rem; box-sizing: border-box; }
.row-type-combi-deal .wcp-cd__title { font-size: 0.9375rem; font-weight: var(--wcp-font-weight-normal, 400); line-height: 1.35; }
.row-type-combi-deal .wcp-cd__title a:hover { color: var(--wcp-color-primary); }
/* Korting als groene pil boven de prijs */
.row-type-combi-deal .wcp-cd__badge {
	grid-area: price;
	align-self: start;
	justify-self: end;
	position: static;
	margin: -0.15rem 0 0;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--wcp-color-success-soft);
	color: var(--wcp-color-success);
	font-size: 0.6875rem;
	line-height: 1.5;
}
.row-type-combi-deal .wcp-cd__badge--muted { background: var(--wcp-color-light); color: var(--wcp-color-muted); margin: -0.15rem 0 0; }
.row-type-combi-deal .wcp-cd__badge--muted:not(.is-hidden) ~ .wcp-cd__badge:not(.wcp-cd__badge--muted),
.row-type-combi-deal .combi-out-of-stock .wcp-cd__badge:not(.wcp-cd__badge--muted) { display: none; }
.row-type-combi-deal .wcp-cd__pricewrap { grid-area: price; align-self: end; justify-self: end; text-align: right; padding-top: 1.05rem; }
.row-type-combi-deal .wcp-cd__pricewrap .price { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.row-type-combi-deal .wcp-cd__pricewrap .price del { display: inline; font-size: 0.8125rem; }
.row-type-combi-deal .wcp-cd__pricewrap .price ins { display: inline; font-size: 0.9375rem; }
.row-type-combi-deal .combi-deal-variations { grid-area: vars; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-left: 4.1rem; }
.row-type-combi-deal .combi-deal-variations tbody { display: contents; }
.row-type-combi-deal .combi-deal-variations tr,
.row-type-combi-deal .combi-deal-variations td { display: block; padding: 0; border: 0; background: none; }
.row-type-combi-deal .combi-deal-variations select { min-width: 9rem; height: 2.25rem; padding: 0 2rem 0 0.7rem; border-radius: var(--wcp-radius); font-size: 0.875rem; }
.row-type-combi-deal .wcp-cd__card-footer .quantity { grid-area: qty; border-radius: var(--wcp-radius); }
.row-type-combi-deal .wcp-cd__card-footer .quantity .minus,
.row-type-combi-deal .wcp-cd__card-footer .quantity .plus { height: 2.5rem; }
/* Toevoegknop: omlijnd, "+" in de CTA-kleur; gekozen = gevuld met vinkje */
.row-type-combi-deal .combi-button {
	grid-area: btn;
	width: 2.75rem;
	height: 2.75rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.row-type-combi-deal .combi-button:hover { background: var(--wcp-color-surface); border-color: var(--wcp-color-secondary); }
.row-type-combi-deal .combi-button .icon::before { color: var(--wcp-color-secondary); font-size: 1.5rem; font-weight: var(--wcp-font-weight-normal, 400); }
.row-type-combi-deal .combi-button:has(input:checked) { background: var(--wcp-color-secondary); border-color: var(--wcp-color-secondary); }
.row-type-combi-deal .combi-button:has(input:checked) .icon::before { color: var(--wcp-color-surface); font-size: 1.15rem; font-weight: var(--wcp-font-weight-semibold, 600); }
.row-type-combi-deal .combi-button:has(input:focus-visible) { outline: 2px solid var(--wcp-color-secondary); outline-offset: 2px; }
.row-type-combi-deal .combi-button.disabled,
.row-type-combi-deal .combi-button:has(input:disabled) { background: var(--wcp-color-light); border-color: var(--wcp-color-border); opacity: 1; }
.row-type-combi-deal .combi-button.disabled .icon::before,
.row-type-combi-deal .combi-button:has(input:disabled) .icon::before { color: var(--wcp-color-muted); }
.row-type-combi-deal .wcp-cd__cell:has(.combi-button input:checked) { background: color-mix(in srgb, var(--wcp-color-secondary) 6%, var(--wcp-color-surface)); }
.row-type-combi-deal .combi-out-of-stock { opacity: 0.55; }
/* Overzicht: witte kaart */
.row-type-combi-deal .wcp-cd__summary { height: auto; padding: 1.1rem 1.25rem; background: var(--wcp-color-surface); }
.row-type-combi-deal .wcp-cd__summary h5 { margin: 0; font-size: 1rem; }
.row-type-combi-deal .wcp-cd__main-product .wcp-cd__thumb { flex: 0 0 3.25rem; width: 3.25rem; }
.row-type-combi-deal .wcp-cd__main-product .wcp-cd__thumb img { border: var(--wcp-border-width) solid var(--wcp-color-border); border-radius: calc(var(--wcp-radius) * 0.8); padding: 0.2rem; box-sizing: border-box; object-fit: contain; aspect-ratio: 1 / 1; }
.row-type-combi-deal .wcp-cd__main-info h6 { font-size: 0.9375rem; font-weight: var(--wcp-font-weight-normal, 400); }
.row-type-combi-deal .wcp-cd__product-list { font-style: normal; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-text); }
.row-type-combi-deal .wcp-cd__product-list .empty { color: var(--wcp-color-muted); }
.row-type-combi-deal .wcp-cd__summary:has(.product-list .empty:not(.is-hidden)) .discount-wrap { display: none; }
.row-type-combi-deal .wcp-cd__amounts .discount-wrap { color: var(--wcp-color-success); font-weight: var(--wcp-font-weight-semibold, 600); }
.row-type-combi-deal .single_add_to_cart_button { width: 3rem; height: 3rem; }
.row-type-combi-deal .single_add_to_cart_button::before { background: var(--wcp-color-surface); }
.row-type-combi-deal .single_add_to_cart_button.disabled,
.row-type-combi-deal .single_add_to_cart_button:disabled { opacity: 0.45; }

/* Telefoon: regel = foto + titel, eronder keuzes; prijs, aantal en knop op de regel daaronder. */
@media (max-width: 47.99rem) {
	.row-type-combi-deal .wcp-cd__card,
	.row-type-combi-deal .wcp-cd__card:has(.quantity.is-hidden),
	.row-type-combi-deal .wcp-cd__card:not(:has(.combi-deal-variations)) {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "head head head" "vars vars vars" "price qty btn";
		padding: 0.75rem;
	}
	.row-type-combi-deal .wcp-cd__badge { grid-area: head; justify-self: end; align-self: start; }
	.row-type-combi-deal .wcp-cd__head { padding: 0 3rem 0 0; }
	.row-type-combi-deal .wcp-cd__pricewrap { justify-self: start; text-align: left; padding-top: 0; }
	.row-type-combi-deal .combi-deal-variations { padding-left: 0; }
}