/* Deal finder preview: only what d.css lacks (chips with a photo, the Bauhaus tool tree, battery shapes, the combo picture). Same greys, yellow, radii as d.css. */
.fd-go{margin:16px 0 4px}
.grid .t{min-width:0}
.t .fd-s{display:block;font:600 12px B;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-go.off{opacity:.4;pointer-events:none}
.opt.low{border-style:dashed;color:#555}
.fd-hint{font:500 15px/1.4 B;color:#555;margin:14px 0 4px}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;align-items:center}
.fd-chip{display:flex;align-items:center;gap:6px;background:#F2F2F0;border-radius:12px;padding:4px 4px 4px 6px;font:600 14px B;max-width:100%}
.fd-chip img{width:36px;height:36px;object-fit:contain;mix-blend-mode:multiply}
.fd-l{white-space:normal;min-width:0;line-height:1.25}
.fd-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:8px;font:600 18px B;color:#555}
.fd-ask{display:flex;gap:8px;margin:4px 0 14px}
.fd-ask input:focus-visible{outline:3px solid #111;outline-offset:2px}
.fd-ask input{flex:1;min-width:0;height:48px;border:0;border-radius:12px;background:#F2F2F0;padding:0 12px;font:500 16px B}
.fd-ask .btn{height:48px;padding:0 16px;background:#111;color:#fff;border:0}
.fd-combos{display:grid;gap:12px;margin-top:8px}
.fd-card{display:flex;flex-direction:column;gap:6px;background:#F5F5F3;border-radius:16px;padding:12px}
.fd-card.first{background:#FFF6DA}
.fd-tag{font:700 13px B;text-transform:uppercase;letter-spacing:.04em;color:#555}
.fd-pic{display:flex;gap:8px;align-items:stretch}
.fd-main{flex:1;position:relative;background:#fff;border-radius:12px;min-height:150px;display:grid;place-items:center;padding:8px}
.fd-main img{max-width:100%;max-height:190px;object-fit:contain}
.fd-shop{position:absolute;right:6px;bottom:6px;background:#111;color:#fff;font:700 12px B;padding:3px 7px;border-radius:6px}
.fd-parts{flex-wrap:wrap;margin-top:8px}
.fd-parts .fd-main{flex:0 0 auto;min-height:0;width:calc(50% - 4px)}
.fd-parts .fd-main img{max-height:90px}
.fd-parts .fd-small{width:72px;padding:4px}
.fd-parts .fd-small img{max-height:48px}
.fd-adds{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.fd-n{position:absolute;left:6px;top:6px;font:700 14px C;background:#FEBD17;border-radius:6px;padding:2px 6px}
.fd-add{font:600 12px/1.2 B;text-align:center}
.fd-card .nm{font:600 17px B}
.pr b{font:800 26px C}
.pr small{font:600 14px B;color:#2A7A2A}
.fd-up{font:600 13px B;background:#FEBD17;border-radius:8px;padding:4px 8px;align-self:flex-start}
.fd-why{font:500 14px/1.4 B;color:#333}
.fd-why.load:empty::before{content:"Thinking";color:#767676}
.fd-card .see{display:flex;justify-content:center;align-items:center;min-height:48px;margin-top:4px;border-radius:12px;background:#111;color:#fff;font:700 16px B}
.fd-small .fd-shop,.fd-tool .fd-shop{display:none}
.fd-why.full{max-height:none}
.fd-why p+p{margin-top:4px}
.fd-offers{list-style:none;margin:10px 0}
.fd-offers li{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid #EDEDEB;font:500 16px B}
.fd-offers li span{flex:1}
.fd-spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font:500 14px/1.4 B;margin:12px 0}
.fd-spec dt{font-weight:700}
/* Tool tree = the Bauhaus menu look (Jonas 11-04 19:18; full style in remake/styles/BAUHAUS-STYLE.md): a column per level, plain rows, thin chevron, grey open row with a x. */
body:has(.tt) .wrap{max-width:1180px}
.tt{display:flex;align-items:stretch;min-height:300px;margin:8px 0 16px}
.tt .col{flex:1 1 0;min-width:0;padding:0 6px 0 10px;border-left:1px solid #D9D9D9}
.tt .col:first-child{border-left:0;padding-left:0}
.tt .ct{display:flex;align-items:center;min-height:48px;padding:0 10px;font:700 21px/1.2 B}
.tt .rw{display:flex;align-items:center;min-height:50px;font:500 16px/1.25 B;color:#111}
.tt .go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;align-self:stretch;padding:4px 10px 4px 2px;color:#111}
.tt .rw .lb{flex:1;min-width:0}
.tt .rw .lb small{display:block;font:500 13px B;color:#555}
.tt .rw em{flex:none;margin-left:6px;font:500 14px B;font-style:normal;color:#555}
.tt .go>img{width:40px;height:40px;flex:none;object-fit:contain;mix-blend-mode:multiply}
.tt .rw.on{background:#F3F3F3}
/* Rows that hold picks (Jonas 11-04 21:46 "not obvious whats selected"): light yellow with the count. */
.tt .rw.has{background:#FFF4D1}
.tt .rw.has.on{background:#FCE9AE}
.tt .cnt{flex:none;min-width:22px;height:22px;margin-left:6px;border-radius:11px;background:#111;color:#fff;font:700 13px/22px B;text-align:center}
.tt .ch{width:20px;flex:none;display:grid;place-items:center;font-style:normal;color:#333}
.tt .ch.nx::before{content:"";width:8px;height:8px;border:solid #333;border-width:1.3px 1.3px 0 0;transform:rotate(45deg);margin-left:-3px}
.tt .ch.x{font:300 24px/1 B}
/* Checkbox: 44 px touch target, 22 px Bauhaus square (yellow + black tick when on, a dash when only part of what is below it is ticked). */
.tt .cb{flex:none;display:grid;place-items:center;width:44px;align-self:stretch;min-height:44px}
.tt .cb::before{content:"";box-sizing:border-box;width:22px;height:22px;border:2px solid #111;background:#fff}
.tt .cb.on::before{background:#FEBD17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23111' stroke-width='2.4'/%3E%3C/svg%3E") center/100% no-repeat}
.tt .cb.part::before{background:#fff linear-gradient(#111,#111) center/10px 2.4px no-repeat}
.tt .bk{display:none}
/* Phone drill-down (Jonas 11-04 19:44): one level at a time, its title on top with a back arrow. */
@media (max-width:767px){.tt{min-height:0}.tt .col:not(:last-child){display:none}.tt .col{border-left:0;padding:0}
  .tt .bk{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;font:300 32px/1 B;color:#111}}
/* The quiz: one centred column on every width, a segment per question on top, answers as identical grey rows with a chevron (no outline); the chosen one is yellow. */
.fd-q{margin:16px auto 0;max-width:560px}
.fd-prog{display:flex;gap:6px}
.fd-prog i{flex:1;height:5px;background:#E0E0DC}
.fd-prog i.on{background:#111}
.fd-q .q{margin:28px 0 0}
.fd-q .opts{display:grid;gap:10px;margin-top:20px}
.fd-q .opt{box-sizing:border-box;height:68px;padding:0 20px;border:0;border-radius:12px;background:#F2F2F0;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font:600 19px/1.15 B;color:#111}
.fd-q .opt::after{content:"";flex:none;width:9px;height:9px;border:solid #111;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.fd-q .opt:hover{background:#E9E9E6}
.fd-q .opt.on{background:#FEBD17}
.fd-skip{display:block;margin:12px auto 0;max-width:560px;padding:12px 0;text-align:center;color:#6b6b6b;text-decoration:none;font:600 15px B}
.fd-skip:hover{color:#111}
.fd-sec{margin:22px 0 0;padding-top:14px;border-top:2px solid #111}
.fd-h{margin:0 0 8px;font:800 18px/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.top .back{width:44px;height:44px}
.fd-chips .edit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px}
.fd-offers .buy{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.fd-skip{min-height:44px;box-sizing:border-box}
.fd-q .opt small{display:block;font:500 13px B;color:#555;margin-top:2px}