/* Uwish – PC samenstellen */
.uwb2-head { --b: #0c67cc; margin: 0 0 18px; max-width: 760px; }
.uwb2-head .uwb2-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--b); }
.uwb2-head h1 { margin: 0 0 8px !important; font-size: clamp(30px, 4vw, 44px) !important; color: #14213d; }
.uwb2-head p { margin: 0; color: #5b6577; font-size: 17px; line-height: 1.6; }
.uwb2 { --b: #0c67cc; --soft: #e8f1fc; --ink: #14213d; --mut: #5b6577; --line: #dbe4f0; --cta: #f5b83d; --ok: #12805c; --no: #d92d20; }
.uwb2 { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.uwb2 *, .uwb2 *::before { box-sizing: border-box; }
.uwb2 button { font: inherit; }
.uwb2-top { max-width: 100%; overflow: hidden; position: sticky; top: 0; z-index: 5; background: #f5f8fc; padding: 10px 0; margin-bottom: 16px; }
.uwb2-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.uwb2-steps::-webkit-scrollbar { display: none; }
.uwb2-steps li { flex: none; }
.uwb2-steps button { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--mut); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.uwb2-steps span { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--b); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.uwb2-steps .is-done button { color: var(--ink); }
.uwb2-steps .is-done span { background: var(--ok); color: #fff; }
.uwb2-steps .is-on button { border-color: var(--b); background: var(--b); color: #fff; }
.uwb2-steps .is-on span { background: #fff; color: var(--b); }
.uwb2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.uwb2-main section { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.uwb2-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--b); }
.uwb2-main h2 { margin: 0 0 8px !important; font-size: clamp(24px, 3vw, 32px) !important; color: var(--ink); }
.uwb2-main h3 { margin: 22px 0 10px !important; font-size: 18px !important; color: var(--ink); }
.uwb2-lead, .uwb2-start > p:not(.uwb2-kicker) { color: var(--mut); font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.uwb2-hint { background: var(--soft); color: var(--ink); padding: 10px 14px; border-radius: 12px; margin: 0 0 14px; }
.uwb2-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uwb2-choice--sm { grid-template-columns: repeat(4, 1fr); }
.uwb2-opt { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.uwb2-opt strong { color: var(--ink); font-size: 16px; }
.uwb2-opt span { color: var(--mut); font-size: 14px; }
.uwb2-opt:hover { border-color: var(--b); }
.uwb2-opt.is-on { border-color: var(--b); background: var(--soft); }
.uwb2-list { display: grid; gap: 10px; }
.uwb2-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 26px; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.uwb2-card:hover:not(:disabled) { border-color: var(--b); box-shadow: 0 10px 24px -18px rgba(12, 103, 204, .6); }
.uwb2-card.is-on { border-color: var(--b); background: var(--soft); }
.uwb2-card.is-no { opacity: .5; cursor: not-allowed; }
.uwb2-img { width: 72px; height: 72px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.uwb2-img img { width: 64px; height: 64px; object-fit: contain; }
.uwb2-img--us { background: linear-gradient(135deg, #0b3d8c, #0c67cc); color: #fff; font-weight: 900; font-size: 26px; border: 0; }
.uwb2-img--skip { background: #f1f5f9; color: var(--mut); font-size: 26px; }
.uwb2-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uwb2-txt strong { color: var(--ink); font-size: 15px; line-height: 1.35; }
.uwb2-txt small { color: var(--mut); font-size: 13px; }
.uwb2-why { font-style: normal; color: var(--no); font-size: 13px; font-weight: 600; }
.uwb2-info { font-style: normal; color: #a15c07; font-size: 13px; font-weight: 600; }
.uwb2-price { font-weight: 800; color: var(--ink); white-space: nowrap; }
.uwb2-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); }
.uwb2-card.is-on .uwb2-check { border: 0; background: var(--b) 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.uwb2-card--us { border-style: dashed; }
.uwb2-more, .uwb2-empty { color: var(--mut); font-size: 14px; margin: 14px 0 0; }
.uwb2-more a { color: var(--b); font-weight: 700; }
.uwb2-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.uwb2-back { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.uwb2-next, .uwb2-order { border: 0; background: var(--cta); color: var(--ink); border-radius: 12px; padding: 13px 22px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(245, 184, 61, .9); }
.uwb2-next:hover, .uwb2-order:hover:not(:disabled) { background: #eaa91f; }
.uwb2-order:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.uwb2-sum { position: sticky; top: 70px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 18px 40px -28px rgba(20, 33, 61, .45); }
.uwb2-sum h3 { margin: 0 0 12px !important; font-size: 20px !important; color: var(--ink); }
.uwb2-sum ul { list-style: none; margin: 0; padding: 0; }
.uwb2-sum > ul > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.uwb2-sum > ul > li:first-child { border-top: 0; }
.uwb2-sum > ul > li span { grid-column: 1 / -1; color: var(--mut); font-size: 12px; }
.uwb2-sum > ul > li strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.uwb2-sum > ul > li em { font-style: normal; font-weight: 800; color: var(--ink); white-space: nowrap; }
.uwb2-sum li.is-empty strong { color: var(--mut); font-weight: 500; }
.uwb2-sum li.is-skip strong { color: var(--mut); }
.uwb2-svc { background: #f5f8fc; margin: 6px -10px 0; padding: 8px 10px !important; border-radius: 10px; border-top: 0 !important; }
.uwb2-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; padding-top: 12px; border-top: 2px solid var(--ink); }
.uwb2-total span { font-weight: 700; color: var(--ink); }
.uwb2-total strong { font-size: 26px; color: var(--b); }
.uwb2-watt { margin: 0 0 10px; font-size: 13px; color: var(--mut); }
.uwb2-warn { margin: 0 0 12px !important; padding: 10px 12px !important; background: #fdecea; border-radius: 12px; }
.uwb2-warn li { color: var(--no); font-size: 13px; font-weight: 600; padding: 3px 0; }
.uwb2-ok { color: var(--ok); font-weight: 700; margin: 0 0 12px; }
.uwb2-todo { color: #a15c07; font-weight: 700; margin: 0 0 12px; }
.uwb2-sum .uwb2-order { width: 100%; }
.uwb2-note { font-size: 12px; color: var(--mut); text-align: center; margin: 8px 0 0; }
/* mobiel: totaal altijd in beeld */
.uwb2-bar { display: none; }
@media (max-width: 1000px) {
	.uwb2-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(20, 33, 61, .5); }
	.uwb2-bar span { display: flex; flex-direction: column; font-size: 12px; color: var(--mut); }
	.uwb2-bar strong { font-size: 20px; color: var(--b); }
	.uwb2-bar button { border: 0; background: var(--cta); color: var(--ink); border-radius: 12px; padding: 12px 16px; font-weight: 800; }
	.uwb2 { padding-bottom: 80px; }
	.uwb2-grid { grid-template-columns: 1fr; }
	.uwb2-sum { position: static; }
	.uwb2-choice { grid-template-columns: 1fr; }
	.uwb2-choice--sm { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.uwb2-main section { padding: 18px 14px; }
	.uwb2-card { grid-template-columns: 56px minmax(0, 1fr) 22px; }
	.uwb2-card .uwb2-price { grid-column: 2; grid-row: 2; }
	.uwb2-img { width: 56px; height: 56px; }
	.uwb2-img img { width: 50px; height: 50px; }
}