/*
 * Matchu Bundels, afgestemd op het Matchu-thema (illdy-child-matchu).
 * Compact gehouden: op desktop past de kolom naast de productfoto.
 * Kleuren of fonts aanpassen? Overschrijf de variabelen op .mb-bundle in je thema.
 */
.mb-bundle {
	--mb-red: #f53f4d;
	--mb-red-dark: #d92b39;
	--mb-red-soft: #fff1f2;
	--mb-green: #1e8e3e;
	--mb-ink: #000;
	--mb-text: #333;
	--mb-muted: #6b6b6b;
	--mb-line: #e6e6e6;
	--mb-surface: #f7f7f7;
	--mb-bold: "Borna-Bold", "Borna-Regular", sans-serif;
	--mb-body: "Borna-Regular", sans-serif;
	--mb-ease: cubic-bezier(.16, 1, .3, 1);

	clear: both;
	/* padding i.p.v. margin: margin verdwijnt naast zwevende elementen van het thema */
	padding: 16px 0 14px;
	color: var(--mb-ink);
	font-family: var(--mb-body);
	font-size: 14px;
	line-height: 1.4;
}
.mb-bundle *, .mb-bundle *::before, .mb-bundle *::after { box-sizing: border-box; }
.mb-bundle ::selection { background: var(--mb-red); color: #fff; }
.mb-bundle [hidden] { display: none !important; }

.mb-card { border: 1.5px solid var(--mb-line); border-radius: 8px; background: #fff; overflow: hidden; }

/* Kop: label links, staffel rechts */
.mb-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 9px 14px;
	background: var(--mb-surface);
	border-bottom: 1px solid var(--mb-line);
}
.mb-bundle .mb-title {
	margin: 0;
	padding: 0;
	font-family: var(--mb-bold);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mb-ink);
}
.mb-bundle .mb-tiers { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mb-bundle .mb-tier {
	margin: 0;
	padding: 3px 8px;
	background: #fff;
	border: 1px solid var(--mb-line);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--mb-muted);
	white-space: nowrap;
	transition: background-color .3s var(--mb-ease), border-color .3s var(--mb-ease), color .3s var(--mb-ease);
}
.mb-bundle .mb-tier::before { content: none; }
.mb-bundle .mb-tier strong { font-family: var(--mb-bold); font-weight: 400; color: var(--mb-ink); transition: color .3s var(--mb-ease); }
.mb-bundle .mb-tier.is-reached { background: var(--mb-red); border-color: var(--mb-red); color: #fff; }
.mb-bundle .mb-tier.is-reached strong { color: #fff; }

/* Rijen */
.mb-item {
	position: relative;
	display: grid;
	grid-template-columns: 20px 36px minmax(0, 1fr) auto;
	column-gap: 12px;
	align-items: center;
	padding: 7px 14px;
	border-top: 1px solid var(--mb-line);
	background: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s var(--mb-ease);
}
.mb-item:first-child, .mb-item[hidden] + .mb-item { border-top: 0; }
.mb-item:hover { background: #fbfbfb; }
.mb-item.has-error { background: var(--mb-red-soft); }

.mb-bundle .mb-cb { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mb-bundle .mb-box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1.5px solid #b5b5b5;
	border-radius: 4px;
	color: transparent;
	cursor: pointer;
	transition: background-color .2s var(--mb-ease), border-color .2s var(--mb-ease), color .2s var(--mb-ease), transform .25s var(--mb-ease);
}
.mb-bundle .mb-box svg { display: block; transform: scale(.4); transition: transform .3s var(--mb-ease); }
.mb-item.is-selected .mb-box { background: var(--mb-red); border-color: var(--mb-red); color: #fff; }
.mb-item.is-selected .mb-box svg { transform: scale(1); }
.mb-bundle .mb-cb:focus-visible + .mb-box { outline: 2px solid var(--mb-ink); outline-offset: 2px; }
.mb-item:active .mb-box { transform: scale(.9); }

.mb-img, .mb-bundle .mb-img img { width: 36px; height: 36px; }
.mb-bundle .mb-img img { display: block; margin: 0; object-fit: contain; background: #fff; border-radius: 4px; }

.mb-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mb-bundle .mb-name { font-family: var(--mb-bold); font-size: 14px; line-height: 1.3; color: var(--mb-ink); overflow-wrap: anywhere; }
.mb-tag { font-size: 12px; color: var(--mb-muted); }

.mb-bundle .mb-price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
	font-family: var(--mb-bold);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: -.2px;
	color: var(--mb-ink);
	white-space: nowrap;
}
.mb-bundle .mb-price del {
	font-family: var(--mb-body);
	font-size: 12px;
	color: var(--mb-muted);
	opacity: 1;
	text-decoration: line-through;
	text-decoration-color: var(--mb-red);
}
.mb-bundle .mb-price ins { text-decoration: none; background: none; color: inherit; font-weight: inherit; }
.mb-bundle .mb-price del + ins { color: var(--mb-red-dark); }
.mb-bundle .mb-price .amount { font-family: inherit; font-size: inherit; }

.mb-bundle .mb-variation {
	width: 100%;
	max-width: 220px;
	height: 30px;
	margin: 3px 0 0;
	padding: 0 30px 0 9px;
	font-family: var(--mb-body);
	font-size: 13px;
	color: var(--mb-ink);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") right 10px center / 10px no-repeat;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.mb-bundle .mb-variation:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 1px; }
.mb-item.has-error .mb-variation { border-color: var(--mb-red); }

/* Voet: voortgang links, totaal rechts */
.mb-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 14px;
	padding: 8px 14px;
	background: var(--mb-surface);
	border-top: 1px solid var(--mb-line);
}
.mb-bundle .mb-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 180px;
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--mb-text);
}
.mb-bundle .mb-progress.is-max { color: var(--mb-green); font-family: var(--mb-bold); }
.mb-bundle .mb-progress.is-max::before {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.6 5.9-4.2 4.6a.8.8 0 0 1-1.2 0L4.4 8.6a.8.8 0 1 1 1.2-1.1l1.2 1.3 3.6-4a.8.8 0 1 1 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.6 5.9-4.2 4.6a.8.8 0 0 1-1.2 0L4.4 8.6a.8.8 0 1 1 1.2-1.1l1.2 1.3 3.6-4a.8.8 0 1 1 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-bundle .mb-total { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.mb-total-label { font-size: 13px; color: var(--mb-muted); }
.mb-total-prices { display: inline-flex; align-items: baseline; gap: 8px; }
.mb-bundle .mb-total-old { font-size: 13px; color: var(--mb-muted); text-decoration: line-through; text-decoration-color: var(--mb-red); }
.mb-total-old:empty, .mb-saving:empty { display: none; }
.mb-total-now { font-family: var(--mb-bold); font-size: 18px; line-height: 1; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.mb-saving {
	align-self: center;
	padding: 2px 6px;
	background: var(--mb-red);
	border-radius: 3px;
	font-family: var(--mb-bold);
	font-size: 11px;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
}

/* USP's van het thema, opgenomen in het blok */
.mb-usp-moved { display: none !important; }
.mb-bundle .mb-usps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 8px 14px;
	list-style: none;
	border-top: 1px solid var(--mb-line);
	background: #fff;
}
.mb-bundle .mb-usps li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	font-family: var(--mb-bold);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--mb-ink);
}
.mb-bundle .mb-usps li::before { content: none; }
.mb-bundle .mb-usps svg { flex: 0 0 auto; color: var(--mb-red); }

/* Winkelmand-popup van het thema: hele set tonen zonder scrollbalk */
#atc-modal .atc-product-container.mb-popup-bundle { max-height: none; overflow: visible; }
#atc-modal .mb-popup-bundle > .row { display: flex; align-items: center; margin-bottom: 6px; }
#atc-modal .mb-popup-bundle > .row img { width: 52px; height: 52px; object-fit: contain; }

.mb-notice:empty { display: none; }
.mb-bundle .mb-notice { margin-top: 8px; font-size: 14px; font-family: var(--mb-bold); color: var(--mb-red-dark); }

/* Staffelkorting: "Meer kopen, meer besparen" (prijzen komen van Dynamic Pricing & Discounts) */
.mb-qd-original { display: none !important; }
.mb-qd {
	--mb-red: #f53f4d; --mb-red-dark: #d92b39; --mb-red-soft: #fff1f2; --mb-ink: #000; --mb-text: #333;
	--mb-muted: #6b6b6b; --mb-line: #e6e6e6; --mb-surface: #f7f7f7;
	--mb-bold: "Borna-Bold", "Borna-Regular", sans-serif; --mb-body: "Borna-Regular", sans-serif;
	--mb-ease: cubic-bezier(.16, 1, .3, 1);
	clear: both;
	padding: 14px 0 12px;
	color: var(--mb-ink);
	font-family: var(--mb-body);
	font-size: 14px;
	line-height: 1.4;
}
.mb-qd *, .mb-qd *::before, .mb-qd *::after { box-sizing: border-box; }
.mb-bundle + .mb-qd { padding-top: 0; }
.mb-qd-card { border: 1.5px solid var(--mb-line); border-radius: 8px; background: #fff; overflow: hidden; }
.mb-qd-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 14px; background: var(--mb-surface); border-bottom: 1px solid var(--mb-line); }
.mb-qd .mb-qd-title { margin: 0; padding: 0; font-family: var(--mb-bold); font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--mb-ink); }
.mb-qd-sub { font-size: 12px; color: var(--mb-muted); }
.mb-qd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; padding: 12px 14px 10px; }
.mb-qd .mb-qd-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	margin: 0;
	padding: 8px 10px;
	background: #fff;
	border: 1.5px solid var(--mb-line);
	border-radius: 6px;
	box-shadow: none;
	font: inherit;
	color: var(--mb-ink);
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color .2s var(--mb-ease), background-color .2s var(--mb-ease);
}
.mb-qd .mb-qd-tile:hover { border-color: #9a9a9a; background: #fff; color: var(--mb-ink); }
.mb-qd .mb-qd-tile.is-active { border-color: var(--mb-red); background: var(--mb-red-soft); }
.mb-qd .mb-qd-tile:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 2px; }
.mb-qd-qty { font-family: var(--mb-bold); font-size: 12px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.mb-qd-price { font-family: var(--mb-bold); font-size: 16px; line-height: 1.25; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.mb-qd-unit { font-size: 11px; line-height: 1.2; color: var(--mb-muted); }
.mb-qd-pct { position: absolute; top: -8px; right: 6px; padding: 1px 5px; background: var(--mb-red); border-radius: 3px; font-family: var(--mb-bold); font-size: 10px; line-height: 1.4; color: #fff; }
.mb-qd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 7px 14px; background: var(--mb-surface); border-top: 1px solid var(--mb-line); font-size: 13px; }
.mb-qd-next { color: var(--mb-text); }
.mb-qd-total { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.mb-qd-total-label { color: var(--mb-muted); }
.mb-qd-total del { font-size: 13px; color: var(--mb-muted); text-decoration-color: var(--mb-red); }
.mb-qd-total del:empty { display: none; }
.mb-qd-total strong { font-family: var(--mb-bold); font-weight: 400; font-size: 18px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
	/* USP's als 1 rouleerde regel */
	.mb-bundle .mb-usps { display: block; position: relative; height: 32px; padding: 0; overflow: hidden; }
	.mb-bundle .mb-usps li {
		position: absolute;
		inset: 0;
		justify-content: flex-start;
		padding: 0 14px;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .45s var(--mb-ease), transform .55s var(--mb-ease);
		pointer-events: none;
	}
	.mb-bundle .mb-usps li.is-current { opacity: 1; transform: none; pointer-events: auto; }
	.mb-bundle .mb-usps li.is-leaving { opacity: 0; transform: translateY(-10px); }
	.mb-bundle { padding: 12px 0 10px; }
	.mb-head { padding-top: 8px; padding-bottom: 8px; }
	.mb-foot { padding-top: 7px; padding-bottom: 7px; }
}

@media (max-width: 767px) {
	.mb-bundle { padding: 16px 0 18px; }
	.mb-head, .mb-item, .mb-foot { padding-left: 12px; padding-right: 12px; }
	.mb-item { grid-template-columns: 20px 40px minmax(0, 1fr) auto; column-gap: 10px; padding-top: 9px; padding-bottom: 9px; }
	.mb-img, .mb-bundle .mb-img img { width: 40px; height: 40px; }
	.mb-bundle .mb-price { flex-direction: column; align-items: flex-end; gap: 0; }
	.mb-bundle .mb-variation { max-width: none; }
	.mb-bundle .mb-total { margin-left: 0; width: 100%; justify-content: space-between; }
	.mb-bundle .mb-usps { flex-direction: column; gap: 4px; padding: 9px 12px; }
	.mb-qd-tiles { grid-template-columns: repeat(3, 1fr); padding: 12px 12px 10px; }
	.mb-qd-head, .mb-qd-foot { padding-left: 12px; padding-right: 12px; }
	.mb-qd-total { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.mb-bundle *, .mb-bundle *::before, .mb-bundle *::after { transition: none !important; animation: none !important; }
}