html.ft-choice-help-open,
html.ft-choice-help-open body { overflow: hidden !important; }

.ft-choice-help,
.ft-choice-help *,
.ft-choice-help *::before,
.ft-choice-help *::after,
.ft-choice-help__layer,
.ft-choice-help__layer *,
.ft-choice-help__layer *::before,
.ft-choice-help__layer *::after,
.ft-choice-page,
.ft-choice-page *,
.ft-choice-page *::before,
.ft-choice-page *::after { box-sizing: border-box; }

.ft-choice-help,
.ft-choice-help__layer,
.ft-choice-page {
  --ft-choice-deep: #244653;
  --ft-choice-blue: #68a2b9;
  --ft-choice-blue-dark: #315c6d;
  --ft-choice-green: #4caf7d;
  --ft-choice-green-dark: #35845c;
  --ft-choice-ink: #273a42;
  --ft-choice-muted: #64747b;
  --ft-choice-soft: #f3f7f8;
  --ft-choice-line: #dbe6e9;
  --ft-choice-shadow: 0 24px 70px rgba(18, 48, 60, .22);
  color: var(--ft-choice-ink);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.ft-choice-help [hidden],
.ft-choice-help__layer [hidden],
.ft-choice-page [hidden] { display: none !important; }

.ft-choice-help button,
.ft-choice-help input,
.ft-choice-help__layer button,
.ft-choice-help__layer input,
.ft-choice-page button,
.ft-choice-page input,
.ft-choice-page select { font: inherit; }

/* Hero-integratie */
.ft-choice-help.ft-choice-help--badge {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.ft-choice-help__badge-trigger {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  color: var(--ft-choice-deep);
  text-align: left;
  box-shadow: 0 16px 40px rgba(15,40,50,.22);
  cursor: pointer;
  transition: transform .17s cubic-bezier(.23,1,.32,1), box-shadow .17s ease, background .17s ease;
}
.ft-choice-help__badge-trigger:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 20px 46px rgba(15,40,50,.28); }
.ft-choice-help__badge-trigger:focus-visible { outline: 3px solid rgba(191,232,209,.9); outline-offset: 3px; }
.ft-choice-help__badge-icon { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eef8f2; color: var(--ft-choice-green-dark); }
.ft-choice-help__badge-icon::after { position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--ft-choice-green); content: ""; }
.ft-choice-help__badge-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-choice-help__badge-copy { min-width: 0; display: grid; gap: 1px; }
.ft-choice-help__badge-copy small { overflow: hidden; color: var(--ft-choice-muted); font-size: 12px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ft-choice-help__badge-copy strong { color: var(--ft-choice-deep); font-size: 14px; line-height: 1.35; }
.ft-choice-help__badge-copy em { color: var(--ft-choice-green-dark); font-size: 11px; font-style: normal; line-height: 1.35; }
.ft-choice-help__badge-arrow { color: var(--ft-choice-blue-dark); font-size: 20px; font-weight: 500; }
.ft-choice-help__hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ft-choice-help__open { gap: 8px; cursor: pointer; }
.ft-choice-help__open svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-choice-help__hero-note { display: flex; align-items: center; gap: 7px; margin: 14px 0 0 !important; color: rgba(255,255,255,.78) !important; font-size: 11px; line-height: 1.5 !important; }
.ft-choice-help__hero-note span { color: #bfe8d1; font-weight: 800; }

/* Popup */
.ft-choice-help__layer { --ft-choice-safe-top: clamp(148px, 17vh, 184px); position: fixed; z-index: 2147482000; inset: 0; display: grid; align-items: start; justify-items: end; padding: var(--ft-choice-safe-top) 24px 18px; }
.ft-choice-help__layer[hidden] { display: none !important; }
.ft-choice-help__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(16, 38, 46, .56); cursor: default; backdrop-filter: blur(3px); }
.ft-choice-help__dialog { position: relative; z-index: 1; width: min(420px, calc(100vw - 48px)); max-height: 100%; display: grid; grid-template-rows: auto 3px minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: #fff; box-shadow: var(--ft-choice-shadow); animation: ft-choice-dialog-in .2s cubic-bezier(.23,1,.32,1) both; }
@keyframes ft-choice-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ft-choice-help__dialog-head { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 15px 17px; background: var(--ft-choice-deep); color: #fff; }
.ft-choice-help__avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.1); color: #bfe8d1; }
.ft-choice-help__avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-choice-help__dialog-head > span:nth-child(2) { display: grid; gap: 2px; }
.ft-choice-help__dialog-head strong { color: #fff; font-size: 14px; }
.ft-choice-help__dialog-head small { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 11px; }
.ft-choice-help__dialog-head small i { width: 7px; height: 7px; border-radius: 50%; background: #6fda9f; }
.ft-choice-help__close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.ft-choice-help__close:hover { background: rgba(255,255,255,.15); }
.ft-choice-help__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ft-choice-help__progress { height: 3px; background: #e4edef; }
.ft-choice-help__progress span { height: 100%; display: block; width: 25%; background: var(--ft-choice-green); transition: width .2s cubic-bezier(.23,1,.32,1); }
.ft-choice-help__dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 19px; background: #f6f9fa; scrollbar-gutter: stable; }
.ft-choice-help__message { width: fit-content; max-width: 92%; margin: 0 0 14px !important; padding: 11px 13px; border-radius: 4px 14px 14px; background: #e6eff2; color: var(--ft-choice-deep) !important; font-size: 14px; line-height: 1.55 !important; }
.ft-choice-help__panel { display: grid; gap: 8px; }
.ft-choice-help__panel > button:not(.ft-choice-help__continue) { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ft-choice-line); border-radius: 10px; background: #fff; color: var(--ft-choice-deep); text-align: left; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .16s ease, box-shadow .16s ease; }
.ft-choice-help__panel > button:not(.ft-choice-help__continue):hover { transform: translateY(-1px); border-color: var(--ft-choice-blue); box-shadow: 0 8px 20px rgba(36,70,83,.08); }
.ft-choice-help__panel > button span { display: grid; gap: 2px; }
.ft-choice-help__panel > button strong { color: var(--ft-choice-deep); font-size: 14px; }
.ft-choice-help__panel > button small { color: var(--ft-choice-muted); font-size: 12px; }
.ft-choice-help__panel > button b { color: var(--ft-choice-green-dark); font-size: 16px; }
.ft-choice-help__measure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ft-choice-help__measure-grid label { display: grid; gap: 6px; color: var(--ft-choice-blue-dark); font-size: 14px; font-weight: 700; }
.ft-choice-help__measure-grid label > span:last-child { display: flex; align-items: center; overflow: hidden; padding-right: 10px; border: 1px solid var(--ft-choice-line); border-radius: 9px; background: #fff; color: var(--ft-choice-muted); }
.ft-choice-help__measure-grid input { width: 100%; min-width: 0; height: 45px; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--ft-choice-deep); font-size: 14px; font-weight: 700; }
.ft-choice-help__panel--measure > p { display: flex; align-items: center; gap: 7px; margin: 2px 0 0 !important; color: var(--ft-choice-muted) !important; font-size: 12px; line-height: 1.5 !important; }
.ft-choice-help__panel--measure > p svg { width: 16px; height: 16px; fill: none; stroke: var(--ft-choice-blue-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-choice-help__continue { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 0; border-radius: 9px; background: var(--ft-choice-green); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; }
.ft-choice-help__continue:hover { background: var(--ft-choice-green-dark); color: #fff !important; }
.ft-choice-help__continue b { color: inherit !important; }
.ft-choice-help__result-card { padding: 15px; border: 1px solid #cfe3d7; border-radius: 13px; background: #fff; }
.ft-choice-help__result-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--ft-choice-green-dark); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.ft-choice-help__result-label i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.ft-choice-help__result-card h2 { margin: 0 0 2px; color: var(--ft-choice-deep); font-size: 26px; letter-spacing: -.025em; line-height: 1.2; }
.ft-choice-help__result-card > strong { color: var(--ft-choice-blue-dark); font-size: 13px; }
.ft-choice-help__result-card dl { display: grid; gap: 5px; margin: 13px 0; padding: 11px 0; border-top: 1px solid var(--ft-choice-line); border-bottom: 1px solid var(--ft-choice-line); }
.ft-choice-help__result-card dl div { display: flex; justify-content: space-between; gap: 15px; font-size: 12px; }
.ft-choice-help__result-card dt { color: var(--ft-choice-muted); }
.ft-choice-help__result-card dd { margin: 0; color: var(--ft-choice-deep); font-weight: 600; text-align: right; }
.ft-choice-help__result-card > p { margin: 0 0 13px !important; color: var(--ft-choice-muted) !important; font-size: 12px; line-height: 1.55 !important; }
.ft-choice-help__result-card > .ft-choice-help__measure-explanation { padding: 10px 11px; border-left: 3px solid var(--ft-choice-green); border-radius: 7px; background: #f0f8f4; color: var(--ft-choice-deep) !important; }
.ft-choice-help__result-card .ft-choice-help__continue { width: 100%; }
.ft-choice-help__restart { width: 100%; margin-top: 9px; padding: 4px; border: 0; background: transparent; color: var(--ft-choice-blue-dark); font-size: 10px; text-decoration: underline; cursor: pointer; }
.ft-choice-help__dialog-foot { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 8px 17px; border-top: 1px solid var(--ft-choice-line); background: #fff; color: var(--ft-choice-muted); font-size: 12px; }
.ft-choice-help__dialog-foot button { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 0; background: transparent; color: var(--ft-choice-blue-dark); font-size: 12px; font-weight: 700; cursor: pointer; }
.ft-choice-help__dialog-foot > span { margin-left: auto; }

/* Landingspagina */
.ft-choice-page { width: 100%; margin: 0; background: #fff; }
.ft-choice-page__intro { padding: 52px 0 46px; border-bottom: 1px solid var(--ft-choice-line); background: linear-gradient(135deg, #f2f7f8 0%, #fff 66%); }
.ft-choice-page__back { display: inline-flex; align-items: center; margin-bottom: 28px; color: var(--ft-choice-blue-dark) !important; font-size: 12px; font-weight: 700; text-decoration: none !important; }
.ft-choice-page__intro-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr); gap: 50px; align-items: end; }
.ft-choice-page__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--ft-choice-green-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ft-choice-page__eyebrow::before { width: 26px; height: 2px; border-radius: 99px; background: var(--ft-choice-green); content: ""; }
.ft-choice-page__intro h1 { max-width: 760px; margin: 0 0 16px; color: var(--ft-choice-deep); font-size: clamp(36px, 5vw, 62px); line-height: 1.04; letter-spacing: -.04em; }
.ft-choice-page__intro-grid > div > p { max-width: 780px; margin: 0; color: var(--ft-choice-muted); font-size: 16px; line-height: 1.7; }
.ft-choice-page__promise { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; margin: 0 !important; padding: 16px; border: 1px solid #cfe5d7; border-radius: 12px; background: #f5fbf7; }
.ft-choice-page__promise > span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #dff3e7; color: var(--ft-choice-green-dark); font-weight: 800; }
.ft-choice-page__promise strong { color: var(--ft-choice-deep); font-size: 12px; }
.ft-choice-page__promise small { color: var(--ft-choice-muted); font-size: 10px; }
.ft-choice-page__workspace { padding: 54px 0 78px; background: var(--ft-choice-soft); }
.ft-choice-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.ft-choice-page__form { display: grid; gap: 20px; }
.ft-choice-card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ft-choice-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(36,70,83,.06); }
.ft-choice-card > header { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; margin-bottom: 24px; }
.ft-choice-card > header > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #e8f1f3; color: var(--ft-choice-blue-dark); font-size: 11px; font-weight: 800; }
.ft-choice-card h2 { margin: 0 0 5px; color: var(--ft-choice-deep); font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -.025em; line-height: 1.2; }
.ft-choice-card header p { margin: 0; color: var(--ft-choice-muted); font-size: 14px; line-height: 1.6; }
.ft-choice-fields { display: grid; gap: 12px; }
.ft-choice-fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-choice-fields label,
.ft-choice-measure-row label { display: grid; gap: 7px; color: var(--ft-choice-blue-dark); font-size: 14px; font-weight: 600; }
.ft-choice-fields select,
.ft-choice-toggles select { width: 100%; height: 48px; padding: 0 35px 0 12px; border: 1px solid var(--ft-choice-line) !important; border-radius: 9px; background: #fff; color: var(--ft-choice-deep); font-size: 14px; outline: 0; }
.ft-choice-fields select:focus,
.ft-choice-measure-row input:focus,
.ft-choice-toggles select:focus { border-color: var(--ft-choice-blue); box-shadow: 0 0 0 3px rgba(104,162,185,.14); }
.ft-choice-measure-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; margin-top: 14px; }
.ft-choice-measure-row label > span:last-child { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--ft-choice-line); border-radius: 9px; background: #fff; }
.ft-choice-measure-row input { width: 100%; min-width: 0; height: 47px; padding: 0 12px; border: 0; outline: 0; color: var(--ft-choice-deep); font-size: 14px; font-weight: 600; }
.ft-choice-measure-row label b { padding-right: 12px; color: var(--ft-choice-muted); font-size: 11px; }
.ft-choice-rail-result { display: grid; gap: 2px; align-content: center; margin: 0 !important; padding: 11px 13px; border-radius: 9px; background: #eaf3f5; }
.ft-choice-rail-result span { color: var(--ft-choice-blue-dark); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ft-choice-rail-result strong { color: var(--ft-choice-deep); font-size: 14px; }
.ft-choice-current-advice { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; margin-top: 16px; padding: 13px; border: 1px solid #cfe5d7; border-radius: 11px; background: #f5fbf7; }
.ft-choice-current-advice > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #dff3e7; color: var(--ft-choice-green-dark); }
.ft-choice-current-advice p { display: grid; gap: 2px; margin: 0 !important; }
.ft-choice-current-advice small { color: var(--ft-choice-green-dark); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.ft-choice-current-advice strong { color: var(--ft-choice-deep); font-size: 12px; }
.ft-choice-current-advice button { padding: 8px 10px; border: 1px solid var(--ft-choice-green); border-radius: 7px; background: #fff; color: var(--ft-choice-green-dark); font-size: 12px; font-weight: 600; cursor: pointer; }
.ft-choice-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.ft-choice-profile-grid > button,
.ft-choice-quality-grid > button,
.ft-choice-overlap-grid > button { position: relative; min-width: 0; border: 1px solid var(--ft-choice-line); border-radius: 12px; background: #fff; color: var(--ft-choice-ink); text-align: left; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.ft-choice-profile-grid > button:hover,
.ft-choice-quality-grid > button:hover,
.ft-choice-overlap-grid > button:hover { transform: translateY(-2px); border-color: #9dbfc9; box-shadow: 0 10px 24px rgba(36,70,83,.08); }
.ft-choice-profile-grid > button.is-selected,
.ft-choice-quality-grid > button.is-selected,
.ft-choice-overlap-grid > button.is-selected { border-color: var(--ft-choice-blue); background: #f5fafb; box-shadow: 0 0 0 2px rgba(104,162,185,.12); }
.ft-choice-profile-grid > button { min-height: 190px; display: flex; flex-direction: column; gap: 8px; padding: 13px; }
.ft-choice-profile-visual { height: 62px; display: grid; place-items: end center; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, #f3f7f8, #e8f1f3); }
.ft-choice-profile-visual i { height: 45px; display: block; border: 1px solid #70c0ce; border-top: 9px solid #aeb7ba; background: rgba(164,225,235,.45); }
.ft-choice-profile-grid strong { color: var(--ft-choice-deep); font-size: 14px; }
.ft-choice-profile-grid small { color: var(--ft-choice-muted); font-size: 12px; line-height: 1.45; }
.ft-choice-profile-grid em,
.ft-choice-quality-grid em { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 99px; background: #dff3e7; color: var(--ft-choice-green-dark); font-size: 8px; font-style: normal; font-weight: 800; }
.ft-choice-quality-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.ft-choice-quality-grid > button { min-height: 92px; display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; padding: 13px; }
.ft-choice-quality-grid button > span { display: grid; gap: 4px; }
.ft-choice-quality-grid strong { color: var(--ft-choice-deep); font-size: 12px; }
.ft-choice-quality-grid small { color: var(--ft-choice-muted); font-size: 9px; line-height: 1.45; }
.ft-choice-swatch { width: 43px; height: 62px; display: block; border: 1px solid rgba(49,92,109,.18); border-radius: 7px; background: rgba(190,235,242,.62); box-shadow: inset 8px 0 16px rgba(255,255,255,.5); }
.ft-choice-swatch--matte { background: rgba(220,232,234,.85); }
.ft-choice-swatch--ribbed { background: repeating-linear-gradient(90deg, rgba(178,225,233,.72) 0 5px, rgba(255,255,255,.74) 5px 8px); }
.ft-choice-swatch--cool { background: linear-gradient(135deg, rgba(220,247,250,.9), rgba(148,214,225,.64)); }
.ft-choice-swatch--freezer { background: linear-gradient(135deg, rgba(205,239,250,.82), rgba(127,194,220,.66)); }
.ft-choice-swatch--antistatic { background: rgba(201,225,222,.76); }
.ft-choice-swatch--blue { background: #3459a4; }
.ft-choice-overlap-grid { display: grid; gap: 11px; }
.ft-choice-overlap-grid[data-count="1"] { grid-template-columns: minmax(0, 230px); }
.ft-choice-overlap-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-choice-overlap-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-choice-overlap-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-choice-overlap-grid > button { min-height: 145px; display: flex; flex-direction: column; gap: 5px; padding: 12px; }
.ft-choice-overlap-visual { position: relative; height: 68px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; border-radius: 8px; background: #f2f7f8; }
.ft-choice-overlap-visual i { width: 31%; height: 60px; margin: 8px -6px 0; border: 1px solid #72cad9; border-top: 8px solid #b5bec1; background: rgba(191,234,242,.55); }
.ft-choice-overlap-grid strong { color: var(--ft-choice-deep); font-size: 11px; }
.ft-choice-overlap-grid small { color: var(--ft-choice-muted); font-size: 8px; line-height: 1.45; }
.ft-choice-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ft-choice-toggles fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ft-choice-toggles legend { margin-bottom: 8px; color: var(--ft-choice-blue-dark); font-size: 14px; font-weight: 600; }
.ft-choice-toggles fieldset > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ft-choice-toggles button { min-height: 47px; padding: 9px 10px; border: 1px solid var(--ft-choice-line); border-radius: 9px; background: #fff; color: var(--ft-choice-muted); font-size: 10px; font-weight: 650; cursor: pointer; }
.ft-choice-toggles button.is-selected { border-color: var(--ft-choice-blue); background: #eaf3f5; color: var(--ft-choice-deep); box-shadow: inset 0 0 0 1px rgba(104,162,185,.16); }
.ft-choice-summary { position: sticky; top: 230px; padding: 24px; border-radius: 18px; background: var(--ft-choice-deep); color: #fff; box-shadow: 0 22px 52px rgba(36,70,83,.19); }
.ft-choice-summary__status { display: flex; align-items: center; gap: 7px; margin: 0 0 20px !important; color: #bfe8d1 !important; font-size: 14px; font-weight: 600; }
.ft-choice-summary__label { color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .07em; }
.ft-choice-summary h2 { margin: 4px 0 4px; color: #fff; font-size: 26px; letter-spacing: -.025em; line-height: 1.2; }
.ft-choice-summary > strong { color: #bfe8d1; font-size: 13px; }
.ft-choice-summary dl { display: grid; gap: 0; margin: 18px 0 16px; }
.ft-choice-summary dl div { display: flex; justify-content: space-between; gap: 13px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 12px; }
.ft-choice-summary dt { color: rgba(255,255,255,.58); }
.ft-choice-summary dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.ft-choice-summary__warning { margin: 13px 0 !important; padding: 10px; border-radius: 9px; background: rgba(255,224,173,.12); color: #ffe0ad !important; font-size: 9px; line-height: 1.5 !important; }
.ft-choice-summary__cta { min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 11px 13px; border-radius: 9px; background: var(--ft-choice-green); color: #fff !important; font-size: 14px; font-weight: 500; text-align: center; text-decoration: none !important; }
.ft-choice-summary__cta:hover { background: var(--ft-choice-green-dark); color: #fff !important; }
.ft-choice-summary__price { display: grid; gap: 3px; margin: 12px 0 0 !important; color: rgba(255,255,255,.58) !important; font-size: 12px; line-height: 1.5 !important; text-align: center; }
.ft-choice-summary__price strong { color: rgba(255,255,255,.86); font-size: 12px; }
.ft-choice-summary__service { display: block; margin-top: 16px; color: #fff !important; font-size: 12px; font-weight: 600; text-align: center; text-decoration: underline !important; text-underline-offset: 3px; }

@media (max-width: 1050px) {
  .ft-choice-page__layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .ft-choice-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-choice-overlap-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-choice-fields--three { grid-template-columns: 1fr 1fr; }
  .ft-choice-fields--three label:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .ft-choice-help__layer { --ft-choice-safe-top: 116px; align-items: start; justify-items: center; padding: var(--ft-choice-safe-top) 14px 10px; }
  .ft-choice-help__dialog { width: 100%; max-height: 100%; border-radius: 18px 18px 12px 12px; }
  .ft-choice-help__dialog-body { min-height: 0; }
  .ft-choice-page__intro-grid,
  .ft-choice-page__layout { grid-template-columns: 1fr; }
  .ft-choice-page__promise { max-width: 420px; }
  .ft-choice-summary { position: static; }
  .ft-choice-quality-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ft-choice-help__badge-trigger { min-height: 70px; padding: 11px 12px; }
  .ft-choice-help__badge-icon { width: 38px; height: 38px; }
  .ft-choice-help__badge-copy em { display: none; }
  .ft-choice-help__hero-actions { display: grid; }
  .ft-choice-help__hero-actions .ft-home__button { width: 100%; }
  .ft-choice-help__hero-note { align-items: flex-start; font-size: 10px; }
  .ft-choice-help__layer { padding: var(--ft-choice-safe-top) 8px 8px; }
  .ft-choice-help__dialog { max-height: 100%; }
  .ft-choice-help__measure-grid { grid-template-columns: 1fr; }
  .ft-choice-page__intro { padding: 35px 0; }
  .ft-choice-page__intro h1 { font-size: 38px; }
  .ft-choice-page__intro-grid > div > p { font-size: 14px; }
  .ft-choice-page__workspace { padding: 32px 0 50px; }
  .ft-choice-card { padding: 19px 15px; border-radius: 14px; }
  .ft-choice-card > header { grid-template-columns: 34px 1fr; gap: 9px; }
  .ft-choice-card > header > span { width: 31px; height: 31px; }
  .ft-choice-fields--three,
  .ft-choice-measure-row,
  .ft-choice-profile-grid,
  .ft-choice-overlap-grid[data-count="1"],
  .ft-choice-overlap-grid[data-count="2"],
  .ft-choice-overlap-grid[data-count="3"],
  .ft-choice-overlap-grid[data-count="4"],
  .ft-choice-toggles { grid-template-columns: 1fr; }
  .ft-choice-fields--three label:last-child { grid-column: auto; }
  .ft-choice-current-advice { grid-template-columns: auto 1fr; }
  .ft-choice-current-advice button { grid-column: 1 / -1; }
  .ft-choice-profile-grid > button { min-height: 170px; }
  .ft-choice-toggles fieldset > div { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-choice-help__dialog { animation: none; }
  .ft-choice-help *,
  .ft-choice-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Keuzeconfigurator revisie 2a — bouwt voort op de gebruikers-CSS. */
html.ft-choice-info-open,
html.ft-choice-info-open body { overflow: hidden !important; }

.ft-choice-card > .ft-choice-card__heading { grid-template-columns: 42px minmax(0, 1fr) auto; }
.ft-choice-info { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid #b7d1d9; border-radius: 50%; background: #fff; color: var(--ft-choice-blue-dark); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 5px 14px rgba(36,70,83,.08); }
.ft-choice-info:hover { border-color: var(--ft-choice-blue); background: #eef6f8; }
.ft-choice-info:focus-visible { outline: 3px solid rgba(76,175,125,.24); outline-offset: 2px; }
.ft-choice-info--inline { width: 24px; height: 24px; font-size: 11px; box-shadow: none; }
.ft-choice-label-with-info { display: inline-flex; align-items: center; gap: 7px; }
.ft-choice-measure-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-choice-measure-note { margin: 8px 0 0 !important; color: var(--ft-choice-muted) !important; font-size: 12px; line-height: 1.55 !important; }

.ft-choice-option-shell { position: relative; min-width: 0; }
.ft-choice-option-shell > .ft-choice-info--option { position: absolute; z-index: 3; top: 9px; right: 9px; width: 28px; height: 28px; background: rgba(255,255,255,.96); font-size: 11px; }
.ft-choice-profile-grid > .ft-choice-option-shell > button[data-ft-config-profile],
.ft-choice-quality-grid > .ft-choice-option-shell > button[data-ft-config-quality],
.ft-choice-overlap-grid > .ft-choice-option-shell > button[data-ft-config-overlap] { position: relative; width: 100%; min-width: 0; border: 1px solid var(--ft-choice-line); border-radius: 12px; background: #fff; color: var(--ft-choice-ink); text-align: left; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.ft-choice-profile-grid > .ft-choice-option-shell > button[data-ft-config-profile]:hover,
.ft-choice-quality-grid > .ft-choice-option-shell > button[data-ft-config-quality]:hover,
.ft-choice-overlap-grid > .ft-choice-option-shell > button[data-ft-config-overlap]:hover { transform: translateY(-2px); border-color: #9dbfc9; box-shadow: 0 10px 24px rgba(36,70,83,.08); }
.ft-choice-profile-grid > .ft-choice-option-shell > button.is-selected,
.ft-choice-quality-grid > .ft-choice-option-shell > button.is-selected,
.ft-choice-overlap-grid > .ft-choice-option-shell > button.is-selected { border-color: var(--ft-choice-blue); background: #f5fafb; box-shadow: 0 0 0 2px rgba(104,162,185,.12); }
.ft-choice-profile-grid > .ft-choice-option-shell > button[data-ft-config-profile] { min-height: 190px; display: flex; flex-direction: column; gap: 8px; padding: 13px; }
.ft-choice-profile-grid .ft-choice-option-shell em,
.ft-choice-quality-grid .ft-choice-option-shell em { position: absolute; z-index: 2; top: 9px; left: 9px; right: auto; padding: 3px 6px; border-radius: 99px; background: #dff3e7; color: var(--ft-choice-green-dark); font-size: 12px; font-style: normal; font-weight: 600; }

.ft-choice-quality-grid > .ft-choice-option-shell > button[data-ft-config-quality] { min-height: 132px; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 46px 10px 10px; }
.ft-choice-quality-photo,
.ft-choice-option-photo { display: block; overflow: hidden; border: 1px solid var(--ft-choice-line); border-radius: 9px; background: #f2f6f7; }
.ft-choice-quality-photo { width: 116px; height: 110px; }
.ft-choice-quality-photo img,
.ft-choice-option-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ft-choice-option-copy { display: grid; gap: 5px; min-width: 0; }
.ft-choice-quality-grid strong { font-size: 14px; }
.ft-choice-quality-grid small { font-size: 12px; line-height: 1.5; }

.ft-choice-overlap-grid > .ft-choice-option-shell > button[data-ft-config-overlap] { min-height: 172px; display: flex; flex-direction: column; gap: 6px; padding: 11px; }
.ft-choice-overlap-visual { width: 100%; height: 108px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #f2f7f8; }
.ft-choice-overlap-visual svg { width: 100%; height: 100%; display: block; }
.ft-choice-overlap-grid strong { font-size: 12px; }
.ft-choice-overlap-grid small { font-size: 12px; line-height: 1.5; }

.ft-choice-toggles fieldset > div { align-items: stretch; }
.ft-choice-toggles .ft-choice-option-shell > button:not(.ft-choice-info) { width: 100%; min-height: 154px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 9px; padding: 9px; border: 1px solid var(--ft-choice-line); border-radius: 10px; background: #fff; color: var(--ft-choice-muted); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.ft-choice-toggles .ft-choice-option-shell > button:not(.ft-choice-info).is-selected { border-color: var(--ft-choice-blue); background: #eaf3f5; color: var(--ft-choice-deep); box-shadow: inset 0 0 0 1px rgba(104,162,185,.16); }
.ft-choice-option-photo { width: 100%; height: 105px; }
.ft-choice-option-photo img { object-fit: contain; }
.ft-choice-option-photo--technical { display: grid; place-items: center; }
.ft-choice-option-photo--technical svg { width: 100%; height: 100%; display: block; }
.ft-choice-profile-visual img,
.ft-choice-overlap-visual img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ft-choice-substrate-group { grid-column: 1 / -1; }
.ft-choice-substrate-group > div { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.ft-choice-info-dialog,
.ft-choice-info-dialog *,
.ft-choice-info-dialog *::before,
.ft-choice-info-dialog *::after { box-sizing: border-box; }
.ft-choice-info-dialog { --ft-choice-deep: #244653; --ft-choice-blue: #68a2b9; --ft-choice-blue-dark: #315c6d; --ft-choice-green: #4caf7d; --ft-choice-green-dark: #35845c; --ft-choice-muted: #64747b; --ft-choice-line: #dbe6e9; --ft-choice-shadow: 0 24px 70px rgba(18,48,60,.22); position: fixed; z-index: 2147482500; inset: 0; display: grid; place-items: center; padding: 24px; font-family: "Poppins", Arial, Helvetica, sans-serif; }
.ft-choice-info-dialog[hidden] { display: none !important; }
.ft-choice-info-dialog__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(16,38,46,.58); backdrop-filter: blur(3px); }
.ft-choice-info-dialog__panel { position: relative; z-index: 1; width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 48px); display: grid; grid-template-columns: minmax(260px,.95fr) minmax(280px,1.05fr); overflow: auto; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; background: #fff; box-shadow: var(--ft-choice-shadow); animation: ft-choice-dialog-in .2s cubic-bezier(.23,1,.32,1) both; }
.ft-choice-info-dialog__close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(36,70,83,.92); color: #fff; font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; }
.ft-choice-info-dialog__visual { min-height: 330px; display: grid; place-items: center; overflow: hidden; background: #eef4f5; }
.ft-choice-info-dialog__visual > img { width: 100%; height: 100%; max-height: 480px; display: block; object-fit: contain; }
.ft-choice-info-dialog__visual .ft-choice-overlap-visual { width: 100%; height: 100%; min-height: 310px; border-radius: 0; }
.ft-choice-info-dialog__visual .ft-choice-overlap-visual svg { width: min(100%,440px); height: auto; }
.ft-choice-support-popup { width: 100%; height: 100%; min-height: 310px; display: grid; place-items: center; }
.ft-choice-support-popup svg { width: min(100%,440px); height: auto; }
.ft-choice-info-dialog__copy { align-self: center; padding: 48px 38px 38px; }
.ft-choice-info-dialog__copy > span { display: block; margin-bottom: 8px; color: var(--ft-choice-green-dark); font-size: 11px; font-weight: 600; }
.ft-choice-info-dialog__copy h2 { margin: 0 0 13px; color: var(--ft-choice-deep); font-size: clamp(24px,3vw,34px); line-height: 1.15; letter-spacing: -.025em; }
.ft-choice-info-dialog__copy p { margin: 0 !important; color: var(--ft-choice-muted) !important; font-size: 13px; line-height: 1.7 !important; }

@media (max-width: 1050px) {
  .ft-choice-quality-grid > .ft-choice-option-shell > button[data-ft-config-quality] { grid-template-columns: 96px minmax(0,1fr); }
  .ft-choice-quality-photo { width: 96px; }
  .ft-choice-substrate-group > div { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 820px) {
  .ft-choice-info-dialog { align-items: start; padding: 116px 14px 14px; }
  .ft-choice-info-dialog__panel { width: 100%; max-height: calc(100vh - 130px); grid-template-columns: 1fr; }
  .ft-choice-info-dialog__visual { min-height: 230px; max-height: 300px; }
  .ft-choice-info-dialog__copy { padding: 26px 24px 28px; }
}
@media (max-width: 600px) {
  .ft-choice-card > .ft-choice-card__heading { grid-template-columns: 34px minmax(0,1fr) auto; }
  .ft-choice-measure-row { grid-template-columns: 1fr; }
  .ft-choice-profile-grid,
  .ft-choice-overlap-grid[data-count="1"],
  .ft-choice-overlap-grid[data-count="2"],
  .ft-choice-overlap-grid[data-count="3"],
  .ft-choice-overlap-grid[data-count="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ft-choice-quality-grid > .ft-choice-option-shell > button[data-ft-config-quality] { min-height: 122px; grid-template-columns: 104px minmax(0,1fr); padding-right: 43px; }
  .ft-choice-quality-photo { width: 104px; height: 100px; }
  .ft-choice-toggles fieldset > div,
  .ft-choice-substrate-group > div { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .ft-choice-profile-grid > .ft-choice-option-shell > button[data-ft-config-profile] { min-height: 172px; }
  .ft-choice-toggles .ft-choice-option-shell > button:not(.ft-choice-info) { min-height: 150px; }
  .ft-choice-option-photo { height: 100px; }
  .ft-choice-info-dialog { padding: 116px 8px 8px; }
  .ft-choice-info-dialog__panel { max-height: calc(100vh - 124px); border-radius: 16px 16px 10px 10px; }
  .ft-choice-info-dialog__visual { min-height: 200px; max-height: 238px; }
  .ft-choice-info-dialog__copy { padding: 22px 18px 24px; }
}

/* Revisie 2a2: informatieknoppen in stap 1 en kaartkoppen zichtbaar houden. */
.ft-choice-page .ft-choice-label-with-info > .ft-choice-info--inline {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.ft-choice-page .ft-choice-card__heading > .ft-choice-info {
  position: static !important;
  inset: auto !important;
  align-self: start;
  margin: 2px 0 0 !important;
  transform: none !important;
}
