.lf-cb{display:block;container-type:inline-size;--bg:#fff;--surface:#f3f9f8;--mint:#e4f1ee;--mint2:#c9e4dd;--ribbon:#75bbad;--strong:#256f61;--on-strong:#fff;--ink:#171717;--text:#4b5553;--line:#d5e6e2;--warn:#a93f27;--warn-bg:#fbeae5;--display:"Red Hat Display","Trebuchet MS",sans-serif;--body:Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);font:16px/1.5 var(--body);background:var(--bg)}
.lf-cb *{box-sizing:border-box}
.lf-cb img{max-width:100%;display:block}
.lf-cb h1,.lf-cb h2,.lf-cb h3,.lf-cb h4{font-family:var(--display);color:var(--ink);text-wrap:balance;margin:0;line-height:1.15}
.lf-cb h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:900;letter-spacing:-.02em}
.lf-cb h2{font-size:1.5rem;font-weight:700}
.lf-cb h3{font-size:1.05rem;font-weight:700}
.lf-cb p{margin:0}
.lf-cb .num{font-variant-numeric:tabular-nums}
.lf-cb button,.lf-cb input,.lf-cb select{font:inherit;color:inherit}
.lf-cb :focus-visible{outline:3px solid var(--strong);outline-offset:2px}
.lf-cb .hero{background:var(--mint);border-radius:12px;padding:28px clamp(16px,3vw,32px);display:grid;gap:24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}
.lf-cb .hero-copy{display:grid;gap:12px}
.lf-cb .hero-copy p{max-width:52ch}
.lf-cb .flag{font-size:.8rem;color:var(--ink);background:var(--mint2);padding:3px 10px;border-radius:4px;justify-self:start}
.lf-cb .budget{display:grid;gap:10px;background:var(--bg);padding:18px;border-radius:10px}
.lf-cb .budget-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.lf-cb .budget label{font-weight:500;color:var(--ink)}
.lf-cb .budget output{font:900 1.9rem var(--display);color:var(--ink)}
.lf-cb .presets{display:flex;gap:6px;flex-wrap:wrap}
.lf-cb .preset,.lf-cb .chip{border:1px solid var(--line);background:transparent;padding:5px 12px;border-radius:999px;cursor:pointer;font-size:.9rem}
.lf-cb .preset[aria-pressed="true"]{background:var(--strong);border-color:var(--strong);color:var(--on-strong)}
.lf-cb .chip[aria-pressed="true"]{background:var(--mint2);border-color:var(--mint2);color:var(--ink)}
.lf-cb input[type=range]{width:100%;accent-color:var(--strong)}
.lf-cb .grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;padding-block:32px 40px;align-items:start}
.lf-cb .steps{display:grid;gap:30px;min-width:0}
.lf-cb .step-head{display:grid;gap:4px}
.lf-cb .group{display:grid;gap:10px}
.lf-cb .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* grid-template-columns stond er niet. Zonder die regel krijgt de kaart een impliciete
   auto-kolom, en die wordt zo breed als de langste productnaam op één regel. Daardoor liep
   de titel buiten de kaart en werd de tegel breder dan de kaart (233px naast 285px in
   dezelfde rij). De container-query voor smalle schermen zette de kolommen al wél vast;
   dit is dezelfde maatregel voor de brede weergave. */
.lf-cb .card{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:8px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s}
.lf-cb .card:hover{border-color:var(--ribbon);transform:translateY(-2px)}
.lf-cb .tile{aspect-ratio:1;max-width:100%;border-radius:6px;background:#fff;display:grid;place-items:center;color:#1f2d2a;overflow:hidden}
.lf-cb .tile,.lf-cb .mini{position:relative}
.lf-cb .tile img,.lf-cb .mini img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:contain}
.lf-cb .tile svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* white-space:normal hierboven is geen smaakkeuze maar een noodzaak: het thema zet
   white-space:nowrap op elke <button> (uit een media-query), en onze kaartjes zijn knoppen.
   De productnaam stond daardoor op één regel en werd door overflow:hidden afgeknipt.
   In de oude opzet kon die regel er niet bij, want alles zat in een shadow DOM. */
.lf-cb .card-name{white-space:normal;font-size:.9rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.lf-cb .card-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.lf-cb .price{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lf-cb .why{font-size:.74rem;color:var(--strong);font-weight:500}
.lf-cb .isnew{font-size:.72rem;font-weight:700;background:var(--strong);color:var(--on-strong);padding:1px 7px;border-radius:4px}
.lf-cb .up{display:grid;gap:8px;background:var(--surface);border-radius:10px;padding:12px}
.lf-cb .up h4{font:700 .9rem var(--display)}
.lf-cb .up-list{display:grid;gap:8px}
.lf-cb .upcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;background:var(--bg);border:1px dashed var(--ribbon);border-radius:8px;padding:8px;cursor:pointer}
.lf-cb .upcard:hover{border-style:solid}
.lf-cb .up-name{white-space:normal;font-size:.88rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.lf-cb .up-price{display:grid;justify-items:end;text-align:right}
.lf-cb .up-extra{font-size:.74rem;font-variant-numeric:tabular-nums}
.lf-cb .raised{color:var(--strong);font-weight:500}
.lf-cb .done{background:var(--surface);border-radius:10px;padding:18px;display:grid;gap:6px}
.lf-cb .starter{border-top:1px solid var(--line);padding-top:24px;display:grid;gap:14px}
.lf-cb .starter.first{border-top:0;padding-top:0}
.lf-cb .chips{display:flex;gap:6px;flex-wrap:wrap}
.lf-cb .more{justify-self:start;background:none;border:0;color:var(--strong);font-weight:500;cursor:pointer;text-decoration:underline;padding:0}
.lf-cb .gift{position:sticky;top:48px;background:var(--surface);border-radius:12px;padding:20px;display:grid;gap:16px;min-width:0}
.lf-cb .meter{display:grid;gap:6px}
.lf-cb .bar{height:10px;border-radius:999px;background:var(--mint2);overflow:hidden}
.lf-cb .fill{height:100%;background:var(--ribbon);transition:width .25s}
.lf-cb .over .fill{background:var(--warn)}
.lf-cb .meter-row{display:flex;justify-content:space-between;gap:8px;font-size:.9rem;flex-wrap:wrap}
.lf-cb .over .left{color:var(--warn);font-weight:700}
.lf-cb .ribbon{list-style:none;margin:0;padding:0;display:grid}
.lf-cb .ribbon li{display:grid;grid-template-columns:20px 44px minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:8px;position:relative}
.lf-cb .ribbon li::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--ribbon)}
.lf-cb .ribbon li:first-child::before{top:50%}
.lf-cb .ribbon li:last-child::before{bottom:50%}
.lf-cb .ribbon li:only-child::before{display:none}
.lf-cb .knot{width:20px;height:20px;border-radius:50%;background:var(--ribbon);border:4px solid var(--surface);position:relative;z-index:1}
.lf-cb .mini{width:44px;height:44px;border-radius:6px;background:#fff;display:grid;place-items:center;color:#1f2d2a;overflow:hidden}
.lf-cb .mini svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lf-cb .item-name{white-space:normal;font-size:.88rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.lf-cb .item-name a{color:inherit;text-decoration:none}
.lf-cb .item-name a:hover{text-decoration:underline}
.lf-cb .item-end{display:grid;justify-items:end}
.lf-cb .x{background:none;border:0;cursor:pointer;color:var(--text);font-size:.78rem;text-decoration:underline;padding:0}
.lf-cb .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.15rem}
.lf-cb .cta{background:var(--strong);color:var(--on-strong);border:0;border-radius:8px;padding:12px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;display:block}
.lf-cb .cta[disabled]{opacity:.6;cursor:default}
.lf-cb .note{font-size:.85rem}
.lf-cb .note.bad{color:var(--warn)}
.lf-cb .ideas{background:var(--surface);border-radius:12px;padding:28px clamp(16px,3vw,32px);display:grid;gap:20px}
.lf-cb .idea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lf-cb .idea{background:var(--bg);border-radius:10px;padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.lf-cb .idea-head{display:grid;gap:2px}
.lf-cb .idea ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lf-cb .idea li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:.86rem;line-height:1.3;color:var(--ink)}
.lf-cb .idea .mini{width:40px;height:40px}
.lf-cb .idea .mini svg{width:18px;height:18px}
.lf-cb .idea-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.lf-cb .take{background:none;border:1px solid var(--strong);color:var(--strong);border-radius:8px;padding:6px 12px;font-weight:500;cursor:pointer}
.lf-cb .back{padding-block:36px 24px;display:grid;gap:24px}
.lf-cb .back-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.lf-cb .back-col{display:grid;gap:14px;align-content:start;min-width:0}
.lf-cb form{display:grid;gap:10px}
.lf-cb .field{display:grid;gap:3px}
.lf-cb .field label{font-size:.88rem;font-weight:500;color:var(--ink)}
.lf-cb .field input,.lf-cb .field select{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--bg);width:100%;min-width:0}
.lf-cb .two{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px}
.lf-cb .send{justify-self:start;background:var(--strong);color:var(--on-strong);border:0;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer}
.lf-cb .result{background:var(--mint);color:var(--ink);padding:10px 12px;border-radius:6px;font-size:.9rem}
.lf-cb .result.no{background:var(--warn-bg);color:var(--warn)}
.lf-cb .season{display:flex;gap:8px;align-items:center;color:var(--ink)}
.lf-cb .season input{accent-color:var(--strong);width:18px;height:18px;flex:none}
.lf-cb .table-wrap{overflow-x:auto}
.lf-cb table{border-collapse:collapse;width:100%;font-size:.92rem}
.lf-cb th,.lf-cb td{text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--line);background:transparent}
.lf-cb th{font-weight:500;color:var(--ink)}
.lf-cb td.r,.lf-cb th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lf-cb .rules{margin:0;padding-left:18px;display:grid;gap:6px}
@container (max-width:860px){.lf-cb .hero,.lf-cb .grid,.lf-cb .back-grid{grid-template-columns:minmax(0,1fr)}.lf-cb .gift{position:static;order:-1}.lf-cb .idea-grid{grid-template-columns:minmax(0,1fr)}}
@container (max-width:560px){.lf-cb .cards{grid-template-columns:minmax(0,1fr)}.lf-cb .card{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto}.lf-cb .card .tile{grid-row:1 / 3}.lf-cb .card-name{text-align:center}.lf-cb .card-foot{flex-direction:column;justify-content:center;align-items:center;gap:2px;text-align:center}}
@media (prefers-reduced-motion:reduce){.lf-cb .card,.lf-cb .fill{transition:none}.lf-cb .card:hover{transform:none}}

/* Hieronder staat wat de oude versie vanuit JavaScript op het element zette: de pagina
   over de volle breedte en de koptekst van het thema eraf. In CSS, zodat het al klaar
   staat bij de eerste weergave en niet een frame later verspringt. */
.lf-cb-pagina .page-header{display:none}
.lf-cb{width:min(1160px,calc(100vw - 48px));margin-left:calc(50% - min(580px,calc(50vw - 24px)));max-width:none}
.lf-cb .lf-cb-form{margin:0;padding:0;border:0;display:block}

/* Zelfde oorzaak als bij .card hierboven: een grid zonder kolomdefinitie krijgt een
   auto-kolom die zo breed wordt als zijn breedste kind op één regel. Bij een lange
   productnaam liep de tekst daarmee buiten het kader. Deze blokken bevatten allemaal
   productnamen, dus die krijgen een kolom die niet verder rekt dan de ruimte die er is.
   Staat ná de container-queries, maar die zetten voor deze selectors geen kolommen. */
.lf-cb .gift,
.lf-cb .ribbon,
.lf-cb .idea,
.lf-cb .idea ul,
.lf-cb .group,
.lf-cb .up,
.lf-cb .up-list,
.lf-cb .done,
.lf-cb .step-head,
.lf-cb .starter{grid-template-columns:minmax(0,1fr)}