/* ==========================================================================
   Boodschappenlijst bij het weekmenu (inc/boodschappenlijst.php, assets/js/boodschappenlijst.js).
   Paneel (<dialog>): mobiel over de volle breedte en hoogte, desktop 720 px in het midden.
   Stap 1: twee keuzekaarten (Per dag = dagen kiezen / Kies zelf je maaltijden) met een paneel eronder (Justin 9 okt);
   na "Wijzig" bovenaan "Terug naar mijn lijst".
   Stap 2: samenvatting + Wijzig, personen en acties, teller, kaartjes per afdeling (radius 16, lichte achtergrond),
   "Alle vinkjes weghalen" en een melding onderaan met "Ongedaan maken".
   Leesbaarheid (UX-test 11 okt, veel 60+): lijsttekst 17 px, hoeveelheid 16, notities 15, koppen 15 zonder
   hoofdletters, contrast minstens 4,5:1, vinkvak 26 px, alles wat klikbaar is minstens 44 px hoog.
   ========================================================================== */

/* Blok met de knop onder het weekoverzicht (pas zichtbaar met JS: hidden tot boodschappenlijst.js het aanzet). */
.bl-cta[hidden] { display: none; }
.bl-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 20px 0 28px;
	padding: 18px 20px;
	border: 1px solid #d3e1ef;
	border-radius: 16px;
	background: var(--c-blue-soft, #f1f6fe);
}
.bl-cta__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--c-navy, #384353);
	color: #fff;
}
.bl-cta__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bl-cta__title { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--c-dark, #222); }
.bl-cta__sub { font-size: 14px; line-height: 1.45; color: #4b5563; }
.bl-cta__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--c-navy, #384353);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}
.bl-cta__btn:hover { background: #2a3340; }
.bl-cta__btn:active { transform: scale(0.98); }
.bl-cta__btn:focus-visible { outline: 2px solid var(--c-navy, #384353); outline-offset: 3px; }
@media (max-width: 767px) {
	.bl-cta { flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 16px; }
	.bl-cta__icon { width: 44px; height: 44px; }
	.bl-cta__icon svg { width: 22px; height: 22px; }
	.bl-cta__text { flex-basis: calc(100% - 60px); }
	.bl-cta__title { font-size: 17px; }
	.bl-cta__btn { width: 100%; justify-content: center; }
}

/* Paneel */
.bl {
	--bl-line: #e6eaef;
	--bl-pad: 24px;
	width: 100%;
	max-width: 720px;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--r-xl, 20px);
	background: #fff;
	color: var(--c-dark, #222);
	font-family: var(--f-sans, Inter, system-ui, sans-serif);
	box-shadow: 0 24px 64px rgba(31, 42, 55, 0.28);
	overflow: auto;
	overscroll-behavior: contain;
}
.bl::backdrop { background: rgba(31, 42, 55, 0.5); }
html.bl-open { overflow: hidden; }
.bl [hidden] { display: none !important; }
.bl button { font: inherit; }
.bl :focus-visible { outline: 2px solid var(--c-navy, #384353); outline-offset: 2px; }

.bl__head {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px var(--bl-pad) 12px;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #eef0f3;
	backdrop-filter: blur(6px);
}
.bl__title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.bl__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bl__close:hover { background: var(--c-soft, #f7f8fa); }

/* ---------- Stap 1: kiezen ---------- */

.bl__pick { padding: 28px var(--bl-pad) 28px; }
.bl__intro { margin-bottom: 20px; }
.bl__intro-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.2px; color: var(--c-dark, #222); }
.bl__intro-title:focus { outline: none; }
.bl__intro-text { margin: 0; font-size: 16px; line-height: 1.5; color: #4b5563; }

/* Na "Wijzig": terug naar de lijst zonder iets te veranderen */
.bl__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	margin: 0 0 20px;
	padding: 0 20px 0 14px;
	border: 1.5px solid #c5d3e2;
	border-radius: 999px;
	background: #fff;
	color: var(--c-navy, #384353);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.bl__back:hover { border-color: var(--c-navy, #384353); background: var(--c-blue-soft, #f1f6fe); }

.bl__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.bl__choices--one { grid-template-columns: 1fr; }
.bl__card { grid-row: 1; }
.bl__opt { grid-column: 1 / -1; grid-row: 2; }

.bl__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: 150px;
	padding: 18px 18px 20px;
	border: 1.5px solid var(--bl-line);
	border-radius: var(--r-lg, 18px);
	background: #fff;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.bl__card:active { transform: scale(0.99); }
.bl__card:focus-visible { outline: 3px solid rgba(56, 67, 83, 0.35); outline-offset: 2px; }
.bl__card[aria-pressed="true"] {
	border-color: var(--c-navy, #384353);
	background: var(--c-blue-soft, #f1f6fe);
	box-shadow: inset 0 0 0 1px var(--c-navy, #384353);
}
.bl__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--c-blue, #e1eaf3);
	color: var(--c-navy, #384353);
	transition: background-color 0.15s, color 0.15s;
}
.bl__card[aria-pressed="true"] .bl__card-icon { background: var(--c-navy, #384353); color: #fff; }
.bl__card-body { display: flex; flex-direction: column; gap: 4px; }
.bl__card-title { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--c-dark, #222); }
.bl__card-text { font-size: 15px; line-height: 1.45; color: #4b5563; }
.bl__card-mark {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid #cfd6de;
	border-radius: 50%;
	background: #fff;
	color: transparent;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bl__card[aria-pressed="true"] .bl__card-mark { border-color: var(--c-navy, #384353); background: var(--c-navy, #384353); color: #fff; }

/* Hover alleen met een muis (op een telefoon blijft :hover hangen na een tik). */
@media (hover: hover) {
	.bl__card:hover { border-color: #c5d3e2; background: var(--c-blue-soft, #f1f6fe); box-shadow: 0 6px 18px rgba(56, 67, 83, 0.08); }
	.bl__card[aria-pressed="true"]:hover { border-color: var(--c-navy, #384353); }
	.bl__dayopt:hover { border-color: #b9c7d6; box-shadow: 0 4px 12px rgba(56, 67, 83, 0.08); }
	.bl__dayopt:hover .bl__dayopt-box { border-color: var(--c-navy, #384353); }
	.bl__ropt:hover { background: #fafbfc; }
	.bl__ropt.is-on:hover { background: var(--c-blue-soft, #f1f6fe); }
}

/* Paneel onder de kaarten */
.bl__opt {
	margin-top: 4px;
	padding: 20px;
	border-radius: var(--r-lg, 18px);
	background: #f6f8fa;
	animation: bl-in 0.18s ease-out;
}
@keyframes bl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bl__opt-title { margin: 0 0 4px; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--c-dark, #222); }
.bl__opt-text { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #4b5563; }
.bl__opt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.bl__opt-head .bl__opt-title { margin: 0; }
.bl__daylist + .bl__switch { margin-top: 12px; }

/* Per dag: dagen met de maaltijden in klein */
.bl__daylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl__dayopt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 64px;
	padding: 12px 16px 12px 14px;
	border: 1px solid var(--bl-line);
	border-radius: 14px;
	background: #fff;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bl__dayopt[aria-pressed="true"] { border-color: #9fb3c8; }
.bl__dayopt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl__dayopt-name { font-size: 16px; font-weight: 700; color: var(--c-dark, #222); }
.bl__dayopt-meals {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 14px;
	line-height: 1.4;
	color: #4b5563;
}
.bl__dayopt-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border: 1.5px solid #b9c3ce;
	border-radius: 7px;
	background: #fff;
	color: transparent;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.bl__dayopt[aria-pressed="true"] { background: var(--c-blue-soft, #f1f6fe); }
.bl__dayopt[aria-pressed="true"] .bl__dayopt-box { border-color: var(--c-navy, #384353); background: var(--c-navy, #384353); color: #fff; }

/* De hele week: schakelaar smulrecept */
.bl__switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--bl-line);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
}
.bl__switch--inline { min-height: 44px; margin: 0; padding: 0; border: 0; background: none; gap: 10px; }
.bl__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bl__switch-track {
	position: relative;
	flex: none;
	width: 46px;
	height: 28px;
	border-radius: 999px;
	background: #cfd6de;
	transition: background-color 0.15s;
}
.bl__switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s;
}
.bl__switch input:checked + .bl__switch-track { background: var(--c-navy, #384353); }
.bl__switch input:checked + .bl__switch-track::after { transform: translateX(18px); }
.bl__switch input:focus-visible + .bl__switch-track { outline: 2px solid var(--c-navy, #384353); outline-offset: 2px; }
.bl__switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl__switch-title { font-size: 16px; font-weight: 600; color: var(--c-dark, #222); }
.bl__switch-sub { font-size: 14px; color: #4b5563; }

/* Knop "Maak lijst" */
.bl__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--c-navy, #384353);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}
.bl__go:hover { background: var(--c-navy-hover, #2b3442); }
.bl__go:active { transform: scale(0.99); }
.bl__go:focus-visible { outline-offset: 3px; }
.bl__go:disabled { background: #e3e7ec; color: #5b6472; cursor: not-allowed; transform: none; }

/* Een paar recepten: per dag, vakjes */
.bl__rgroups { columns: 2; column-gap: 12px; }
.bl__rgroup { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; break-inside: avoid; }
.bl__rgroup-title { padding: 0 4px 6px; font-size: 15px; font-weight: 700; color: #374151; }
.bl__rlist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bl-line); border-radius: 14px; background: #fff; overflow: hidden; }
.bl__rlist li + li { border-top: 1px solid #eef1f4; }
.bl__ropt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 48px;
	padding: 12px 14px;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.12s;
}
.bl__ropt.is-on { background: var(--c-blue-soft, #f1f6fe); }
.bl__ropt input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-navy, #384353); cursor: pointer; }
.bl__ropt-tag {
	flex: none;
	width: 62px;
	padding-top: 1px;
	font-size: 14px;
	font-weight: 700;
	color: #4b5563;
}
.bl__ropt-name { flex: 1 1 auto; min-width: 0; color: var(--c-dark, #222); }
.bl__ropt-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--c-deal, #fbf4e4);
	color: #6b4f12;
	font-size: 13px;
	font-weight: 600;
	vertical-align: 1px;
}
.bl__pick-foot {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: 16px -20px -20px;
	padding: 14px 20px 18px;
	border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px);
	background: linear-gradient(to bottom, rgba(246, 248, 250, 0.85), #f6f8fa 30%);
	backdrop-filter: blur(4px);
}

/* ---------- Stap 2: de lijst ---------- */

.bl__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px var(--bl-pad) 0;
	padding: 14px 14px 14px 16px;
	border: 1px solid #d3e1ef;
	border-radius: var(--r-lg, 18px);
	background: var(--c-blue-soft, #f1f6fe);
}
.bl__summary-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--c-navy, #384353);
	color: #fff;
}
.bl__summary-text { flex: 1 1 auto; min-width: 0; }
.bl__summary-label { margin: 0; font-size: 14px; font-weight: 600; color: #4b5563; }
.bl__summary-title { margin: 1px 0 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--c-dark, #222); }
.bl__summary-title:focus { outline: none; }
.bl__summary-sub {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 3px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: #4b5563;
}
.bl__change {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid #c5d3e2;
	border-radius: 999px;
	background: #fff;
	color: var(--c-navy, #384353);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.bl__change:hover { border-color: var(--c-navy, #384353); }

/* Bewaar in Mijn lijstjes (inc/lijstjes.php): duidelijke knop onder de samenvatting. */
.bl__save {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: calc(100% - 2 * var(--bl-pad));
	min-height: 50px;
	margin: 12px var(--bl-pad) 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--c-navy, #384353);
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}
.bl__save:hover { background: var(--c-navy-hover, #2b3442); }
.bl__save:active { transform: scale(0.99); }
.bl__save.is-login { border: 1.5px solid #c5d3e2; background: #fff; color: var(--c-navy, #384353); }
.bl__save.is-login:hover { border-color: var(--c-navy, #384353); background: var(--c-blue-soft, #f1f6fe); }
.bl__save:focus-visible { outline-offset: 3px; }

.bl__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px var(--bl-pad) 4px; }
.bl__persons { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--c-border, #ddd); border-radius: 999px; padding: 2px; }
.bl__step {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.bl__step:hover { background: var(--c-soft, #f7f8fa); }
.bl__count { min-width: 104px; text-align: center; font-size: 16px; font-weight: 600; }
.bl__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bl__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--c-border, #ddd);
	border-radius: 999px;
	background: #fff;
	color: var(--c-dark, #222);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.bl__action:hover { border-color: var(--c-navy, #384353); background: var(--c-soft, #f7f8fa); }
.bl__action svg { flex: none; color: var(--c-navy, #384353); }

/* Teller "3 van 35 afgevinkt" met balkje */
.bl__progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px var(--bl-pad) 0; }
.bl__progress-text { flex: 1 1 auto; margin: 0; font-size: 16px; line-height: 1.4; color: #374151; }
.bl__progress-text strong { color: var(--c-dark, #222); }
.bl__progress-hint { color: #4b5563; }
.bl__progress-bar { flex: 0 0 120px; height: 8px; border-radius: 999px; background: #e3e8ee; overflow: hidden; }
.bl__progress-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-navy, #384353); transition: width 0.2s; }

.bl__list { display: grid; gap: 12px; padding: 12px var(--bl-pad) 8px; }
.bl__group { padding: 12px 16px 6px; border-radius: 16px; background: #f6f8fa; }
.bl__group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	margin: 0 0 2px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: #374151;
}
.bl__group-count {
	flex: none;
	min-width: 28px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fff;
	color: #4b5563;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
/* Uitklapkop: de hele balk is de tikzone (minstens 44 px hoog). */
.bl__group--fold { padding-top: 0; padding-bottom: 0; }
.bl__group--fold[open] { padding-bottom: 6px; }
.bl__group--fold > summary { cursor: pointer; list-style: none; min-height: 52px; margin: 0 -16px; padding: 4px 16px; border-radius: 16px; }
.bl__group--fold > summary::-webkit-details-marker { display: none; }
.bl__group--fold > summary > span:first-child::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 12px 2px 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s;
}
.bl__group--fold[open] > summary > span:first-child::before { transform: rotate(45deg); }
/* Hangende inspringing: een tweede regel ("check je kastje") begint onder de tekst, niet onder het pijltje. */
.bl__group--fold > summary > span:first-child { padding-left: 24px; text-indent: -24px; }
@media (hover: hover) { .bl__group--fold > summary:hover { background: #eef2f6; } }
.bl__hint { font-weight: 500; color: #4b5563; }
.bl__items { margin: 0; padding: 0; list-style: none; }
.bl__items li + li { border-top: 1px solid #e3e8ee; }

/* Regel: vinkvak, naam (+ notitie), hoeveelheid; bij een Lowcarbcenter-product de knop Bekijk rechts. */
.bl__line { display: flex; align-items: center; gap: 10px; }
.bl__item { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 14px; min-height: 52px; padding: 13px 0; font-size: 17px; line-height: 1.4; cursor: pointer; }
.bl__item input {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 26px;
	height: 26px;
	margin: -1px 0 0;
	border: 2px solid #7b8794;
	border-radius: 7px;
	background: #fff center / 18px 18px no-repeat;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s;
}
.bl__item input:checked {
	border-color: var(--c-navy, #384353);
	background-color: var(--c-navy, #384353);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.bl__item input:focus-visible { outline: 3px solid var(--c-navy, #384353); outline-offset: 2px; }
@media (hover: hover) { .bl__item:hover input:not(:checked) { border-color: var(--c-navy, #384353); } }
.bl__item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bl__item-name { color: var(--c-dark, #222); font-weight: 500; overflow-wrap: anywhere; }
.bl__item-note { font-size: 15px; line-height: 1.4; color: #4b5563; }
.bl__item-qty {
	flex: 0 1 auto;
	max-width: 48%;
	padding: 1px 0 0 8px;
	color: #374151;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
/* Afgevinkt: blijft op zijn plek, grijs en doorgestreept (#6b7280 op #f6f8fa = 4,6:1). */
.bl__item.is-done .bl__item-name,
.bl__item.is-done .bl__item-qty,
.bl__item.is-done .bl__item-note { color: #6b7280; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bl__shop {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 0 12px 0 14px;
	border: 1.5px solid #c5d3e2;
	border-radius: 999px;
	background: #fff;
	color: var(--c-navy, #384353);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s, background-color 0.15s;
}
.bl__shop:hover { border-color: var(--c-navy, #384353); background: var(--c-blue-soft, #f1f6fe); }
.bl__shop svg { flex: none; }
.bl__empty { margin: 8px 0; color: #4b5563; }

/* Alle vinkjes weghalen (alleen zichtbaar als er iets is afgevinkt) */
.bl__clear-wrap { padding: 4px var(--bl-pad) 0; }
.bl__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	border: 1.5px solid #c5d3e2;
	border-radius: 999px;
	background: #fff;
	color: var(--c-navy, #384353);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.bl__clear:hover { border-color: var(--c-navy, #384353); background: var(--c-blue-soft, #f1f6fe); }
.bl__note { margin: 0; padding: 14px var(--bl-pad) 24px; font-size: 15px; line-height: 1.5; color: #4b5563; }

/* Melding onderaan. Altijd in de toegankelijkheidsboom (aria-live); onzichtbaar en niet klikbaar zonder tekst. */
.bl__toast {
	position: fixed;
	left: 50%;
	bottom: calc(36px + env(safe-area-inset-bottom));
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: min(600px, calc(100vw - 32px));
	min-height: 64px;
	padding: 10px 10px 10px 18px;
	border-radius: 16px;
	background: #2b3442;
	color: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity 0.2s, transform 0.2s;
}
.bl__toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.bl__toast-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.bl__toast-undo {
	flex: none;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--c-navy, #384353);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
.bl__toast-undo:hover { background: var(--c-blue, #e1eaf3); }
.bl .bl__toast-undo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Ruimte onderaan, zodat de melding de laatste regels niet afdekt. */
.bl.has-toast .bl__result { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .bl__toast { transition: none; } }

/* Mobiel: volle breedte en hoogte, kaarten onder elkaar met het paneel direct onder de gekozen kaart */
@media (max-width: 767px) {
	.bl {
		--bl-pad: 16px;
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}
	.bl__head { padding-top: 10px; padding-bottom: 10px; }
	.bl__pick { padding-top: 22px; }
	.bl__intro-title { font-size: 22px; }
	.bl__choices { display: flex; flex-direction: column; gap: 10px; }
	.bl__card {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		min-height: 84px;
		padding: 14px 48px 14px 14px;
	}
	.bl__card-icon { width: 46px; height: 46px; }
	.bl__card-title { font-size: 17px; }
	.bl__card-text { font-size: 15px; }
	.bl__card-mark { top: 50%; right: 14px; margin-top: -12px; }
	.bl__opt { margin-top: 0; padding: 16px; }
	.bl__daylist { grid-template-columns: 1fr; }
	.bl__rgroups { columns: 1; }
	.bl__pick-foot { margin: 16px -16px -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
	/* Samenvatting: icoon + label + Wijzig bovenaan, titel ernaast, recepten over de volle breedte eronder. */
	.bl__summary {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 12px;
		margin-top: 16px;
		padding: 12px 12px 14px;
	}
	.bl__summary-text { display: contents; }
	.bl__summary-icon { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; align-self: center; }
	.bl__summary-label { grid-column: 2; grid-row: 1; align-self: end; }
	.bl__summary-title { grid-column: 2 / -1; grid-row: 2; align-self: start; }
	.bl__change { grid-column: 3; grid-row: 1; padding: 0 14px; }
	.bl__summary-sub { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d9e5f1; -webkit-line-clamp: 3; }
	.bl__row { flex-direction: column; align-items: stretch; }
	.bl__persons { align-self: flex-start; }
	.bl__action { flex: 1 1 0; padding: 0 8px; }
	.bl__item-qty { max-width: 44%; }
	/* Met Bekijk-knop: hoeveelheid onder de naam, zodat de naam ruimte houdt. */
	.bl__line.has-shop .bl__item { flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
	.bl__line.has-shop .bl__item-main { flex-basis: calc(100% - 40px); }
	.bl__line.has-shop .bl__item-qty { max-width: none; margin-left: 40px; padding: 0; text-align: left; }
	.bl__progress-bar { flex-basis: 100%; }
	.bl__toast { bottom: calc(16px + env(safe-area-inset-bottom)); padding-left: 16px; }
	.bl__toast-undo { padding: 0 14px; }
}

/* Printen: alleen de lijst, 2 kolommen, met vakjes. boodschappenlijst.js zet een kopie in #bl-print
   (direct in <body>) en html.bl-printing; het paneel zelf is dan dicht. Kop: de keuze en de recepten. */
.bl-print { display: none; }
@media print {
	html.bl-printing body > *:not(#bl-print) { display: none !important; }
	html.bl-printing body { background: #fff; }
	html.bl-printing .bl-print { display: block; color: #000; font-size: 10.5pt; }
	.bl-print { columns: 2; column-gap: 24pt; }
	.bl-print__head { column-span: all; margin: 0 0 10pt; padding: 0 0 8pt; border-bottom: 1pt solid #bbb; }
	.bl-print__title { margin: 0; font-size: 15pt; font-weight: 700; }
	.bl-print__meta { margin: 2pt 0 0; color: #222; font-size: 11pt; }
	.bl-print__for { margin: 3pt 0 0; color: #555; font-size: 9pt; line-height: 1.35; }
	.bl-print .bl__group { margin: 0 0 8pt; padding: 0; background: none; border-radius: 0; }
	.bl-print > .bl__group, .bl-print > details { display: block; }
	.bl-print .bl__group-title { display: block; break-after: avoid; margin: 0 0 3pt; font-size: 9pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
	.bl-print .bl__group-count, .bl-print .bl__hint, .bl-print .bl__shop { display: none; }
	.bl-print summary { list-style: none; }
	.bl-print summary > span:first-child::before { display: none; }
	.bl-print summary::-webkit-details-marker { display: none; }
	.bl-print .bl__items { margin: 0; padding: 0; list-style: none; }
	.bl-print .bl__items li + li { border-top: 0; }
	.bl-print .bl__item { display: flex; gap: 6pt; padding: 1pt 0; font-size: 10pt; line-height: 1.3; break-inside: avoid; }
	.bl-print .bl__item { min-height: 0; }
	.bl-print .bl__item input { width: 10pt; height: 10pt; margin: 1pt 0 0; border-width: 1pt; border-radius: 2pt; background-size: 8pt 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.bl-print .bl__item-name { font-weight: 400; color: #000; }
	.bl-print .bl__item-note { font-size: 8.5pt; color: #555; }
	.bl-print .bl__item-qty { max-width: 50%; font-size: 10pt; color: #333; }
	.bl-print .bl__item.is-done .bl__item-name, .bl-print .bl__item.is-done .bl__item-qty { text-decoration: line-through; color: #777; }
	.bl-print a { color: inherit; text-decoration: none; font-weight: 400; }
	.bl-cta { display: none !important; }
}