/** Shopify CDN: Minification failed

Line 1678:102 Unexpected "@media"

**/
/* Kitchen lane, round 15: full-kitchen flow (kitchen-flow.js). Scoped to .kle[data-klf]. 16px text, 44px taps, fixed media ratios (no layout shift). */
.kle[data-klf] { --klf-r: 12px; --klf-ok: var(--kle-ok, #1f7a4d); }
.kle[data-klf] .klf-pane, .kle[data-klf] .klf-k, .kle[data-klf] .klf-host { font-size: 16px; line-height: 1.45; min-width: 0; }
.klf-muted { color: var(--kle-muted); font-size: 16px; margin: .25rem 0 .75rem; }
.klf-h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.2; margin: .2rem 0 .5rem; }
.klf-h3 { font-size: 1.15rem; margin: 1.25rem 0 .35rem; }
.klf-eyebrow { font-size: 16px; color: var(--kle-muted); margin: 0; }
.klf-cta { min-height: 48px; font-size: 16px; }
.klf-cta--big { width: 100%; min-height: 56px; font-size: 18px; font-weight: 700; }
.kle .kle-btn--link { background: none; border: 0; padding: 10px 2px; min-height: 44px; font: inherit; font-size: 16px; color: inherit; text-decoration: underline; cursor: pointer; }
/* paths */
.klf-path { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1rem; }
.klf-path__b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; border: 2px solid var(--kle-line); border-radius: var(--klf-r); background: #fff; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.klf-path__b span { color: var(--kle-muted); font-size: 16px; }
.klf-path__b[aria-pressed="true"] { border-color: var(--kle-ink, #1d1d1d); box-shadow: inset 0 0 0 1px var(--kle-ink, #1d1d1d); }
.klf-path__b:focus-visible, .klf-opt:focus-visible, .klf-chip:focus-visible, .klf-sub:focus-visible, .klf-ex:focus-visible, .klf-room:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.kle[data-path="build"] .klf-planview { display: none; }
.kle[data-path="plan"] .klf-buildview { display: none; }
.klf-subs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.klf-sub { flex: 1 0 auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--kle-line); border-radius: 999px; background: #fff; font: inherit; font-size: 16px; color: inherit; cursor: pointer; white-space: nowrap; }
.klf-sub[aria-pressed="true"] { background: var(--kle-ink, #1d1d1d); color: #fff; border-color: var(--kle-ink, #1d1d1d); }
/* starter */
.klf-start { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .klf-start { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.klf-start__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--klf-r); overflow: hidden; background: #ece8e2; }
.klf-start__room { width: 100%; height: 100%; object-fit: cover; display: block; }
.klf-start__door { position: absolute; right: 10px; bottom: 10px; width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 4px; }
.klf-start__media:not(:has(.klf-start__room)) .klf-start__door { position: static; width: 100%; height: 100%; box-shadow: none; }
.klf-start__price { font-size: 18px; margin: .25rem 0; }
.klf-start__price strong { font-size: clamp(1.8rem, 5vw, 2.4rem); display: block; line-height: 1.1; }
.klf-trust { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; }
.klf-trust li { display: inline-flex; gap: 6px; align-items: center; }
.klf-trust span { color: var(--klf-ok); font-weight: 700; }
.klf-alt-path { margin: .5rem 0 0; font-size: 16px; }
/* wizard */
.klf-wiz { min-height: 420px; }
.klf-wiz__top { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.klf-back { width: 44px; height: 44px; border: 1px solid var(--kle-line); border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.klf-back[hidden] { visibility: hidden; display: inline-block; }
.klf-dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1; }
.klf-dots li { flex: 1; height: 6px; border-radius: 3px; background: var(--kle-line); }
.klf-dots li.is-on, .klf-dots li.is-done { background: var(--kle-ink, #1d1d1d); }
.klf-live { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px; margin: 0 0 1rem; border-radius: var(--klf-r); background: var(--kle-soft); font-size: 16px; min-height: 52px; box-sizing: border-box; }
.klf-live strong { font-size: 22px; font-variant-numeric: tabular-nums; transition: transform .25s ease, color .25s ease; display: inline-block; }
.klf-live strong.is-bump, .is-bump { transform: scale(1.06); color: var(--klf-ok); }
.klf-q { animation: klf-in .28s ease both; }
.klf-q h3 { font-size: 1.25rem; margin: .25rem 0 .75rem; }
@keyframes klf-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.klf-opts { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .klf-opts { grid-template-columns: repeat(3, 1fr); } }
.klf-opts--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .klf-opts--4 { grid-template-columns: repeat(4, 1fr); } }
.klf-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 12px 14px; border: 2px solid var(--kle-line); border-radius: var(--klf-r); background: #fff; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.klf-opt span { color: var(--kle-muted); }
.klf-opt em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.klf-opt--shape { align-items: center; text-align: center; }
.klf-opt--shape svg { width: 72px; height: 56px; }
.klf-opt[aria-checked="true"] { border-color: var(--kle-ink, #1d1d1d); box-shadow: inset 0 0 0 1px var(--kle-ink, #1d1d1d); }
.klf-opt:disabled { opacity: .55; cursor: not-allowed; }
.klf-walls { display: grid; gap: 8px; }
.klf-wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--kle-line); border-radius: var(--klf-r); }
.klf-wall__r { font-weight: 600; }
.klf-wall__in { display: flex; align-items: center; gap: 6px; }
.klf-wall__in input { width: 64px; min-height: 44px; font-size: 16px; text-align: center; border: 1px solid var(--kle-line); border-radius: 8px; }
.klf-wall__in output { min-width: 64px; text-align: center; font-weight: 600; }
.klf-step, .klf-qty button { width: 44px; height: 44px; border: 1px solid var(--kle-line); border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; color: inherit; cursor: pointer; }
.klf-outline { margin: .75rem 0; aspect-ratio: 4 / 3; max-height: 260px; display: flex; justify-content: center; }
.klf-outline svg, .klf-quote__plan svg { width: 100%; height: 100%; }
.klf-wnext, .klf-qadd, .klf-qnext { width: 100%; margin-top: 1rem; }
/* switch */
.klf-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: .75rem 0 0; cursor: pointer; font-size: 16px; position: relative; }
.klf-switch input { position: absolute; opacity: 0; width: 44px; height: 28px; margin: 0; }
.klf-switch__ui { width: 44px; height: 26px; border-radius: 13px; background: #c9c5bf; position: relative; flex: 0 0 auto; transition: background .2s; }
.klf-switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.klf-switch input:checked + .klf-switch__ui { background: var(--klf-ok); }
.klf-switch input:checked + .klf-switch__ui::after { transform: translateX(18px); }
.klf-switch input:focus-visible + .klf-switch__ui { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.klf-switch small { color: var(--kle-muted); font-size: 16px; }
.klf-instrow { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 1rem 0 0; padding-top: .5rem; border-top: 1px solid var(--kle-line); }
/* svg plan */
.klf-svg__wall { stroke: #8a857d; stroke-width: 3; fill: none; }
.klf-svg__b { fill: #f3efe8; stroke: #5c574f; stroke-width: 1.2; }
.klf-svg__b--sink { fill: #dbe8f3; } .klf-svg__b--dw, .klf-svg__b--range, .klf-svg__b--fridge { fill: #e7e4df; stroke-dasharray: 4 3; }
.klf-svg__b--filler { fill: #fff; } .klf-svg__b--island { fill: #ede3d3; } .klf-svg__b--corner { fill: #e9e1f1; }
.klf-svg__dim { font-size: 11px; fill: #514c45; } .klf-svg__l { font-size: 9px; fill: #33302b; }
/* quote */
.kle[data-klf] .klf-quote__total { font-size: 18px; margin: .5rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; } .kle[data-klf] .klf-quote__total span { flex-basis: 100%; } .kle[data-klf] .klf-quote__total strong { font-size: 2rem; display: inline; margin: 0; padding: 0; }
.klf-quote__plan { aspect-ratio: 4 / 3; max-height: 300px; display: flex; justify-content: center; }
.klf-quote__cta { display: grid; gap: 8px; }
.klf-quote__list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.klf-2020 { font-size: 16px; margin: .5rem 0; } .klf-2020 span { color: var(--klf-ok); font-weight: 700; }
.klf-notes { font-size: 16px; color: var(--kle-muted); padding-left: 1.2rem; }
.klf-photo { margin: .75rem 0 0; }
/* examples */
.klf-examples__row, .klf-combos__row { display: grid; gap: 10px; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
@media (min-width: 900px) { .klf-examples__row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } .klf-combos__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.klf-ex { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px; border: 1px solid var(--kle-line); border-radius: var(--klf-r); background: #fff; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; min-height: 44px; }
.klf-ex__lab { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; background: var(--kle-soft); padding: 2px 8px; border-radius: 6px; }
.klf-ex__svg { width: 100%; aspect-ratio: 4 / 3; display: block; }
.klf-ex__svg svg { width: 100%; height: 100%; }
.klf-ex__p { font-size: 16px; } .kle[data-klf] .klf-ex__p b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .kle[data-klf] .klf-ex__p small { color: var(--kle-muted); font-size: 16px; }
/* cards and grids */
.klf-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .klf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .klf-grid--hw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.klf-grid--hw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.klf-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--kle-line); border-radius: var(--klf-r); background: #fff; overflow: hidden; min-width: 0; }
.klf-card.is-on { border-color: var(--klf-ok); box-shadow: inset 0 0 0 2px var(--klf-ok); }
.klf-card.is-out .klf-card__img img { opacity: .55; }
.klf-card__img { position: relative; aspect-ratio: 1 / 1; background: #f6f4f1; overflow: hidden; }
.klf-card__img > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.klf-card__b { padding: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.klf-card__b h4 { font-size: 16px; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.klf-card__b .kle-btn { margin-top: auto; min-height: 44px; font-size: 16px; }
.klf-card__p { font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.klf-card__hit { position: absolute; inset: 0; z-index: 1; background: transparent; border: 0; cursor: pointer; }
.klf-card--hw .klf-card__b { padding: 8px; }
.klf-badge { display: inline-block; font-size: 16px; padding: 2px 8px; border-radius: 6px; background: #e6f2ea; color: #17603b; margin: 2px 4px 2px 0; }
.klf-out { color: var(--kle-err, #b3261e); font-size: 16px; margin: 0; }
.klf-alt { font-size: 16px; }
.klf-qty { display: flex; align-items: center; gap: 6px; margin-top: auto; } .klf-qty output { min-width: 28px; text-align: center; font-weight: 700; }
.klf-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: .5rem 0; padding: 2px; }
.klf-chip { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 1px solid var(--kle-line); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: 16px; cursor: pointer; white-space: nowrap; }
.klf-chip[aria-pressed="true"] { background: var(--kle-ink, #1d1d1d); color: #fff; border-color: var(--kle-ink, #1d1d1d); }
.klf-empty { padding: 16px; border: 1px dashed var(--kle-line); border-radius: var(--klf-r); background: var(--kle-soft); }
.klf-empty .kle-btn { margin: 6px 6px 0 0; min-height: 44px; }
.klf-warn { color: var(--kle-warn, #9a5b00); font-size: 16px; }
.klf-note { font-size: 16px; }
.klf-skel { min-height: 420px; border-radius: var(--klf-r); background: linear-gradient(90deg, #f1eee9 0%, #f8f6f3 50%, #f1eee9 100%); background-size: 200% 100%; animation: klf-sk 1.4s linear infinite; }
@keyframes klf-sk { to { background-position: -200% 0; } }
/* try-on */
.klf-tryon { border: 1px solid var(--kle-line); border-radius: var(--klf-r); overflow: hidden; margin-bottom: .75rem; background: #fff; }
.klf-tryon__tabs { display: flex; border-bottom: 1px solid var(--kle-line); }
.klf-tryon__tabs button { flex: 1; min-height: 44px; border: 0; background: #fff; font: inherit; font-size: 16px; color: inherit; cursor: pointer; }
.klf-tryon__tabs button[aria-selected="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--kle-ink, #1d1d1d); }
.klf-tryon__stage { position: relative; aspect-ratio: 4 / 3; max-height: 420px; margin: 0 auto; background: #f4f1ec; display: flex; align-items: center; justify-content: center; }
[data-klf-canvas], [data-klf-tryimg] { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; display: block; }
.klf-tryon__cap { font-size: 16px; color: var(--kle-muted); margin: 0; padding: 8px 12px; min-height: 2.9em; }
.klf-pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 12px; border-radius: var(--klf-r); background: var(--kle-soft); min-height: 64px; box-sizing: border-box; }
.klf-pickbar .klf-switch { margin: 0; }
/* real room photo crossfade: hover (desktop), tap-hold or the "See it in a room" button (phone) */
.klf-room { position: relative; }
.klf-room__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.klf-room__lab { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 16px; line-height: 1.3; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.92); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.klf-room__lab--none { opacity: 1; position: absolute; }
@media (hover: hover) { .klf-room.has-room:hover .klf-room__alt, .klf-room.has-room:hover .klf-room__lab { opacity: 1; } }
.klf-room.is-room .klf-room__alt, .klf-room.is-room .klf-room__lab, .klf-room.is-hold .klf-room__alt, .klf-room.is-hold .klf-room__lab, .klf-room.has-room:focus-visible .klf-room__alt { opacity: 1; }
.klf-room { -webkit-touch-callout: none; user-select: none; }
/* combos */
.klf-combos { margin-top: 1.25rem; min-height: 120px; }
.klf-combos__ph { min-height: 120px; }
.klf-combo { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--kle-line); border-radius: var(--klf-r); padding: 8px; background: #fff; }
.klf-combo.is-on { border-color: var(--klf-ok); box-shadow: inset 0 0 0 2px var(--klf-ok); }
.klf-combo__img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f4f1ec; }
.klf-combo__sw { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 100%; height: 100%; gap: 2px; }
.klf-combo__sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klf-combo__n { margin: 0; font-size: 16px; } .klf-combo__n span { display: block; color: var(--kle-muted); font-size: 16px; }
.klf-combo .klf-cta { width: 100%; }
/* review + install */
.klf-rev { list-style: none; padding: 0; margin: 0; }
.klf-rev__row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--kle-line); font-size: 16px; }
.klf-rev__row span { display: block; color: var(--kle-muted); }
.klf-rev__row a, .klf-rev__row button { min-height: 44px; display: inline-flex; align-items: center; }
.klf-rev__sum { font-size: 16px; margin: .5rem 0; }
.klf-install { margin: 1rem 0; padding: 14px; border: 1px solid var(--kle-line); border-radius: var(--klf-r); }
.klf-instlist { display: grid; gap: 2px; }
.klf-zip .kle-geo { margin: .5rem 0; }
.klf-contact { margin-top: .75rem; }
/* the flow owns installation, so the engine's "Installed" delivery radio is hidden here */
.kle[data-klf] .kle-mode:has(input[value="install"]) { display: none; }
.kle[data-klf] .kle-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .kle[data-klf] .kle-modes { grid-template-columns: 1fr; } .klf-path__b { min-height: 72px; } }
@media (prefers-reduced-motion: reduce) { .klf-q, .klf-skel { animation: none; } .klf-live strong, .klf-room__alt, .klf-room__lab, .klf-switch__ui, .klf-switch__ui::after { transition: none; } }

/* plan path: one primary action (t43u); the sidebar/bar starter buttons belong to Build it myself */
.kle[data-klf][data-path=plan] [data-kle-plan-start] [data-kle-plan-starter], .kle[data-klf][data-path=plan] .kle-bar__start { display: none; }
.kle[data-klf] .klf-rev__row .kle-btn, .kle[data-klf] [data-kle-review] a { min-height: 44px; min-width: 44px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
body:has(.kle[data-klf][data-path=plan]) .kle-bar__start, .kle[data-klf][data-path=plan] .kle-top__from, body:has(.kle[data-klf][data-path=plan]) .kle-top__from { display: none; }
.kle[data-klf] [data-klf-wiz], .kle[data-klf] [data-klf-start], .kle[data-klf] .klf-tryon, .kle[data-klf] [data-klf-quote] { scroll-margin-top: calc(var(--kle-hdr, 120px) + 72px); }
.kle.is-empty[data-klf][data-path=plan] .kle-bar__start { display: none !important; }

/* ---- round 16: before/after previews, designer tips, plan export, showroom mode ---- */
.klf-ba { margin: .5rem 0; max-width: 100%; }
.klf-ba svg { display: block; width: 100%; max-width: 360px; height: auto; }
.klf-ba__lab { font-size: 14px; font-weight: 700; fill: #333; }
.klf-ba__c { font-size: 14px; font-weight: 700; fill: #1d1d1d; }
.klf-ba__w { font-size: 11px; fill: #444; }
.klf-ba__b { fill: #eef0f2; stroke: #8a9096; }
.klf-ba__n { fill: #e6f2ea; stroke: #2e7d4f; }
.klf-ba__o { fill: #fff; stroke: #b3261e; stroke-dasharray: 4 3; }
.klf-ba__f { fill: #f6efe2; stroke: #a07a3b; }
.klf-ba__g { fill: #f4f6f8; stroke: #6b7280; stroke-dasharray: 3 3; }
.klf-start__ba { margin: .25rem 0 .5rem; }
.klf-start__ba .klf-ba__box { min-height: 110px; max-width: 360px; }
.klf-ba__t { font-size: 16px; margin: .25rem 0; color: var(--kle-muted, #555); }
.kla__save li { flex-wrap: wrap; }
.kla__save li .klf-ba { flex-basis: 100%; }
.klf-tips { margin: .75rem 0; }
.klf-tip__head { font-size: 18px; margin: .75rem 0 .5rem; }
.klf-tip { border: 1px solid var(--kle-line, #ddd); border-left: 4px solid #2e6fb7; border-radius: 8px; padding: .75rem; margin: 0 0 .75rem; background: #fff; font-size: 16px; }
.klf-tip--warn { border-left-color: #c77700; }
.klf-tip__h { font-weight: 700; margin: 0 0 .25rem; }
.klf-tip__why, .klf-tip__pc { margin: 0 0 .5rem; }
.klf-tip__pc span { display: block; }
.klf-tip__btns { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .5rem; }
.klf-tip__b { min-height: 44px; font-size: 16px; white-space: normal; line-height: 1.25; }
@media (max-width: 480px) { .klf-tip__btns { grid-template-columns: 1fr; } }
.klf-auto { font-size: 16px; margin: 0 0 .5rem; padding: .5rem .75rem; background: #f3f8f4; border-radius: 8px; }
.klf-auto span { color: #2e7d4f; font-weight: 700; }
.klf-auto .kle-btn--link, .klf-tip__kept .kle-btn--link { min-height: 44px; font-size: 16px; }
.klf-tip__kept { font-size: 16px; }
.klf-tip__ok { font-size: 16px; margin: .5rem 0; }
.klf-tip__ok summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.klf-export { margin: 1rem 0; padding: .75rem; border: 1px solid var(--kle-line, #ddd); border-radius: 8px; }
.klf-export__b { display: flex; flex-wrap: wrap; gap: .5rem; }
.klf-export__b .kle-btn { min-height: 44px; font-size: 16px; }
.klf-sr { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 85vh; overflow: auto; background: #10324f; color: #fff; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); font-size: 18px; box-shadow: 0 -4px 16px rgba(0,0,0,.2); }
.klf-sr-on .kle[data-klf] { padding-bottom: 180px; }
.klf-sr__t { margin: 0 0 .5rem; }
.klf-sr__b { display: flex; flex-wrap: wrap; gap: .5rem; }
.klf-sr .kle-btn--ghost { color: #fff; border-color: #fff; }
.klf-sr .klf-contact { background: #fff; color: #1d1d1d; border-radius: 8px; padding: .75rem; margin-top: .75rem; }
.klf-sr-on .kle[data-klf] .kle-btn, .klf-sr-on .kle[data-klf] button, .klf-sr-on .kle[data-klf] input, .klf-sr-on .kle[data-klf] select { min-height: 56px; font-size: 18px; }
.klf-sr-on .kle[data-klf] { font-size: 18px; }
.klf-sr-on .kle[data-klf] .klf-tip, .klf-sr-on .kle[data-klf] .klf-auto { font-size: 18px; }
/* round 16.2: versions, share banner, showroom/phone bar, install "What's included" placeholder */
.klf-chg{margin:8px 0;padding:10px 12px;border-left:3px solid #2f6f4f;background:#f4f8f5;font-size:16px}
.klf-chg ul{margin:6px 0 0;padding-left:20px}.klf-chg li{margin:2px 0}
.klf-vers{font-size:16px}
.klf-shared{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin:0 0 12px;padding:10px 14px;border:1px solid #d6d6d6;border-radius:8px;background:#fafafa;font-size:16px;min-height:64px}
.klf-shared p{margin:0;flex:1 1 260px}
.klf-sr__src{display:inline-flex;gap:8px}
.klf-sr__src [aria-pressed="true"]{background:#1f3d2f;color:#fff;border-color:#1f3d2f}
.klf-sr__rep{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.klf-sr__rep input{min-height:44px;font-size:16px;padding:0 10px;border:1px solid #999;border-radius:6px;width:11em}
.klf-sr__n{margin:4px 0 0;font-size:16px;min-height:1.4em}
.klf-incl{display:inline-block;min-height:44px;line-height:44px;padding:0 4px;font-size:16px;text-decoration:underline}
.klf-incl__box{margin:6px 0 10px;padding:10px 12px;background:#f6f6f6;border-radius:6px;font-size:16px}
.klf-incl__box p{margin:4px 0}
.klf-start__ba--js{min-height:110px}
.klf-start__wait{font-size:16px;font-weight:400;color:#555}
/* round 17: required ceiling height */
.klf-ceil{margin:0 0 20px}
.klf-ceil.is-need{outline:3px solid #c2410c;outline-offset:6px;border-radius:8px}
.klf-ceil__other{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;font-size:16px}
.klf-ceil__other[hidden]{display:none}
.klf-ceil__other input{font-size:16px;min-height:44px;width:7em;padding:0 10px}
.klf-ceil__other .kle-btn{min-height:44px}
.klf-ceil__help{margin:12px 0;font-size:16px}
.klf-ceil__help summary{min-height:44px;display:flex;align-items:center;cursor:pointer;text-decoration:underline}
.klf-ceil__ok{font-size:16px;color:#166534;margin:10px 0}
.klf-ceil__ok .kle-btn--link{min-height:44px;font-size:16px}
/* ===== round 17b: live build preview ===== */
.klf-pv { margin: 0 0 .75rem; display: none; }
@media (min-width: 1100px) { .klf-pv { display: block; } }
.klf-pv__stage { position: relative; aspect-ratio: 16 / 7; border-radius: 8px; overflow: hidden; background: #f3f0ea; border: 1px solid #e3ddd2; contain: layout paint; }
.klf-pv__stage svg, .klf-pv-dlg__stage svg, .klf-pv-thumb__img svg, .klf-pv-ba svg { display: block; width: 100%; height: 100%; }
.klf-pv__empty { margin: 0; position: absolute; inset: 0; display: grid; place-items: center; padding: .75rem; text-align: center; font-size: 16px; color: #6d665c; }
.klf-pv__cap { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-height: 44px; font-size: 16px; color: #4b453d; }
.klf-pv__run { margin-left: auto; font-size: 16px; }
.klf-pv__open { min-height: 44px; font-size: 16px; }
.klf-pv__t { font: 3px/1 system-ui, sans-serif; fill: #4b453d; }
.klf-pv__t--gap { fill: #8a2f2f; }
.klf-pv__bn { font: 700 2.6px/1 system-ui, sans-serif; fill: #2f5d50; }
.klf-pv__new { animation: klfPvIn .7s ease both; }
@keyframes klfPvIn { from { opacity: 0; } to { opacity: 1; } }
.klf-pv-thumb { display: none; flex: 0 0 auto; width: 64px; height: 44px; padding: 0; border: 1px solid #d8d0c2; border-radius: 6px; background: #f3f0ea; overflow: hidden; cursor: pointer; }
@media (max-width: 1099px) { .klf-pv-thumb { display: block; } }
.klf-pv-thumb__img { display: block; width: 100%; height: 100%; }
.klf-pv-dlg { border: 0; padding: 0; width: min(1100px, 100vw); max-width: 100vw; max-height: 100dvh; border-radius: 10px; }
.klf-pv-dlg::backdrop { background: rgba(20, 18, 15, .55); }
@media (max-width: 1099px) { .klf-pv-dlg { width: 100vw; height: 100dvh; border-radius: 0; margin: 0; } }
.klf-pv-dlg__in { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; font-size: 16px; min-height: 100%; box-sizing: border-box; }
.klf-pv-dlg__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.klf-pv-dlg__top h2 { margin: 0; font-size: 22px; }
.klf-pv-dlg__x { width: 44px; height: 44px; font-size: 28px; line-height: 1; border: 1px solid #d8d0c2; border-radius: 50%; background: #fff; cursor: pointer; }
.klf-pv-dlg__stage { aspect-ratio: 16 / 8; background: #f3f0ea; border-radius: 8px; overflow: hidden; position: relative; }
@media (max-width: 640px) { .klf-pv-dlg__stage { aspect-ratio: 4 / 3; } }
.klf-pv-dlg__legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.klf-pv-dlg__legend li { display: flex; align-items: center; gap: .5rem; }
.klf-pv-dlg__legend img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #e3ddd2; background: #fff; }
.klf-pv__bnl { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2f5d50; color: #2f5d50; display: inline-grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.klf-pv-dlg__price { margin: 0; display: flex; justify-content: space-between; font-size: 18px; }
.klf-pv-dlg__note { margin: 0; color: #6d665c; }
.klf-pv-ba { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0; }
.klf-pv-ba figure { margin: 0; }
.klf-pv-ba figcaption { font-size: 16px; margin-bottom: .25rem; }
.klf-pv-ba svg { aspect-ratio: 16 / 9; height: auto; border-radius: 6px; background: #f3f0ea; }
@media (max-width: 480px) { .klf-pv-ba { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .klf-pv__new { animation: none; } }
.klf-pv__hint { fill: #2f5d50; opacity: .75; font-weight: 600; }
/* R17c: phone bar keeps one fixed size in every state (no layout shift) */
@media (max-width: 1099px) {
  body .kle-bar, html body .kle-bar[data-kle-bar] { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: 44px 44px; gap: 8px; align-items: center; height: calc(96px + 1.2rem + env(safe-area-inset-bottom)); }
  body .kle-bar > .klf-pv-thumb { grid-column: 1; grid-row: 1; }
  body .kle-bar > .kle-bar__total { grid-column: 2; grid-row: 1; min-width: 0; height: 44px; min-height: 44px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .kle-bar > .kle-bar__total span { line-height: 18px; overflow: hidden; text-overflow: ellipsis; }
  body .kle-bar > .kle-bar__total strong { line-height: 24px; }
  body .kle-bar > .kle-bar__total small { font-size: 16px; }
  body .kle-bar > a.kle-btn { grid-column: 3; grid-row: 1; }
  body .kle-bar > [data-kle-add], .kle-bar > .kle-bar__start { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; }
  body:has(.kle-bar) { padding-bottom: calc(104px + 1.2rem + env(safe-area-inset-bottom)); }
}
.klf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klf-tryon__cap { line-height: 1.45; min-height: calc(2 * 1.45em + 16px); box-sizing: border-box; } @media (max-width: 699px) { .klf-tryon__cap { min-height: calc(4 * 1.45em + 16px); } }

/* ================= Round 18: look-first welcome, 3 questions, one page scroll, pinned Back / total / Next ================= */
/* plan path shows the welcome itself; the two-path switch only shows inside "I'll pick cabinets myself" */
.kle[data-path="plan"] .klf-path { display: none; }
.klf-welcome { display: block; max-width: 980px; }
.klf-welcome .klf-h2 { margin: .25rem 0 .5rem; }
.klf-welcome__lead { font-size: 18px; line-height: 1.5; margin: 0 0 1rem; max-width: 46em; }
.klf-looks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 699px) { .klf-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.klf-look__b { display: grid; gap: 4px; width: 100%; padding: 8px; border: 2px solid var(--kle-line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.klf-look__b:hover, .klf-look__b:focus-visible { border-color: var(--kle-accent, #2f5d50); }
.klf-look.is-on .klf-look__b { border-color: var(--kle-accent, #2f5d50); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kle-accent, #2f5d50) 25%, transparent); }
.klf-look__img { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f3f0ea; }
.klf-look__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klf-look__n { font-weight: 700; font-size: 16px; }
.klf-look__t { font-size: 16px; color: var(--kle-muted, #6d665c); line-height: 1.3; }
.klf-look__on { font-size: 16px; color: var(--klf-ok, #2f5d50); font-weight: 700; }
.klf-welcome__pick { display: grid; gap: .75rem; padding: 1rem; border-radius: 12px; background: #f7f5f0; }
.klf-welcome__now { margin: 0; font-size: 18px; }
.klf-welcome__ctas { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .klf-welcome__ctas { grid-template-columns: 1.3fr 1fr; } }
.klf-welcome__ctas .klf-cta--big { width: 100%; }
.klf-2020 { margin: 0; font-size: 16px; }
.klf-2020 span { color: var(--klf-ok, #2f5d50); font-weight: 700; }

/* wizard header: back, "Question 1 of 3", dots, live price */
.klf-wiz__top { display: flex; align-items: center; gap: 12px; margin: 0 0 1rem; }
.klf-back { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--kle-line); border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.klf-prog { flex: 1 1 auto; min-width: 0; }
.klf-prog__t { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.klf-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.klf-dots > * { width: 28px; height: 6px; border-radius: 3px; background: #e3ddd2; }
.klf-dots > .is-done, .klf-dots > .is-on { background: var(--kle-accent, #2f5d50); }
.klf-dots > .is-on { opacity: .6; }
.klf-wiz .klf-live { font-size: 16px; text-align: right; min-width: 7.5em; }
.klf-isl { margin: 1.25rem 0 1rem; }
.klf-isl__q { font-weight: 700; margin: 0 0 .5rem; font-size: 18px; }
.klf-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); border: 1px solid var(--kle-line); border-radius: 12px; overflow: hidden; max-width: 100%; }
.klf-seg__b { min-height: 48px; padding: 8px 14px; border: 0; border-right: 1px solid var(--kle-line); background: #fff; font: inherit; font-size: 16px; color: inherit; cursor: pointer; }
.klf-seg__b:last-child { border-right: 0; }
.klf-seg__b[aria-checked="true"] { background: var(--kle-accent, #2f5d50); color: #fff; font-weight: 700; }
/* the pinned bar is the one Next; in-question Next buttons stay only as a no-JS-bar fallback */
.kle.klf-navpin .klf-wiz [data-klf-snext], .kle.klf-navpin .klf-wiz [data-klf-wnext] { display: none; }

/* the plan */
.klf-plan__h { margin: 0; font-size: 22px; }
.klf-plan__sub { margin: .25rem 0 .75rem; color: var(--kle-muted, #6d665c); font-size: 16px; }
.klf-quote__plan { aspect-ratio: 16 / 9; background: #f7f5f0; border-radius: 12px; overflow: hidden; }
.klf-quote__plan svg { width: 100%; height: 100%; display: block; }
.klf-quote__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 18px; margin: .75rem 0; }
.klf-quote__total strong { font-size: 28px; min-width: 6em; }
.klf-why { border-left: 4px solid var(--kle-accent, #2f5d50); padding: .25rem 0 .25rem 1rem; margin: 1rem 0; }
.klf-why h4, .klf-better h4 { margin: 0 0 .5rem; font-size: 22px; }
.klf-why ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: 16px; line-height: 1.5; }
.klf-better h4 small { font-weight: 400; color: var(--kle-muted, #6d665c); font-size: 16px; }
.klf-mb { border: 1px solid var(--kle-line); border-radius: 12px; margin: 0 0 8px; background: #fff; }
.klf-mb__h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 56px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.klf-mb__h strong { display: block; font-size: 18px; }
.klf-mb__h small { display: block; font-size: 16px; color: var(--kle-muted, #6d665c); }
.klf-mb__i { font-size: 22px; width: 32px; text-align: center; flex: 0 0 32px; }
.klf-mb__b { padding: 0 14px 14px; }
.klf-mb__lab { margin: .5rem 0 .25rem; font-weight: 700; font-size: 16px; }
.klf-chips { flex-wrap: wrap; overflow: visible; }
.klf-chip small { font-size: 16px; color: var(--kle-muted, #6d665c); }
.klf-chip[aria-checked="true"] small { color: inherit; }
.klf-tt { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.klf-tt__o { display: grid; gap: 4px; padding: 6px; border: 2px solid var(--kle-line); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: inherit; cursor: pointer; text-align: left; min-height: 44px; }
.klf-tt__o[aria-checked="true"] { border-color: var(--kle-accent, #2f5d50); font-weight: 700; }
.klf-tt__img { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #f3f0ea; }
.klf-tt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klf-tt__res { min-height: 3em; font-size: 16px; }
.klf-quote__list summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 16px; }
.klf-quote__list ul { list-style: none; margin: 0; padding: 0; }
.klf-quote__list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--kle-line); font-size: 16px; }
.klf-quote__list .klf-qsum { border-bottom: 0; font-size: 18px; padding-top: 10px; }
.klf-quote__cta { display: grid; gap: 10px; margin-top: 1rem; }
@media (min-width: 700px) { .klf-quote__cta { grid-template-columns: 1fr 1fr; } .klf-quote__cta > :last-child { grid-column: 1 / -1; } }
.klf-quote__cta .klf-cta { min-height: 52px; width: 100%; }

/* appliances: optional, skip first */
.klf-apskip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f7f5f0; margin: 0 0 1rem; }
.klf-apskip p { margin: 0; font-size: 16px; }
.klf-eta { margin: .25rem 0 0; color: var(--klf-ok, #2f5d50); font-weight: 600; font-size: 16px; }
.klf-more { margin: .75rem 0; }
.klf-tip__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* the sold-out sheet: closable, the in-stock twin first, back-in-stock is one small link */
dialog.klf-sheet { border: 0; padding: 0; border-radius: 16px; width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 48px); box-shadow: 0 16px 48px rgba(0,0,0,.25); }
dialog.klf-sheet::backdrop { background: rgba(0,0,0,.4); }
@media (max-width: 699px) { dialog.klf-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; } }
.klf-sheet__in { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: .6rem; font-size: 16px; }
.klf-sheet__top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.klf-sheet__top h3 { margin: 0; font-size: 22px; }
.klf-sheet__x { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--kle-line); border-radius: 50%; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; }
.klf-sheet p { margin: 0; }
.klf-sheet__twin { padding: 12px; border-radius: 12px; background: #f0f6f3; display: grid; gap: .4rem; }
.klf-sheet__lab { font-weight: 700; color: var(--klf-ok, #2f5d50); }
.klf-sheet__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.klf-sheet__acts .klf-cta { min-height: 48px; width: 100%; }
.klf-sheet__tiny { text-align: center; }
.klf-sheet__tiny .klf-tiny { font-size: 16px; min-height: 44px; color: var(--kle-muted, #6d665c); }

/* ---------- one page scroll: no scroll boxes inside the page ---------- */
.kle-app .kle-table-wrap, html body .kle-app .kle-table-wrap { max-height: none !important; min-height: 0; overflow: visible !important; }
.kle-app .kle-table thead th { position: static; }
@media (min-width: 1100px) {
  .kle-app .kle-plan { max-height: none !important; overflow: visible !important; }
  .kle-plan__items { max-height: none; overflow: visible; }
}
@media (max-width: 1099px) { .kle-plan:not(.is-open) .kle-plan__items { max-height: none; overflow: visible; } }
.kla__log { max-height: none !important; overflow: visible !important; }

/* ---------- a visual cabinet browser: cards, real photos, one page scroll ---------- */
.kle-app .kle-table thead { display: none; }
.kle-app .kle-table, .kle-app .kle-table tbody { display: block; width: 100%; }
.kle-app .kle-table tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1299px) { .kle-app .kle-table tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .kle-app .kle-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.kle-app .kle-table tr.kle-row { display: flex !important; flex-direction: column; gap: 6px; padding: 10px !important; border: 1px solid var(--kle-line); border-radius: 12px; background: #fff; min-width: 0; }
.kle-app .kle-table tr.kle-row.is-in { border-color: var(--kle-accent, #2f5d50); box-shadow: 0 0 0 1px var(--kle-accent, #2f5d50); }
.kle-app .kle-table tr.kle-row > td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
.kle-app .kle-table td.kle-c-opts:not(:has(*)) { display: none; }
.kle-app .kle-row__item { display: grid !important; grid-template-columns: 1fr; gap: 6px; }
.kle-app .kle-row__img, .kle-app .kle-row__img--ph { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; flex: none !important; object-fit: contain; display: block; box-sizing: border-box; }
.kle-app .kle-row__name { display: block; font-size: 16px; line-height: 1.3; }
.kle-app .kle-row__code { font-weight: 700; font-size: 18px; }
.kle-app .kle-table td.kle-c-qty { margin-top: auto; }
.kle-app .kle-table td.kle-c-total { display: none !important; }
.kle-app .kle-table tr.kle-row.is-in td.kle-c-total { display: block !important; font-size: 16px; color: var(--kle-muted, #6d665c); }
.kle-app .kle-table tr.kle-oos-row { grid-column: 1 / -1; display: block; }
.kle-app .kle-table .kle-qty { display: flex; width: 100%; }
.kle-app .kle-table .kle-qty input { flex: 1 1 auto; min-width: 0; }
.kle-app .kle-table .kle-oos-btn { width: 100%; min-height: 44px; }

/* ---------- the pinned bottom bar: Back · total · Next ---------- */
.kle.klf-navpin .klf-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, calc((100vw - 1410px) / 2 + 48px)) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--kle-line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); transition: transform .2s ease; }
.kle.klf-navpin .klf-nav.is-off, .kle.klf-navpin .klf-nav.is-away { transform: translateY(110%); visibility: hidden; }
.klf-nav .kle-btn { min-height: 48px; }
.klf-nav [data-kle-next] { margin-left: 0; }
.klf-nav__tot { flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.klf-nav__l { font-size: 16px; color: var(--kle-muted, #6d665c); }
.klf-nav__tot strong { font-size: 22px; min-width: 5.5em; text-align: left; font-variant-numeric: tabular-nums; }
.klf-nav__pv { display: none; }
@media (max-width: 749px) { .klf-nav__l { display: none; } .klf-nav .kle-btn { padding-inline: 14px; } }
.kle.klf-navpin ~ * .kle-bar, body .kle.klf-navpin .kle-bar, html body .kle.klf-navpin .kle-bar[data-kle-bar] { display: none !important; }
body:has(.kle.klf-navpin) { padding-bottom: calc(var(--klf-navh, 72px) + 12px + env(safe-area-inset-bottom)) !important; } /* round 44 (P7) */
.kle.klf-navpin .kle-modes label, .kle.klf-navpin [data-klf-choice], .kle.klf-navpin .kle-plan__totals { scroll-margin-bottom: calc(var(--klf-navh, 72px) + 16px); }
.kle.klf-navpin .kle-modes label { cursor: pointer; }
.klf-combo__per { white-space: normal; }
html:has(.kle.klf-navpin) { scroll-padding-bottom: 88px; }
@media (prefers-reduced-motion: reduce) { .kle.klf-navpin .klf-nav { transition: none; } }
.kle-hero__moredesc { max-height: none !important; overflow: visible !important; }
/* cards stay short: door hinge and modify options appear once the cabinet is in the plan */
.kle-app .kle-table tr.kle-row:not(.is-in) td.kle-c-opts { display: none; }
/* keep Next and the total clear of the chat and accessibility buttons in the corners */
@media (min-width: 700px) { .kle.klf-navpin .klf-nav { padding-left: max(80px, calc((100vw - 1410px) / 2 + 48px)); padding-right: max(96px, calc((100vw - 1410px) / 2 + 48px)); } }

/* ---------- round 18b: focus mode, assembling kitchen, reveal (calm motion, reduced motion respected) ---------- */
/* welcome, the 3 questions and the plan show one thing: no step bar, no empty side panel */
.kle.klf-focus .kle-steps, .kle.klf-focus .kle-plan { display: none; }
.kle.klf-focus .kle-layout { grid-template-columns: minmax(0, 1fr); }
.kle.klf-focus .kle-main { width: 100%; max-width: 880px; margin-inline: auto; }
.kle.klf-focus .klf-wiz { padding: 24px; }
@media (max-width: 699px) { .kle.klf-focus .klf-wiz { padding: 16px; } }
.kle.klf-focus .klf-q h3, .kle.klf-focus .klf-plan__h { font-size: 22px; line-height: 32px; margin: 24px 0 16px; letter-spacing: -.01em; }
.kle.klf-focus .klf-plan__sub { margin: 0 0 16px; color: #5c574f; }
/* the live drawing: room reserved up front so nothing moves */
.klf-outline--live { aspect-ratio: 16 / 9; max-height: 240px; margin: 24px 0 8px; background: #faf8f4; border-radius: 12px; padding: 8px; }
.klf-svg .is-new { transform-box: fill-box; transform-origin: center; animation: klf-pop .36s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes klf-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
/* "Your kitchen is ready" */
.klf-ready { display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; background: #1f7a4d; position: relative; animation: klf-ready .5s cubic-bezier(.2, .7, .2, 1) both; }
.klf-ready::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes klf-ready { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
/* one next action: the pinned bar carries "Looks good, next"; the page keeps the quick add */
.kle.klf-navpin [data-klf-qnext] { display: none; }
.klf-quote__cta { grid-template-columns: 1fr !important; }
.klf-quote__cta > :last-child { grid-column: auto; }
.klf-quote__more { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; justify-content: center; margin: 8px 0 0; }
.klf-quote__more .kle-btn--link { min-height: 44px; font-size: 16px; }
.klf-share__msg { text-align: center; margin: 0; min-height: 24px; color: #1f7a4d; }
@media (prefers-reduced-motion: reduce) { .klf-svg .is-new, .klf-ready { animation: none; } }
/* phone polish: nothing wraps in the pinned bar or the price chip */
.klf-nav .kle-btn, .klf-live strong { white-space: nowrap; }
@media (max-width: 699px) { .klf-wiz .klf-live { min-width: 0; padding: 8px 12px; } .klf-wiz .klf-live strong { font-size: 22px; } .klf-wiz .klf-live small { display: none; } }
@media (max-width: 480px) { .klf-nav__tot strong { min-width: 0; } .klf-nav { gap: 8px; } }
@media (max-width: 480px) { .klf-nav .kle-btn { flex: 0 0 auto; min-width: 0; padding-inline: 16px; } .klf-nav__tot { padding: 0; } .klf-nav__tot strong { font-size: 18px; } }

/* ===== round 19: reveal hero (front view, real photos, to scale) ===== */
.klf-hero { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 16px; }
.klf-hero__stage { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #faf6ef 0%, #efe7da 100%); box-shadow: inset 0 0 0 1px rgba(60,40,20,.06); }
.klf-hero__row { display: flex; gap: 16px; align-items: flex-end; min-width: 0; }
.klf-hero__row--isl { justify-content: center; }
.klf-hero__w { margin: 0; min-width: 0; flex: var(--g) 1 0; display: flex; flex-direction: column; gap: 8px; }
.klf-hero__row--isl .klf-hero__w { flex: 0 0 var(--dw); }
.klf-hero__c { width: 100%; border-radius: 8px; overflow: hidden; background: #f3eee5; }
.klf-hero__c svg { display: block; width: 100%; height: 100%; }
.klf-hero__w figcaption { font-size: 16px; line-height: 24px; color: #5c554b; }
.klf-hero__sw { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-height: 64px; }
.klf-hero__sw::-webkit-scrollbar { display: none; }
.klf-hero__sw li { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid var(--kle-line, #e4e0d9); border-radius: 12px; background: #fff; max-width: 280px; }
.klf-hero__sw img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #f3eee5; flex: 0 0 48px; }
.klf-hero__sw span { display: flex; flex-direction: column; min-width: 0; }
.klf-hero__sw strong { font-size: 16px; line-height: 24px; }
.klf-hero__sw small { font-size: 16px; line-height: 24px; color: #5c554b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klf-hero__note { margin: 0; font-size: 16px; line-height: 24px; color: #5c554b; text-wrap: pretty; }
.klf-hero__fpw { margin: 0; }
.klf-hero__fp { min-height: 44px; font-size: 16px; padding: 0; }
.klf-hero .klf-quote__plan { aspect-ratio: 16 / 9; }
.klf-hero .klf-quote__plan[hidden] { display: none; }
.klf-hero.is-first .klf-hero__stage { opacity: .001; transform: translateY(8px); }
.klf-hero.is-first.is-in .klf-hero__stage { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .klf-hero.is-first .klf-hero__stage { opacity: 1; transform: none; transition: none; } }
@media (max-width: 749px) {
  .klf-hero__stage { padding: 8px; gap: 16px; border-radius: 12px; margin: 0 -8px; }
  .klf-hero__row { flex-direction: column; align-items: center; gap: 16px; }
  .klf-hero__w, .klf-hero__row--isl .klf-hero__w { flex: none; width: var(--pw); }
}
.klf-seg { display: inline-flex; align-self: flex-start; padding: 4px; gap: 4px; border-radius: 12px; background: #f1ede6; }
.klf-seg__b { min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 16px; color: inherit; cursor: pointer; }
.klf-seg__b[aria-pressed="true"] { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.klf-seg__b:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
/* two-tone before / after */
.klf-tt__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.klf-tt__ba figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.klf-tt__ba .klf-tt__c { border-radius: 8px; overflow: hidden; background: #f3eee5; }
.klf-tt__ba .klf-tt__c svg { display: block; width: 100%; height: 100%; }
.klf-tt__ba figcaption { font-size: 16px; line-height: 24px; color: #5c554b; }
.klf-tt__ba figcaption strong { color: var(--kle-ink, #1d1d1d); }

/* ===== round 19: one designer pick per step ===== */
.klf-rec { margin: 0 0 16px; padding: 16px; border: 1px solid var(--kle-line, #e4e0d9); border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(40,28,14,.06); }
.klf-rec.is-done, .klf-rec.is-kept { background: #fbfaf7; }
.klf-rec__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 24px; align-items: center; }
.klf-rec__media { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.klf-rec__pv { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #f3eee5; }
.klf-rec__pv svg { display: block; width: 100%; height: 100%; }
.klf-rec__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 12px; background: #f6f3ee; overflow: hidden; }
.klf-rec__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.klf-rec__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.klf-rec__eye { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: #8a5a2b; letter-spacing: .01em; }
.klf-rec__h { margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; text-wrap: balance; }
.klf-rec__why, .klf-rec__sub, .klf-rec__note, .klf-rec__vs, .klf-rec__ok { margin: 0; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.klf-rec__sub, .klf-rec__note, .klf-rec__vs { color: #5c554b; }
.klf-rec__p { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.klf-rec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.klf-rec__list li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; }
.klf-rec__chip, .klf-rec__sw { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.klf-rec__chip img, .klf-rec__sw img, .klf-rec__list img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #f3eee5; flex: 0 0 40px; }
.klf-rec__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.klf-rec__acts .kle-btn { min-height: 48px; font-size: 16px; border-radius: 8px; }
.klf-rec__acts .kle-btn--primary { padding-inline: 24px; }
.klf-rec__ok { color: #2f7a4f; font-weight: 700; flex-basis: 100%; }
.klf-rec__alt { font-size: 16px; min-height: 44px; }
.klf-opts[hidden] { display: none !important; }
.klf-opts { margin-top: 8px; }
@media (max-width: 749px) {
  .klf-rec { padding: 16px; border-radius: 12px; }
  .klf-rec__body { grid-template-columns: 1fr; }
  .klf-rec__h { font-size: 22px; line-height: 28px; }
  .klf-rec__acts .kle-btn { flex: 1 1 100%; }
}

/* ===== round 19: compact step bar (Step N of 7 + current name), never scrolls sideways ===== */
.klf-stepnow { margin: 0 0 8px; font-size: 16px; line-height: 24px; color: #5c554b; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.klf-stepnow strong { color: var(--kle-ink, #1d1d1d); font-size: 18px; }
.kle-app .kle-steps .kle-steps__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; overflow: visible; background: none; border-radius: 0; }
.kle-app .kle-steps .kle-step { position: relative; min-width: 0; min-height: 44px; padding: 8px 0 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; background: none; box-shadow: none; border-radius: 8px; font-weight: 400; white-space: nowrap; }
.kle-app .kle-steps .kle-step::before { content: ""; display: block; height: 6px; border-radius: 3px; background: #e2ddd5; }
.kle-app .kle-steps .kle-step.is-done::before { background: #2f7a4f; }
.kle-app .kle-steps .kle-step[aria-selected="true"]::before { background: var(--kle-ink, #1d1d1d); }
.kle-app .kle-steps .kle-step__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.kle-app .kle-steps .kle-step__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1100px) {
  .kle-app .kle-steps .kle-step__t { position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 24px; text-align: left; color: #5c554b; }
  .kle-app .kle-steps .kle-step[aria-selected="true"] .kle-step__t { color: var(--kle-ink, #1d1d1d); font-weight: 700; }
}
.kle-app .kle-steps .kle-step:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }

/* ===== round 19: slim right panel after the plan (preview + total + "N items · View list") ===== */
.klf-slimbar { display: none; }
@media (min-width: 1100px) {
  .kle.klf-slim .klf-slimbar { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
  .kle.klf-slim .kle-plan__mode, .kle.klf-slim .kle-plan__start, .kle.klf-slim .kle-plan__totals, .kle.klf-slim .kle-plan__fin, .kle.klf-slim .kle-plan__feenote,
  .kle.klf-slim .kle-meter, .kle.klf-slim .kle-checks, .kle.klf-slim .kle-ship--plan, .kle.klf-slim .kle-plan [data-kle-add], .kle.klf-slim .kle-plan__msg,
  .kle.klf-slim .kle-plan__sample, .kle.klf-slim .kle-plan__disc, .kle.klf-slim .klf-pv__run { display: none !important; }
  .kle.klf-slim:not(.klf-slim-open) .kle-plan__items, .kle.klf-slim:not(.klf-slim-open) .kle-plan__tools, .kle.klf-slim:not(.klf-slim-open) .klf-slim__ex { display: none !important; }
  .klf-slim__tot { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 16px; line-height: 24px; }
  .klf-slim__tot strong { font-size: 22px; line-height: 32px; }
  .klf-slim__btn { min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 16px; border: 1px solid var(--kle-line, #e4e0d9); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; cursor: pointer; color: inherit; }
  .klf-slim__btn::after { content: "▾"; margin-left: auto; transition: transform .2s; }
  .klf-slim__btn[aria-expanded="true"]::after { transform: rotate(180deg); }
  .klf-slim__btn:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
  .klf-slim__ex { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 24px; }
  .klf-slim__ex li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
  .klf-slim__exh { font-weight: 700; }
}

/* ===== round 19: micro-polish ===== */
.kle-app h1, .kle-app h2, .kle-app h3, .klf-plan__h { text-wrap: balance; }
.kle-app p { text-wrap: pretty; }
.klf-chip, .klf-sub, .klf-opt, .klf-combo { border-radius: 8px; }
.klf-rec__ph { display: flex; height: 100%; align-items: center; justify-content: center; }
.klf-rec__ph img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; opacity: .5; }
.klf-rec__pv.is-on .klf-rec__ph { display: none; }
.kle.klf-slim .klf-slim__l { text-decoration: underline; text-underline-offset: 3px; }
/* round 20: phone bar never clips the price; the Next label gets shorter instead */
@media (max-width: 480px) {
  .klf-nav .klf-nav__tot { flex: 0 0 auto; padding: 0 2px; }
  .klf-nav .klf-nav__tot strong { min-width: 0; overflow: visible; text-overflow: clip; }
  .klf-nav .kle-btn[data-kle-next] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .klf-nav__lg { display: none; }
}
/* round 20: handles pick shows the real pull on the real door, close */
.klf-rec__cu { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #efe8dc; }
.klf-rec__cu canvas { display: block; width: 100%; height: 100%; }
.klf-rec__cu figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.88); font-size: 16px; line-height: 24px; color: #3d372f; }
.klf-rec__pv--sm { max-height: 160px; }
.klf-nav .kle-btn[data-kle-next] { white-space: nowrap; }

/* ---------- round 20b: measurements first, one primary, a list that is right ---------- */
.klf-ways { display: grid; gap: 10px; margin: 12px 0 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .klf-ways { grid-template-columns: 1.3fr 1fr; } }
.klf-way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: 14px 16px; border: 2px solid #d9d4cc; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.klf-way strong { font-size: 18px; }
.klf-way span { font-size: 16px; color: #5c574f; }
.klf-way--main { border-color: #1f1d1a; background: #1f1d1a; color: #fff; }
.klf-way--main span { color: #e9e5de; }
.klf-way:focus-visible { outline: 3px solid #b07a3c; outline-offset: 2px; }
.klf-say { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #f6f1e8; font-size: 16px; line-height: 1.45; color: #2c2924; }
.klf-say__a { color: #b07a3c; }
.klf-ref { margin: 8px 0 12px; }
.klf-ref__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.klf-ref .klf-muted, .klf-ref__ok { font-size: 16px; }
.klf-ref__ch { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.klf-reffig { margin: 10px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.klf-reffig figcaption { font-size: 14px; color: #5c574f; }
.klf-reffig__b { padding: 0; border: 1px solid #d9d4cc; border-radius: 8px; background: #fff; cursor: zoom-in; display: block; }
.klf-reffig__b img { display: block; width: 220px; max-width: 100%; height: auto; border-radius: 8px; }
.klf-reffig.is-big .klf-reffig__b img { width: 100%; max-width: 760px; }
.klf-reffig__pdf { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; }
@media (max-width: 749px) {
  .klf-reffig { position: fixed; right: 10px; bottom: calc(var(--klf-navh, 76px) + 10px); z-index: 40; margin: 0; background: #fff; padding: 4px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
  .klf-reffig figcaption { display: none; }
  .klf-reffig__b img { width: 76px; height: 76px; object-fit: cover; }
  .klf-reffig.is-big { left: 10px; }
  .klf-reffig.is-big .klf-reffig__b img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
}
@media (min-width: 750px) { .klf-q--walls .klf-outline + .klf-reffig, .klf-q--shape .klf-outline + .klf-reffig { float: none; } }
.klf-mks { grid-column: 1 / -1; width: 100%; }
.klf-mk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: #f7f5f1; }
.klf-mk__n { font-weight: 600; min-width: 4.5em; }
.klf-mk__f { display: inline-flex; align-items: center; gap: 6px; }
.klf-mk__f output { font-size: 16px; min-width: 7.5em; text-align: center; font-variant-numeric: tabular-nums; }
.klf-mk__add { margin: 2px 0 0; }
.klf-mk__add .kle-btn--link, .klf-mk .kle-btn--link, .klf-trim .kle-btn--link { min-height: 44px; min-width: 44px; font-size: 16px; }
.klf-svg__mk { stroke-width: 5; stroke-linecap: butt; }
.klf-svg__mk--window { stroke: #5aa0d8; }
.klf-svg__mk--door { stroke: #b07a3c; stroke-dasharray: 4 3; }
.klf-svg__mkl { font-size: 9px; fill: #5c574f; }
.klf-fit { margin: 12px 0; }
.klf-fit h4, .klf-trim h4, .klf-sugs h4 { margin: 0 0 6px; font-size: 18px; }
.klf-fit ul, .klf-trim ul, .klf-sugs ul, .klf-sum ul { list-style: none; margin: 0; padding: 0; }
.klf-fit li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid #ece8e1; font-size: 16px; }
.klf-fit li span:nth-child(2) { color: #5c574f; }
.klf-fit li strong { margin-left: auto; }
.klf-fit li.is-ok strong { color: #2f7a3e; }
.klf-fit li.is-warn strong { color: #a2451b; }
.klf-fit--c li { padding: 4px 0; }
.klf-cm { margin: 12px 0; padding: 10px 12px; border: 1px solid #ece8e1; border-radius: 10px; }
.klf-cm__math { font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.klf-cm .klf-chips { margin-bottom: 6px; }
.klf-trim li, .klf-sugs li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #ece8e1; font-size: 16px; }
.klf-trim li.is-off { opacity: .7; }
.klf-trim__c { font-weight: 600; font-variant-numeric: tabular-nums; }
.klf-trim small { font-weight: 400; color: #5c574f; font-size: 14px; }
@media (max-width: 560px) { .klf-trim li, .klf-sugs li { grid-template-columns: 1fr auto; } .klf-trim__w { grid-column: 1 / -1; grid-row: 2; } }
.klf-sugs .kle-btn { min-height: 44px; }
.klf-ok { color: #2f7a3e; font-size: 16px; }
.klf-paste { margin: 10px 0; }
.klf-paste summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 16px; text-decoration: underline; }
.klf-paste__l { display: block; font-size: 16px; color: #5c574f; margin: 4px 0 6px; }
.klf-paste textarea, .klf-qbox textarea { width: 100%; font-size: 16px; padding: 10px; border: 1px solid #c9c3b9; border-radius: 8px; box-sizing: border-box; }
.klf-paste .kle-btn { margin-top: 8px; min-height: 44px; }
.klf-qbox { margin: 8px 0 14px; padding: 10px 12px; border: 2px solid #1f1d1a; border-radius: 12px; background: #fff; }
.klf-qbox > summary { min-height: 44px; display: flex; align-items: center; font-size: 18px; font-weight: 600; cursor: pointer; }
.klf-qbox [data-kle-quick-apply] { min-height: 48px; }
.klf-sum { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #f6f1e8; }
.klf-sum h3 { margin: 0 0 8px; font-size: 22px; }
.klf-sum li { padding: 4px 0; font-size: 16px; line-height: 1.45; }
.klf-sum__t { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 18px; }
.klf-ceil--min .klf-ceil__ok { font-size: 16px; }
.klf-ceil--min .kle-btn--link { min-height: 44px; }
.klf-nav__tot { position: relative; }
.klf-delta { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); padding: 2px 8px; border-radius: 999px; background: #1f1d1a; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; }
.klf-delta.is-on { animation: klf-delta 2.4s ease-out both; }
@keyframes klf-delta { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .klf-delta.is-on { animation: none; opacity: 1; } }
.klf-ceil__need { font-size: 16px; }

/* round 20c: contractor lane, the starter is not the main action once they chose to paste a list */
.klf-pro-on [data-kle-starter].kle-btn--primary, .klf-pro-on [data-kle-plan-starter].kle-btn--primary { background: #fff; color: #1f1f1f; border: 1.5px solid #1f1f1f; }

/* round 20c: while a code search is typed, results sit right under the box (paste box and filter chips step aside) */
.klf-searching .klf-qbox, .klf-searching .kle-chips { display: none; }

/* round 20c: a hidden tab label (absolute) escaped the tab scroller and widened the phone page to 624px; keep it inside */
.kle .kle-tabs { position: relative; }

/* round 20c: phone code search, results show code, name, price and qty without scrolling (the photo returns when the search is cleared) */
@media (max-width: 749px) { .klf-searching .kle-row__img { display: none; } }
.klf-pro-on .klf-searching .kle-row__img { display: none; }
/* round 20c: first paint already uses the welcome layout (most visits land there), so the page does not jump sideways when the flow script starts */
html:not(.klf-pa) .kle:not(.klf-navpin) .kle-steps, html:not(.klf-pa) .kle:not(.klf-navpin) .kle-plan { display: none; }
html:not(.klf-pa) .kle:not(.klf-navpin) .kle-layout { grid-template-columns: minmax(0, 1fr); }
html:not(.klf-pa) .kle:not(.klf-navpin) .kle-main { width: 100%; max-width: 880px; margin-inline: auto; }
/* round 20c: step tabs stay 44px wide on 360px phones */
@media (max-width: 379px) { .kle-app .kle-steps .kle-steps__list { gap: 2px; } }
/* ===== round 22: contractor list, pro-grade ===== */
.klf-qbox { border: 1px solid #ddd6cb; box-shadow: 0 1px 2px rgba(31,29,26,.06); padding: 14px 16px; }
.klf-qbox > summary { font-size: 18px; }
.klf-qbox textarea { border-color: #d6cfc4; background: #fbfaf8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }
.klf-qbox textarea:focus { outline: 2px solid #1f1d1a; outline-offset: 1px; background: #fff; }
.klf-qbox.has-pl [data-kle-quick-result] { display: none; }
.klf-qbox.has-pl textarea { min-height: 0; height: 72px; }
.klf-pl { margin: 14px 0 4px; }
.klf-pl__h { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #4a453e; }
.klf-pl ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ece8e1; }
.klf-pl__row { display: grid; grid-template-columns: minmax(64px, auto) 1fr auto auto 44px; gap: 4px 12px; align-items: center; min-height: 56px; padding: 6px 0; border-bottom: 1px solid #ece8e1; font-size: 16px; }
.klf-pl__c { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.klf-pl__n { color: #4a453e; min-width: 0; }
.klf-pl__q { display: inline-flex; align-items: center; border: 1px solid #d6cfc4; border-radius: 22px; overflow: hidden; }
.klf-pl__q output { min-width: 32px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.klf-pl__b { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; line-height: 1; color: #1f1d1a; cursor: pointer; }
.klf-pl__b:hover { background: #f4f0ea; }
.klf-pl__p { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 84px; }
.klf-pl__x { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; color: #8a8378; cursor: pointer; border-radius: 22px; }
.klf-pl__x:hover { background: #f4f0ea; color: #1f1d1a; }
.klf-pl__row.is-bad { grid-template-columns: minmax(64px, auto) 1fr 44px; background: #fff7ec; }
.klf-pl__row.is-bad { padding-left: 10px; border-radius: 6px; }
.klf-pl__row.is-bad .klf-pl__c { color: #9a4b00; }
.klf-pl__dm { min-height: 44px; padding: 0 10px; margin: 0 2px; border: 1px solid #c9c3b9; border-radius: 22px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.klf-pl__sum { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 18px; }
.klf-pl__sum span { color: #9a4b00; font-size: 16px; }
@media (max-width: 749px) {
  .klf-pl__row { grid-template-columns: 1fr auto 44px; grid-template-areas: "c p x" "n q x"; gap: 2px 8px; padding: 8px 0; }
  .klf-pl__c { grid-area: c; } .klf-pl__n { grid-area: n; font-size: 16px; } .klf-pl__q { grid-area: q; justify-self: end; } .klf-pl__p { grid-area: p; } .klf-pl__x { grid-area: x; }
  .klf-pl__row.is-bad { grid-template-areas: "c x" "n x"; grid-template-columns: 1fr 44px; }
}
.klf-sugs { margin-top: 14px; }
.klf-trim__n { font-weight: 400; color: #4a453e; }
.klf-sugs li.is-out { opacity: .8; }
.klf-so { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #6b655c; text-decoration: underline; white-space: nowrap; }
/* ===== round 22: phone question screens fit above the bar ===== */
@media (max-width: 749px) {
  .kle.klf-focus .klf-q h3 { font-size: 22px; line-height: 28px; margin: 12px 0 10px; }
  .klf-wiz__top { margin: 0 0 .5rem; }
  .klf-q--shape .klf-say { margin: 0 0 10px; padding: 8px 12px; }
  .klf-opt--shape { padding-top: 10px; padding-bottom: 10px; min-height: 88px; }
  .klf-opt--shape svg { width: 56px; height: 40px; }
}
/* round 22: phone search shows the matches right under the box */
@media (max-width: 749px) { .kle-order.klf-searching .kle-tabs, .kle-order.klf-searching .kle-table-tools, .kle-order.klf-searching .kle-table td.kle-c-opts { display: none; } }
/* round 22: a long "Use my pick · Next: …" label wraps instead of clipping both ends on small phones */
@media (max-width: 419px) { .klf-nav [data-kle-next] { white-space: normal; text-overflow: clip; line-height: 1.2; text-align: center; padding-top: 6px; padding-bottom: 6px; } }

/* ===== round 23: resume line, quote button, phone review hero, the printable quote ===== */
.klf-resume { display: none; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 8px; font-size: 16px; color: var(--kle-ink, #222); }
.klf-rs-on .klf-resume { display: flex; }
.klf-resume__b { min-height: 44px; min-width: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; cursor: pointer; }
.klf-resume__b:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
.klf-resume > span:first-child { margin-right: 4px; }
@media (max-width: 749px) {
  .klf-resume { padding: 4px 0 4px 12px; border-left: 3px solid var(--klf-ok, #2e7d4f); }
  .klf-resume > span:first-child { flex: 0 0 100%; margin: 0; }
  .klf-resume__b:first-of-type { padding-left: 0; }
}
.klf-qbtn { width: 100%; min-height: 48px; margin: 12px 0 0; font-size: 16px; }
.klf-qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 12px; }
.klf-qbar .klf-qbtn { width: auto; margin: 0; padding: 0 18px; }
.klf-qhide { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; cursor: pointer; }
.klf-qhide input { width: 22px; height: 22px; margin: 0; accent-color: var(--klf-ok); }
.klf-sum__pv, .klf-sum__meta, .klf-sum__why { display: none; }
@media (max-width: 749px) {
  .klf-sum--hero { padding: 0 0 18px; background: #fff; border-radius: 0; }
  .klf-sum--hero .klf-sum__ls { display: none; }
  .klf-sum__pv { display: block; position: relative; width: calc(100% + 16px); margin: 0 -8px 16px; padding: 6px 4px 30px; border: 0; border-radius: 14px; background: #f6f1e8; cursor: zoom-in; }
  .klf-sum__pv svg { display: block; width: 100%; height: auto; max-height: 300px; }
  .klf-sum__zoom { position: absolute; right: 8px; bottom: 3px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 16px; color: #555; }
  .kle .klf-sum--hero h3, .klf-sum--hero h3 { margin: 0 0 2px; font-size: 22px; line-height: 1.25; }
  .klf-sum__meta { display: block; margin: 0 0 14px; font-size: 16px; color: #5c5650; }
  .klf-sum__why { display: block; margin: 0 0 16px !important; }
  .klf-sum__why li { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 6px 0; font-size: 16px; line-height: 1.45; }
  .klf-sum__why li span { color: var(--klf-ok); font-weight: 700; }
  .klf-sum--hero .klf-sum__t { align-items: baseline; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--kle-line, #e4e0da); font-size: 16px; }
  .klf-sum--hero .klf-sum__t strong { font-size: 28px; letter-spacing: -.01em; }
}
.klf-print { display: none; }
@media print {
  @page { size: Letter; margin: .5in; }
  html, body { background: #fff !important; }
  body > :not(.klf-print) { display: none !important; }
  body > .klf-print { display: block !important; }
  .klf-print { color: #1d1b19; font: 10.5pt/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .klf-print .qp-h { display: flex; justify-content: space-between; align-items: center; padding: 0 0 10pt; border-bottom: 2pt solid #1d1b19; }
  .klf-print .qp-logo { height: 30pt; width: auto; font-size: 16pt; }
  .klf-print .qp-hr { display: flex; flex-direction: column; align-items: flex-end; gap: 1pt; font-size: 10pt; color: #555; }
  .klf-print .qp-hr strong { font-size: 16pt; color: #1d1b19; }
  .klf-print .qp-meta { display: flex; flex-wrap: wrap; gap: 6pt 24pt; margin: 12pt 0; }
  .klf-print .qp-meta dt { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #777; }
  .klf-print .qp-meta dd { margin: 0; font-weight: 600; }
  .klf-print .qp-dw { margin: 0 0 12pt; padding: 8pt; border: 1pt solid #e4e0da; border-radius: 6pt; background: #faf7f2; break-inside: avoid; }
  .klf-print .qp-dw svg { display: block; width: 100%; height: auto; max-height: 3.4in; }
  .klf-print .qp-dw figcaption { margin: 4pt 0 0; font-size: 8.5pt; color: #666; }
  .klf-print .qp-h2 { margin: 12pt 0 4pt; font-size: 12pt; break-after: avoid; }
  .klf-print .qp-t { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .klf-print .qp-t th, .klf-print .qp-t td { padding: 3pt 4pt; border-bottom: .5pt solid #e4e0da; text-align: left; vertical-align: top; }
  .klf-print .qp-t thead th { border-bottom: 1pt solid #1d1b19; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; color: #555; }
  .klf-print .qp-t tr { break-inside: avoid; }
  .klf-print .qp-g th { padding-top: 8pt; font-size: 10pt; border-bottom: 0; }
  .klf-print .qp-c { white-space: nowrap; font-weight: 600; }
  .klf-print .qp-n { text-align: right !important; white-space: nowrap; }
  .klf-print .qp-s td { color: #555; font-style: italic; }
  .klf-print .qp-t tfoot th, .klf-print .qp-t tfoot td { padding-top: 6pt; border-top: 1.5pt solid #1d1b19; border-bottom: 0; font-size: 12pt; font-weight: 700; }
  .klf-print .qp-t tfoot th { text-align: right; }
  .klf-print ul { margin: 0; padding: 0 0 0 14pt; }
  .klf-print li { margin: 0 0 2pt; }
  .klf-print .qp-trim, .klf-print .qp-scope { break-inside: avoid; }
  .klf-print .qp-miss { color: #8a4b00; }
  .klf-print .qp-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24pt; }
  .klf-print .qp-note { margin: 6pt 0 0; font-size: 9pt; color: #555; }
  .klf-print .qp-f { margin: 14pt 0 0; padding: 6pt 0 0; border-top: .5pt solid #ccc; font-size: 9pt; color: #555; display: flex; justify-content: space-between; }
  .klf-print .qp-f p { margin: 0; }
  .klf-print--np .qp-pr { display: none !important; }
  .klf-print .qp-t tfoot { display: table-row-group; }
  .klf-print .qp-dw svg { max-height: 2.9in; }
  .klf-print .qp-t th, .klf-print .qp-t td { padding: 2.5pt 4pt; }
  .klf-print .qp-scope ul { columns: 1; }
  html, body { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .klf-print > :last-child { margin-bottom: 0 !important; }
  html::before, html::after, body::before, body::after { content: none !important; display: none !important; }
  .klf-print .qp-dw svg { max-height: 2.6in; }
}
/* ===== round 24: returning visits open on the app layout without a jump ===== */
/* the "Step 4 of 7 · Countertop" line is written by script; keep its 33px until it arrives */
html.klf-pa .kle .kle-steps:not(:has(.klf-stepnow))::before { content: ""; display: block; height: 33px; }
/* build path: the paste box moves to the top of the cabinet list on boot; the list waits for it so the tabs do not drop 280px */
html.klf-pa .kle[data-path="build"]:has([data-kle-quick-text]) [data-kle-pane="cabinets"] .kle-order:not(:has(.klf-qbox)) > :not(.kle-order__head) { visibility: hidden; }

/* round 24: a returning visitor's saved plan is restored a moment after first paint; keep the side panel's list and totals hidden (not moved) until it lands, so nothing jumps */
html.klf-plw .kle-plan__inner > :not(.kle-plan__top):not(.klf-pv) { visibility: hidden; }
/* R24: review-entry CLS (?kw= links) — keep the build-mode cards out of the shift until both reviews have rendered; 3s safety net in the pre-paint script */
html.klf-rvw .kle [data-kle-pane="review"]:has(> [data-kle-review]:empty) > .kle-review__mode,
html.klf-rvw .kle [data-kle-pane="review"]:has(> [data-klf-review]:empty) > .kle-review__mode { visibility: hidden; }
/* round 26: stock choice before add-to-cart (no partial carts) */
.klf-choice { margin: 0 0 16px; padding: 14px 16px; border: 2px solid #9a5b00; border-radius: 10px; background: #fff8ec; font-size: 16px; scroll-margin-top: 90px; }
.klf-choice .klf-h3 { margin: 0 0 4px; }
.klf-choice__row { padding: 12px 0 0; margin-top: 12px; border-top: 1px solid #ecd9b8; }
.klf-choice__msg { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.klf-choice__opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.klf-choice__opts .kle-btn { min-height: 44px; font-size: 16px; }
.klf-choice__opts .klf-notify { flex-basis: 100%; }
.klf-choice__nf { min-height: 44px; font-size: 16px; padding: 0; text-decoration: underline; background: none; border: 0; }
.klf-choice__alt { display: flex; gap: 10px; align-items: center; flex-basis: 100%; font-size: 16px; }
.klf-choice__alt img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 8px; flex: none; }
.klf-choice__ok { margin: 0; font-size: 16px; }
.klf-need { position: absolute; left: 0; right: 0; bottom: 100%; min-height: 44px; margin: 0; padding: 8px 16px; border: 0; border-top: 2px solid #9a5b00; background: #fff8ec; color: #5c3600; font: inherit; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; }

/* ===== round 27: plan to scale, island step, one clear Next, desktop sticky plan, switch to cabinet list ===== */
.klf-wiz .klf-back { width: auto; min-width: 44px; padding: 0 14px 0 10px; border-radius: 22px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.klf-wiz .klf-back > span { font-size: 22px; line-height: 1; }
.klf-qnav { margin: 16px 0 4px; }
.klf-qgo { width: 100%; min-height: 52px; font-size: 18px; }
@media (min-width: 640px) { .klf-qgo { width: auto; min-width: 260px; } }
.klf-need { margin: 8px 0 0; font-size: 16px; color: #8a4b0f; min-height: 0; }
.klf-need:empty { display: none; }
.klf-opts--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.klf-opt--big { min-height: 120px; justify-content: center; padding: 16px 18px; }
.klf-opt--big strong { font-size: 22px; }
.klf-opt--big span { font-size: 16px; color: #5d574e; }
.klf-isl-len { margin-top: 16px; }
.klf-isl-len__n { margin: 6px 0 0; font-size: 16px; }
.klf-q.is-in { animation: klf-qin .28s ease-out both; }
@keyframes klf-qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .klf-q.is-in { animation: none; } }
/* plan text: sized after render so it reads ~16px on any screen (see svgFit) */
.klf-svg { --u: 1; }
.klf-svg .klf-svg__dim { font-size: calc(var(--u) * 13px); }
.klf-svg .klf-svg__l { font-size: calc(var(--u) * 12px); }
.klf-svg .klf-svg__l--isl { font-size: calc(var(--u) * 14px); font-weight: 600; }
.klf-svg__walk { stroke: #8f877b; stroke-width: calc(var(--u) * 1px); stroke-dasharray: calc(var(--u) * 3px) calc(var(--u) * 3px); fill: none; }
.klf-svg .klf-svg__walk-l { font-size: calc(var(--u) * 16px); fill: #6b645a; font-weight: 500; letter-spacing: .01em; }
.klf-svg .klf-svg__walk-l--tight, .klf-svg .klf-svg__tight { fill: #a0521a; }
.klf-svg .klf-svg__tight { font-size: calc(var(--u) * 14px); font-weight: 600; }
.klf-svg [data-klf-nofit] { display: none; }
/* quiet switch to the cabinet-list path, on every guided step */
.klf-sw { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--kle-line, #e6e1d8); }
.klf-sw__b { min-height: 44px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 16px; color: #5d574e; cursor: pointer; text-align: left; }
.klf-sw__b span { color: var(--kle-ink, #1d1d1d); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.klf-sw--back { margin: 0 0 12px; padding: 0; border: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.klf-sw--back .klf-sw__b { font-weight: 600; color: var(--kle-ink, #1d1d1d); padding: 8px 14px 8px 10px; border: 1px solid var(--kle-line, #e6e1d8); border-radius: 22px; background: #fff; }
.klf-sw--back small { font-size: 16px; color: #5d574e; }
.klf-sw--back[hidden] { display: none; }
/* desktop: the plan sits in a sticky column right of the choices */
@media (min-width: 1024px) {
  .klf-q--shape, .klf-q--island, .klf-q--walls { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .klf-q--shape > *, .klf-q--island > *, .klf-q--walls > * { grid-column: 1; min-width: 0; }
  .klf-q--shape > .klf-outline, .klf-q--island > .klf-outline, .klf-q--walls > .klf-outline { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: var(--klf-stick, 120px); margin: 0; width: 100%; max-height: 380px; aspect-ratio: 4 / 3; background: #faf8f4; border-radius: 12px; padding: 8px; box-sizing: border-box; align-self: start; }
  .klf-q--shape .klf-opts--4 { grid-template-columns: repeat(2, 1fr); }
  .klf-q--shape .klf-opt--shape { min-height: 92px; }
}
@media (min-width: 1024px) {
  .klf-q--walls .klf-wall { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; }
  .klf-q--walls .klf-wall__r { flex: 1 1 120px; }
}
@media (min-width: 1024px) { .klf-q--walls .klf-wall__in input { width: 52px; } .klf-q--walls .klf-wall .klf-mk__add, .klf-q--walls .klf-wall > p { margin: 0; } }
.klf-svg .klf-svg__walk-l--c { paint-order: stroke; stroke: #f7f4ef; stroke-width: calc(var(--u) * 5px); stroke-linejoin: round; }
/* ===== round 28: four ways to start, upload, measure request, install radius ===== */
@media (min-width: 700px) { .klf-ways { grid-template-columns: 1fr 1fr; } }
.klf-way { min-height: 76px; }
.klf-way strong { line-height: 1.25; }
.klf-side { min-height: 420px; max-width: 720px; }
.klf-side h3 { font-size: 22px; margin: 12px 0 6px; }
.klf-side .klf-muted, .klf-side .klf-lead, .klf-side p { font-size: 16px; }
.klf-side .klf-back { flex: 0 0 auto; white-space: nowrap; height: 44px; width: auto; min-width: 44px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 22px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.klf-side .klf-back > span { font-size: 22px; line-height: 1; }
.klf-side .klf-cta, .klf-side .kle-btn { min-height: 44px; font-size: 16px; }
.klf-side .kle-btn--link { min-height: 44px; padding: 0 6px; }
.klf-side__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.klf-up__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; cursor: pointer; }
@media (pointer: fine) and (min-width: 1024px) { .klf-up__cam { display: none; } .klf-side__pick { grid-template-columns: minmax(0, 320px); } }
.klf-up__list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid #e6e1d9; }
.klf-up__list li { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid #e6e1d9; font-size: 16px; }
.klf-up__n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klf-up__list small { color: #6b645a; font-size: 16px; flex: 0 0 auto; }
.klf-up__ok { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: #eef5ee; border: 1px solid #b9d6bb; }
.klf-up__ok p { margin: 0 0 6px; }
.klf-up__est { margin: 16px 0; padding: 14px 16px; border-radius: 12px; border: 2px solid #d9d4cc; background: #fff; }
.klf-up__est p { margin: 0 0 8px; }
.klf-side__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.klf-fld { display: block; margin: 14px 0; border: 0; padding: 0; }
.klf-fld > span, .klf-fld legend { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; padding: 0; }
.klf-fld input, .klf-fld textarea { width: 100%; max-width: 420px; min-height: 48px; padding: 10px 12px; border: 2px solid #d9d4cc; border-radius: 10px; font: inherit; font-size: 16px; background: #fff; box-sizing: border-box; }
.klf-fld input[data-klf-mreq-zip] { max-width: 180px; }
.klf-fld input:focus, .klf-fld textarea:focus { outline: 3px solid #b07a3c; outline-offset: 1px; }
.klf-opts--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.klf-opt--day { min-height: 56px; align-items: center; justify-content: center; text-align: center; }
.klf-opt--day[aria-pressed="true"] { border-color: #1f1d1a; background: #1f1d1a; color: #fff; }
.klf-mreq__area { min-height: 1.4em; margin: 4px 0 0; }
.klf-side .klf-need:not(:empty) { position: static; margin: 10px 0 0; color: #8a4b0f; font-weight: 600; }
/* the engine's own area messages are replaced by the radius line inside the flow's install box */
[data-klf-install] [data-kle-geo-msg], [data-klf-install] [data-kle-zip-status] { display: none !important; }
.klf-inst__no { margin: 6px 0 0; font-size: 16px; color: #6b645a; }
.klf-inst__yes { margin: 6px 0 8px; font-size: 16px; color: #2f6b34; }
.klf-inst--out { padding-top: 4px; }
/* round 28: island with a sink or dishwasher */
.klf-q__sub { font-size: 18px; margin: 18px 0 8px; }
.klf-opts--islp { max-width: 520px; }
.klf-igap { margin-top: 14px; }
.klf-igap__in { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.klf-igap__in input { max-width: 120px; }
.klf-igap p { font-size: 16px; margin: 6px 0 0; }
/* round 28: designer tip (calm, one at a time, new builds only) */
.klf-dtip { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #eef3f1; border-left: 3px solid #5f7f74; }
.klf-dtip p { margin: 0; font-size: 16px; line-height: 1.45; color: #2a2b2a; }
.klf-dtip strong { display: block; font-size: 16px; letter-spacing: .02em; color: #3f5f55; margin-bottom: 2px; }
.klf-q__proj { margin-top: 0; }
.klf-opts--proj { max-width: 560px; margin-bottom: 14px; }
.klf-opts--proj .klf-opt strong, .klf-opts--islp .klf-opt strong { font-size: 16px; }
/* round 28: keep the new-build question compact so the step's Next stays where it was */
.klf-q__proj { font-size: 16px; margin: 0 0 6px; }
.klf-opts--proj { margin-bottom: 10px; gap: 8px; }
.klf-opts--proj .klf-opt--day { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }

/* ---- round 29: self-serve measure booking ---- */
.klf-mreq__off { margin: 10px 0 4px; padding: 10px 14px; border-left: 4px solid #9a5b00; background: #fff8ec; color: #5c3600; font-size: 16px; border-radius: 6px; }
.klf-mreq__step { margin: 18px 0; }
.klf-mreq__step legend small, .klf-fld > span small { font-weight: 400; color: #5f5a52; }
.klf-mreq__area.is-ok { color: #1d6b3a; font-weight: 600; }
.klf-mreq__area.is-no { color: #8a4b0f; font-weight: 600; }
.klf-mdays { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.klf-mday { min-height: 60px; min-width: 44px; padding: 6px 2px; border: 2px solid #d9d4cc; border-radius: 10px; background: #fff; color: #1f1d1a; font: inherit; font-size: 16px; line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.klf-mday span { font-size: 14px; color: #5f5a52; }
.klf-mday strong { font-size: 16px; white-space: nowrap; }
.klf-mday small { font-size: 14px; }
.klf-mday[aria-pressed="true"] { border-color: #1f1d1a; background: #1f1d1a; color: #fff; }
.klf-mday[aria-pressed="true"] span { color: #e9e4dc; }
.klf-mday:disabled, .klf-mwin:disabled { opacity: .45; cursor: not-allowed; background: #f3f1ed; }
.klf-mday:focus-visible, .klf-mwin:focus-visible, .klf-chk input:focus-visible { outline: 3px solid #b07a3c; outline-offset: 2px; }
.klf-mwins { max-width: 560px; }
.klf-mwin { min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.klf-mwin span { font-size: 16px; }
.klf-mwin small { font-size: 14px; color: #8a4b0f; font-weight: 600; }
.klf-mwin[aria-pressed="true"] { border-color: #1f1d1a; background: #1f1d1a; color: #fff; }
.klf-mwin[aria-pressed="true"] small { color: #ffd9a0; }
.klf-mwin__pick { margin: 0; }
.klf-mreq__who .klf-fld { margin: 10px 0; }
.klf-chk { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; font-size: 16px; max-width: 560px; cursor: pointer; min-height: 44px; }
.klf-chk input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: #1f1d1a; }
.klf-chk small { display: block; color: #5f5a52; font-size: 14px; margin-top: 2px; }
.klf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.klf-mdone { padding: 8px 0 4px; }
.klf-mdone__tick { width: 48px; height: 48px; margin: 0 0 8px; border-radius: 50%; background: #1d6b3a; color: #fff; font-size: 28px; line-height: 48px; text-align: center; }
.klf-mdone h3 { margin: 0 0 6px; }
.klf-mdone__next { margin: 14px 0; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.klf-mdone .klf-cta { margin-top: 8px; }
@media (max-width: 380px) { .klf-mdays { gap: 6px; } .klf-mday strong { font-size: 16px; } }
/* ================= round 30 (Rahul): a natural, guided flow ================= */
/* clear selected state: accent border, tint, check badge. Works for every choice card (aria-checked). */
.klf-opt { position: relative; transition: border-color .15s ease, background-color .15s ease; }
.klf-opt[aria-checked="true"], .klf-opt--day[aria-checked="true"] { border-color: var(--kle-accent, #2f5d50); background: #eef5f1; box-shadow: inset 0 0 0 1px var(--kle-accent, #2f5d50); color: inherit; }
.klf-opt[aria-checked="true"] strong, .klf-opt[aria-checked="true"] > span:not(.klf-pick) { color: inherit; }
.klf-opt[aria-checked="true"]::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--kle-accent, #2f5d50); color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; }
.klf-opt[aria-checked="true"] { padding-right: 40px; }
.klf-opt--shape[aria-checked="true"] { padding-right: 14px; }
.klf-opt .klf-pick, .klf-pick { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #fff3d6; color: #6b4a00; font-size: 16px; font-weight: 700; min-height: 0; }
.klf-pick__why { margin: 8px 0 0; font-size: 16px; }
/* the step bar: every reached step is a button, including step 1 */
.klf-wiz__top { flex-wrap: wrap; row-gap: 8px; }
.klf-wiz__top .klf-prog { order: 3; flex: 1 1 100%; }
.klf-sbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.klf-sbar li { margin: 0; }
.klf-sbar__b { width: 100%; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; border: 0; border-bottom: 4px solid #e3ddd2; background: transparent; color: var(--kle-muted, #666); font: inherit; font-size: 16px; cursor: pointer; border-radius: 6px 6px 0 0; }
.klf-sbar__b:disabled { cursor: default; opacity: .7; }
.klf-sbar__b.is-done { color: var(--kle-ink, #1d1d1d); border-bottom-color: var(--kle-accent, #2f5d50); }
.klf-sbar__b.is-done:hover { background: #eef5f1; }
.klf-sbar__b.is-on { color: var(--kle-ink, #1d1d1d); font-weight: 700; border-bottom-color: var(--kle-ink, #1d1d1d); }
.klf-sbar__n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: #e3ddd2; color: #333; line-height: 1; }
.klf-sbar__b.is-done .klf-sbar__n { background: var(--kle-accent, #2f5d50); color: #fff; }
.klf-sbar__b.is-on .klf-sbar__n { background: var(--kle-ink, #1d1d1d); color: #fff; }
.klf-sbar__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.klf-sbar__b:focus-visible { outline: 3px solid var(--kle-accent, #2f5d50); outline-offset: 2px; }
/* Back sits next to Next under every question */
.klf-qnav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.klf-qnav .klf-need { flex: 1 1 100%; }
.klf-qback { min-height: 52px; min-width: 96px; font-size: 18px; flex: 0 0 auto; }
.klf-qnav .klf-qgo { flex: 1 1 auto; width: auto; }
@media (min-width: 640px) { .klf-qnav .klf-qgo { flex: 0 0 auto; } }
/* guided number: prefilled value, big − / +, unit, why, limits */
.klf-isl-size { margin-top: 14px; }
.klf-ns { margin: 12px 0 0; padding: 12px; border: 1px solid var(--kle-line); border-radius: var(--klf-r, 12px); background: #fff; }
.klf-ns__l { display: block; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.klf-ns__row { display: flex; align-items: center; gap: 10px; }
.klf-ns__b { flex: 0 0 52px; width: 52px; height: 52px; border: 2px solid var(--kle-ink, #1d1d1d); border-radius: 50%; background: #fff; color: inherit; font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; }
.klf-ns__b:active { background: #eef5f1; }
.klf-ns__f { display: inline-flex; align-items: center; gap: 6px; }
.klf-ns__f input { width: 84px; min-height: 52px; font-size: 22px; font-weight: 700; text-align: center; border: 1px solid var(--kle-line); border-radius: 10px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.klf-ns__f input::-webkit-outer-spin-button, .klf-ns__f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.klf-ns__f input[aria-invalid="true"] { border-color: #b3261e; }
.klf-ns__u { font-size: 16px; font-weight: 600; }
.klf-ns__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.klf-ns__c { min-height: 44px; padding: 0 14px; border: 1px solid var(--kle-line); border-radius: 22px; background: #fff; font: inherit; font-size: 16px; cursor: pointer; color: inherit; }
.klf-ns__c[aria-pressed="true"] { border-color: var(--kle-accent, #2f5d50); background: #eef5f1; font-weight: 700; }
.klf-ns__h { margin: 8px 0 0; font-size: 16px; }
.klf-ns__m { margin: 4px 0 0; font-size: 16px; color: #b3261e; min-height: 0; }
.klf-ns__m:empty { display: none; }
.klf-ns__lim { margin: 4px 0 0; font-size: 16px; color: var(--kle-muted, #666); }
.klf-igap .klf-ns { margin-top: 12px; }
.klf-wiz .klf-q { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .klf-opt { transition: none; } }
/* round 30: add-to-cart note (phone), above the bottom bar */
.klf-added{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;background:#fff;border:2px solid #2f6b4f;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:14px 16px;font-size:16px;transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;max-width:520px;margin:0 auto}
.klf-added.is-open{transform:none;opacity:1;pointer-events:auto}
.klf-added__h{margin:0 0 4px;font-weight:700;font-size:18px}.klf-added__h span{color:#2f6b4f}
.klf-added__s{margin:0 0 10px;font-size:16px}
.klf-added__b{display:flex;gap:12px;align-items:center}.klf-added__b .kle-btn{min-height:44px;font-size:16px}
@media (prefers-reduced-motion:reduce){.klf-added{transition:none}}
/* round 30: welcome back */
.klf-wb{border:2px solid #2f6b4f;background:#eef5f1;border-radius:14px;padding:16px 18px;margin:0 0 16px;font-size:16px}
.klf-wb__h{margin:0 0 6px;font-size:22px}
.klf-wb__p{margin:0 0 12px;font-size:16px;line-height:1.45}
.klf-wb__b{display:flex;flex-wrap:wrap;gap:10px}.klf-wb__b .kle-btn{min-height:48px;font-size:16px}
@media (max-width:480px){.klf-wb__b .kle-btn{flex:1 1 100%}}

/* ===== round 30 b: builder mode, dimension lines, fit fix, pane ends, drawing reader ===== */
/* builder mode (this template only): on phones the site header scrolls away instead of sticking, so the step bar gets the screen */
@media (max-width: 749px) { body:has(.kle[data-klf]) #a7h, body:has(.kle[data-klf]) .a7h { position: relative !important; top: auto !important; } }
.klf-nav__tot { min-width: 0; } .klf-nav__tot strong { min-width: 0; white-space: nowrap; }
@media (max-width: 749px) { .klf-nav { gap: 8px; } .klf-nav .kle-btn { min-height: 44px; font-size: 16px; white-space: nowrap; } }
.kle .kle-more__cards { align-items: start; }
.klf-svg .klf-svg__walk-l { paint-order: stroke; stroke: #f7f4ef; stroke-width: calc(var(--u) * 5px); stroke-linejoin: round; }
.klf-svg__dl { stroke: #3d3a35; stroke-width: calc(var(--u) * 1.2px); fill: none; }
.klf-svg .klf-svg__dd { font-size: calc(var(--u) * 15px); font-weight: 600; fill: #2c2925; paint-order: stroke; stroke: #f7f4ef; stroke-width: calc(var(--u) * 6px); stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.klf-fpd[hidden] { display: none; }
.klf-fpd .klf-quote__plan { aspect-ratio: 4 / 3; max-height: none; background: #f7f5f0; border-radius: 12px; overflow: hidden; }
@media (max-width: 749px) { .klf-fpd .klf-quote__plan { aspect-ratio: 1 / 1; } }
.klf-fpd__note { margin: 8px 0 0; font-size: 16px; color: #5c564d; }
.klf-fit__fix { margin-top: 8px; min-height: 44px; }
.klf-fitok { margin: 8px 0 0; font-size: 16px; color: #2f6b3a; }
.klf-pend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid #e6e1d8; }
.klf-pend .kle-btn { min-height: 48px; font-size: 16px; }
.klf-pend [data-klf-pend-go="next"] { margin-left: auto; }
@media (max-width: 749px) { .klf-pend .kle-btn { flex: 1 1 100%; } .klf-pend [data-klf-pend-go="next"] { order: -1; } }
.klf-rp { margin-top: 12px; } .klf-rp__list { list-style: none; padding: 0; margin: 12px 0; border: 1px solid #e6e1d8; border-radius: 12px; }
.klf-rp__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 14px; font-size: 16px; border-bottom: 1px solid #eee9e0; } .klf-rp__list li:last-child { border-bottom: 0; }
.klf-rp__list small { font-weight: 400; color: #6d665c; } .klf-rp__miss { font-style: normal; font-weight: 500; color: #a0521a; }
.klf-rp__cta { display: flex; flex-wrap: wrap; gap: 12px; } .klf-rp__cta .kle-btn { min-height: 48px; font-size: 16px; }
.klf-rp.is-reading { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; background: #f7f5f0; font-size: 16px; }
.klf-rp__spin { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid #d9d2c6; border-top-color: #3d3a35; animation: klf-spin .8s linear infinite; }
@keyframes klf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .klf-rp__spin { animation-duration: 2.4s; } }

/* round 30 patch3: drawing review rows. Label left, value right; the drawing's own text sits under the value */
.klf-rp__list li { flex-wrap: nowrap; align-items: flex-start; }
.klf-rp__list li > span { flex: 1 1 auto; min-width: 0; color: #4d4840; }
.klf-rp__list li > strong { flex: 0 0 auto; max-width: 60%; text-align: right; }
.klf-rp__list li > strong small { display: block; margin-top: 2px; font-size: 16px; }
.klf-fpd .klf-svg .klf-svg__dd { font-size: calc(var(--u) * 18px); }
.klf-fpd .klf-svg .klf-svg__walk-l { font-size: calc(var(--u) * 17px); }
.klf-fromdraw { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #eef5f1; border-left: 3px solid #2f6b4f; font-size: 16px; line-height: 1.45; color: #23302a; }
.klf-mreq__alt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--kle-line, #e4ded3); }
.klf-mreq__alt p { margin: 0 0 8px; font-size: 16px; }
.klf-mreq__est { min-height: 44px; font-size: 16px; }
.klf-ns__m, .klf-ns__h { max-width: none; text-wrap: pretty; }
.klf-pick { white-space: nowrap; }
.klf-opts--isl .klf-opt--big { justify-content: flex-start; padding-left: 16px; padding-right: 14px; }
.klf-opts--isl .klf-opt--big strong { padding-right: 28px; }
.klf-opts--isl .klf-opt--big span { max-width: none; }
.klf-ceil__other > span { flex: 1 1 100%; font-weight: 600; }
.klf-ceil__other input { flex: 0 1 160px; width: auto; min-height: 48px; padding: 0 12px; border: 2px solid var(--kle-line, #d9d2c5); border-radius: 10px; background: #fff; outline: none; box-shadow: none; }
.klf-ceil__other input:focus-visible { border-color: #2c2925; outline: 3px solid rgba(47, 107, 79, .35); outline-offset: 1px; }
.klf-ceil__other .kle-btn { min-height: 48px; }
@media (max-width: 420px) { .klf-sbar { gap: 2px; } .klf-sbar__b { padding-left: 0; padding-right: 0; } .klf-sbar__b.is-on .klf-sbar__t { letter-spacing: -.02em; } }
@media (min-width: 750px) { .klf-delta { left: 100%; top: 50%; transform: translate(10px, -50%); background: #e8f3ec; color: #1f5c3d; } }
.klf-withinst { margin-top: 4px; font-size: 16px; color: #23302a; }

/* ===== round 31: click-through fixes ===== */
.klf-nav__tot { flex-wrap: wrap; row-gap: 0; align-content: center; padding-block: 2px; }
.klf-nav__sub { flex: 0 0 100%; font-size: 14px; line-height: 18px; font-weight: 400; color: var(--kle-muted, #6d665c); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klf-nav__sub:empty { display: none; }
.klf-nav__sub.is-d { color: #1f5c3d; font-weight: 600; }
.klf-nav__tot strong { line-height: 24px; }
.klf-delta { display: none !important; }
.klf-quote__inc { margin: 4px 0 12px; font-size: 16px; line-height: 24px; color: var(--kle-muted, #6d665c); }
.klf-park { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fff7e8; border: 1px solid #ecd9b4; font-size: 16px; line-height: 24px; }
.klf-park p { margin: 0 0 8px; }
.klf-park__b { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.klf-plan-ex { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--kle-muted, #6d665c); }
.klf-fit__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.klf-switch--inst.is-na { opacity: .6; cursor: default; }
.klf-inst__why { margin: 8px 0; font-size: 14px; line-height: 20px; }
.klf-nav .klf-nav__tot { flex: 0 1 auto; min-width: 0; }
.klf-nav__sub { flex: 1 0 100%; min-width: 0; max-width: 100%; }
.klf-nav .klf-nav__tot { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; }
.klf-nav .klf-nav__sub { flex: 0 0 auto; }
.klf-nav .kle-btn--primary, .klf-nav [data-kle-next] { flex: 1 1 auto !important; min-width: 96px !important; white-space: normal !important; line-height: 20px; text-wrap: balance; }
@media (max-width: 599px) { .klf-nav__sub { font-size: 14px; line-height: 16px; } .klf-nav .kle-btn--ghost { padding-inline: 14px; } }
.klf-pv__t { font-size: var(--pvf, 3px); }
.klf-pv--nolab .klf-pv__t, .klf-pv--nolab .klf-pv__dim { display: none; }
.klf-pv-dlg__stage.is-pan { overflow-x: auto; overflow-y: hidden; aspect-ratio: auto; -webkit-overflow-scrolling: touch; }
.klf-pv-dlg__stage.is-pan svg { height: auto; }
.klf-rec__cu { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; }
.klf-rec__cu canvas { aspect-ratio: 4 / 3; height: auto; border-radius: 12px; background: #efe8dc; }
.klf-rec__cu figcaption { position: static; padding: 8px 0 0; background: none; font-size: 14px; line-height: 20px; color: var(--kle-muted, #6d665c); text-align: center; }
.klf-rec__chip--sw { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--kle-muted, #6d665c); }
.klf-rec__chip--sw img { width: 72px !important; height: 72px !important; max-width: none; flex: 0 0 72px !important; object-fit: cover; border-radius: 8px; border: 1px solid #d8d0c2; background: #f3eee5; }
.kle-app .kle-steps .kle-step.is-skip::before { background: repeating-linear-gradient(135deg, #c9bfae 0 4px, #ece6dc 4px 8px); }
.klf-stepskip { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--kle-muted, #6d665c); display: flex; align-items: center; gap: 8px; }
.klf-stepskip[hidden] { display: none; }
.klf-stepskip__k { flex: 0 0 24px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(135deg, #c9bfae 0 4px, #ece6dc 4px 8px); }
/* r31: phone island step keeps the drawing next to the size controls */
@media (max-width: 749px) {
  .klf-q--island { display: flex; flex-direction: column; }
  .klf-q--island > * { order: 5; }
  .klf-q--island > h3, .klf-q--island > .klf-opts { order: 0; }
  .klf-q--island > .klf-pick__why { order: 1; }
  .klf-q--island > .klf-outline { order: 2; position: sticky; top: 0; z-index: 3; margin: 8px 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); max-height: 200px; }
}
/* r31: the wizard's "still needed" line sits right under Next (it was inheriting the review bar's absolute position) */
.klf-qnav .klf-need { position: static; order: 3; flex: 1 1 100%; padding: 10px 12px; border: 0; border-left: 4px solid #9a5b00; border-radius: 8px; background: #fff8ec; color: #5c3600; text-align: left; font-weight: 600; line-height: 1.4; }
.klf-qnav .klf-need:not(.is-on), .klf-qnav .klf-need:empty { display: none; }
/* round 31: appliance prices never break mid-number ("$2,931.0 / 0") */
.klf-rec__list li > strong{white-space:nowrap;flex:0 0 auto}
/* round 31: a white tile on a white chip looked blank. Show the whole tile photo on a grout-grey ground */
.klf-rec__chip--bs img{object-fit:contain !important;background:#9b9387 !important;padding:6px;box-sizing:border-box}

/* round 32: "Show me other options" wrapper used the wizard's 3-column .klf-opts grid, squeezing the cards into one column (d21/d22) */
.klf-more{display:block;margin-top:8px}
.klf-more[hidden]{display:none !important}
.klf-card .klf-cta{white-space:normal;word-break:normal;overflow-wrap:normal}

/* round 32: why the total moved on a wall/shape edit, and odd wall lengths */
.klf-wchg:empty{display:none}
.klf-wchg{margin:8px 0}
.klf-wchg p{margin:6px 0;padding:8px 12px;border-radius:8px;font-size:16px;line-height:1.4}
.klf-chg__d{background:#f4f8f5;border-left:3px solid #2f6f4f}
.klf-chg__odd{background:#fff8ec;border-left:3px solid #9a5b00}

/* round 32: contractor details tucked away on Review */
.klf-contr{margin-top:10px}
.klf-contr>summary{cursor:pointer;color:#1f4f38;text-decoration:underline;font-size:16px;min-height:44px;display:flex;align-items:center;width:max-content;max-width:100%}
.klf-contr[open]{padding:0 12px 10px;border:1px solid #ddd;border-radius:8px}
.klf-contr__l{margin:4px 0 8px;padding-left:20px;font-size:16px}
/* round 32: Start over in the step bar */
.kle-steps{position:relative}
.klf-sov{position:absolute;top:0;right:0;z-index:2}
.klf-sov[hidden]{display:none}
.klf-sov__b{background:none;border:0;padding:0 4px;min-height:32px;font-size:14px;color:#555;text-decoration:underline;cursor:pointer}
.klf-sov__b:hover{color:#111}
.klf-sov.is-ask{position:static;margin:6px 0 10px;padding:10px 12px;background:#fff8ec;border:1px solid #e3c48f;border-radius:8px}
.klf-sov__q{margin:0 0 8px;font-size:16px}
.klf-sov__acts{display:flex;flex-wrap:wrap;gap:8px}
.klf-sov__acts .kle-btn{min-height:44px}
.klf-zrow{display:flex;gap:8px;align-items:stretch;max-width:320px}
.klf-zrow input{flex:1;min-width:0}
.klf-zrow__b{min-height:44px;padding:0 18px}
/* round 32: fuel question on the appliance pick */
.klf-fuel { margin: .6rem 0 .2rem; padding: 10px 12px; border: 1px solid #e6c98a; background: #fff8ea; border-radius: 10px; }
.klf-fuel__h { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.klf-fuel__b { display: flex; flex-wrap: wrap; gap: 8px; }
.klf-fuel .klf-chip[aria-pressed="true"] { background: #1f1a14; color: #fff; border-color: #1f1a14; }
/* round 32: one "Start over" at a time: the welcome-back banner has its own */
body:has(.klf-wb:not([hidden])) .klf-sov:not(.is-ask) { display: none; }

/* round 33 (p27): empty install ZIP says so */
.klf-zip-err { margin: .4rem 0 0; color: #8a2a12; font-size: .95rem; font-weight: 600; }
[data-kle-zip][aria-invalid="true"] { border-color: #b4471f !important; box-shadow: 0 0 0 2px rgba(180,71,31,.18); }

/* round 33 (p31/p33): plain names on stock choices, tighter rows, filler warning */
.klf-choice__code { font-weight: 400; color: #6b5a44; white-space: nowrap; }
.klf-choice__opts .klf-notify { margin-top: -6px; }
.klf-choice__row > strong + .klf-choice__opts, .klf-choice__row > p + .klf-choice__opts { margin-top: 10px; }
.klf-choice__warn { flex-basis: 100%; margin: 0; padding: 8px 10px; border-radius: 8px; background: #fbeee0; color: #6a3410; font-size: 16px; line-height: 1.4; }
.klf-choice__opts .kle-btn { white-space: normal; text-align: left; line-height: 1.3; }

/* round 33 (p40-p42): booking-by-phone line sits quietly under the ZIP check */
.klf-mreq__how { margin: 8px 0 4px; font-size: 16px; }

/* round 33 (p39): no start option looks already chosen. The suggested one gets a dark border and a small label, not a solid black fill. */
.klf-way--main { border-color: #1f1d1a; background: #fff; color: inherit; position: relative; }
.klf-way--main span { color: #5c574f; }
.klf-way--main::after { content: "Most people start here"; position: absolute; top: -10px; right: 12px; padding: 1px 8px; border-radius: 999px; background: #f3ede3; color: #4a3d2c; font-size: 14px; font-weight: 600; }
.klf-way:hover { border-color: #1f1d1a; }
.klf-way:active { background: #f7f4ef; }

/* ===== round 34 (click-through #5) ===== */
/* 1. handles grid: the whole card is one button, so it must be in flow (it was absolute, and the cards collapsed to 2px) */
.kle[data-klf] .klf-card--hw .klf-card__hit { position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: inherit; cursor: pointer; }
.kle[data-klf] .klf-card--hw .klf-card__img { display: block; width: 100%; }
.kle[data-klf] .klf-card--hw .klf-card__b { display: flex; width: 100%; box-sizing: border-box; }
.kle[data-klf] .klf-card--hw .klf-card__hit:focus-visible { outline: 3px solid var(--klf-ok, #17603b); outline-offset: -3px; }
.kle[data-klf] .klf-grid--hw { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
@media (min-width: 600px) { .kle[data-klf] .klf-grid--hw { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kle[data-klf] .klf-grid--hw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* r34 item 6: early stock note */
.kle[data-klf] .klf-stockearly { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #c98a00; border-left-width: 4px; border-radius: 8px; background: #fff8e6; color: #3d2c00; font-size: 16px; line-height: 1.45; }
.kle[data-klf] .klf-stockearly ul { margin: 6px 0 8px 18px; padding: 0; }
.kle[data-klf] .klf-stockearly__h { margin: 0 0 4px; }
.kle[data-klf] .klf-stockearly .kle-btn { margin-top: 6px; }
/* r34 item 7: phone and tablet walls step: the drawing is full width, right under the wall sizes and above the tip and buttons */
@media (max-width: 1023px) {
  .kle[data-klf] .klf-q--walls { display: flex; flex-direction: column; }
  .kle[data-klf] .klf-q--walls > * { order: 5; }
  .kle[data-klf] .klf-q--walls > h3, .kle[data-klf] .klf-q--walls > .klf-muted:first-of-type { order: 0; }
  .kle[data-klf] .klf-q--walls > .klf-walls { order: 1; }
  .kle[data-klf] .klf-q--walls > [data-klf-fitlive] { order: 2; }
  .kle[data-klf] .klf-q--walls > .klf-outline { order: 3; width: 100%; max-width: none; max-height: none; aspect-ratio: auto; margin: 12px 0; padding: 6px; box-sizing: border-box; background: #faf8f4; border-radius: 12px; }
  .kle[data-klf] .klf-q--walls > .klf-outline svg { width: 100%; height: auto; max-height: 70vh; }
}

/* round 34 (polish): no bottom bar on the landing or the "Get your kitchen measured" card, so drop the space reserved for it */
.kle.is-empty:has(.klf-nav.is-off) .kle-layout { padding-bottom: 16px; }
/* round 34: the side cards (measure, upload) are short; don't stretch the builder to the screen height under them */
.kle.is-empty:has([data-klf-side]:not([hidden])) .kle-main { min-height: 0; }
/* round 34 (phones): 44px tap targets for Start over and the auto-fix Undo */
.klf-sov__b { min-height: 44px; }
[data-klf-undo], [data-klf-redo] { min-width: 44px; min-height: 44px; }
/* round 34 (phones): the before/after strip scales down with the screen, so its text is set larger there to stay 11px+ on screen */
@media (max-width: 419px) { .klf-ba__c { font-size: 14px; } .klf-ba__w { font-size: 13px; } .klf-ba__lab { font-size: 14px; } }
/* round 34 (phones): the "items need a choice" strip is a button, so it gets a 44px target */
.klf-need { min-height: 44px; }
/* round 34 (phones in landscape): on a short screen the pinned island drawing covered the choices and Next, so it scrolls with the page there */
@media (max-width: 749px) and (max-height: 520px) {
  .klf-q--island > .klf-outline { position: static; box-shadow: none; max-height: 180px; }
}
/* round 34 (phones): − / + steppers keep a 44px target on 360px screens instead of shrinking */
.kle[data-klf] .klf-step, .kle[data-klf] .klf-pl__b, .kle[data-klf] .klf-qty button { min-width: 44px; min-height: 44px; flex-shrink: 0; }
/* r34: the small handle preview is a thumbnail; its ceiling/opening labels would be 5px, so they hide there (the big preview keeps them) */
.klf-rec__pv--sm .klf-pv__t, .klf-rec__pv--sm .klf-pv__dim { display: none; }
/* r34 (130% text on 360px phones): chips wrap instead of pushing the page wider, and step labels break with a hyphen instead of "Sha…" */
@media (max-width: 749px) {
  .kle[data-klf] .klf-chip { white-space: normal; max-width: 100%; text-align: left; }
  .kle[data-klf] .klf-chip small { white-space: normal; }
}
@media (max-width: 420px) {
  .kle[data-klf] .klf-sbar__b { font-size: 14px; }
  .kle[data-klf] .klf-sbar__t { white-space: normal; text-overflow: clip; overflow: visible; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; line-height: 1.1; text-align: center; }
}
/* r34: tight bar (set by navTight in kitchen-flow.js only when Next can't fit) */
.kle[data-klf] .klf-nav [data-kle-next] { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.kle[data-klf] .klf-nav.klf-nav--tight [data-kle-prev] { font-size: 0; width: 48px; min-width: 48px; padding-inline: 0; flex: 0 0 48px; }
.kle[data-klf] .klf-nav.klf-nav--tight [data-kle-prev]::before { content: "‹"; font-size: 28px; line-height: 1; }
.kle[data-klf] .klf-nav.klf-nav--t1 .klf-nav__sub { display: none; }
.kle[data-klf] .klf-nav.klf-nav--t1 [data-kle-next] { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
body:has(.kle .klf-nav--t1) { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
/* round 35 (click-through #6, item 2): hinge picker and the note under Add plan to cart */
.klf-hingenote { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #6b4a00; }
.klf-nav .klf-hingenote { display: none; }
.kle[data-klf] .klf-hinge, .klf-hinge { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px; }
.klf-hinge__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.klf-hinge__opts { display: inline-flex; gap: 8px; }
.klf-hinge__opts label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid #bbb; border-radius: 22px; cursor: pointer; font-size: 16px; }
.klf-hinge__opts label:has(input:checked) { border-color: #111; background: #f3f3f3; font-weight: 600; }
.klf-hinge__opts small { font-weight: 400; color: #555; }
.kle[data-klf] .klf-gate-kept { border-color: #8a8a8a; background: #f6f6f6; color: #222; }
/* round 35: one Back (the sticky bar has it) */
.klf-back[data-klf-wback][hidden] { display: none; }
/* round 35 (F3): reload resumes straight into the plan */
.klf-resuming__p { margin: 24px 0; padding: 16px; border-radius: 12px; background: var(--kle-soft, #f6f4f0); font-weight: 600; text-align: center; }

/* round 35 (polish d07): an empty pick bar drew a grey strip above the handle tabs */
.klf-pickbar:empty{display:none!important}
.klf-pv__stage.is-top{aspect-ratio:4/3;background:#fff}
.klf-pv__stage.is-top svg{object-fit:contain}
/* round 36 (polish): a selected card is obvious at a glance: thick green ring, tinted body, and a "Selected" badge */
.kle[data-klf] .klf-card.is-on { border-color: var(--klf-ok); box-shadow: 0 0 0 3px var(--klf-ok); background: #f1f8f4; }
.kle[data-klf] .klf-card.is-on::after { content: "✓ Selected"; position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--klf-ok); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; pointer-events: none; }
/* round 36 (polish): handle summary reads "Polished Nickel  31 × $10.50", name on its own line */
.kle[data-klf] [data-klf-hwpick] .klf-pick > div > strong, .kle[data-klf] [data-klf-hwpick] .klf-pick > div > span { display: block; white-space: normal; }
.kle[data-klf] .klf-rec__cufb { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 8px; }
/* round 36 (polish, d67): Notify me form: the label has room above the input, and Cancel sits beside Send */
.kle[data-klf] .klf-notify form label { display: block; margin: 0 0 6px; }
.kle[data-klf] .klf-notify form input[type="email"] { margin-top: 2px; }
.kle[data-klf] .klf-notify__x { margin-left: 12px; min-height: 44px; }
/* round 36 (polish): Start over on the wizard's Plan screen sits under the step bar, not over it */
.klf-sov.klf-sov--wiz { position: static; display: block; margin: 4px 0 0; text-align: right; }
.klf-sov.klf-sov--wiz.is-ask { text-align: left; }
/* round 36 (polish, d67): no empty band where the folded in-card Next was */
.klf-qnav.klf-qnav--tuck { margin: 0; }
.klf-qnav.klf-qnav--tuck:not(:has(.klf-need.is-on)) { display: none; }

/* round 37 (polish, d12): Notify me form: label, field and buttons get room at every width */
.klf-notify form.klf-nform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.klf-notify form.klf-nform > *, .klf-notify form.klf-nform p { margin: 0; }
.klf-notify form.klf-nform label { flex: 0 0 100%; display: block; margin: 0 0 2px; line-height: 1.3; }
.klf-notify form.klf-nform input[type="email"] { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px; margin: 0; }
.klf-notify form.klf-nform button, .klf-notify form.klf-nform [type="submit"] { min-height: 44px; margin: 0; }
.klf-notify form.klf-nform .klf-notify__x { margin-left: 0; }
/* round 37 (polish, d04): one Back / Next per step. While the sticky bar is pinned (it shows whenever the builder is on screen), the pane-end copy steps aside */
.kle.klf-navpin .klf-pend { display: none; }
/* round 37 (polish, d07): View list: the quantity and price stay on one line; the name wraps instead */
.kle .kle-plan__items li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.kle .kle-plan__items li > span:nth-child(2) { white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* round 38 (polish): the sticky stepper reads as a header over the page, and jumps land below it (mode cards, choices) */
.kle[data-klf] nav.kle-steps { box-shadow: 0 8px 10px -8px rgba(0,0,0,.22); }
.kle[data-klf] .kle-review__mode, .kle[data-klf] .kle-mode, .kle[data-klf] .klf-choice, .kle[data-klf] .klf-stockearly { scroll-margin-top: calc(var(--kle-hdr, 120px) + 150px); }
/* round 38 (polish): "Start over" never wraps into a stray "Start" beside the step title */
.klf-sov__b { white-space: nowrap; }

/* round 39 (polish 7): the picked range / fridge width is plainly selected */
.klf-chip[aria-checked="true"] { background: var(--kle-ink, #1d1d1d); color: #fff; border-color: var(--kle-ink, #1d1d1d); }
.klf-chip[aria-checked="true"]::before { content: "\2713\00a0"; }
/* round 39 (polish 9): the sticky stepper and its "Skipped" note sit on a solid header with room below, so they never lie over the content */
.kle[data-klf] nav.kle-steps { background: #fff; padding-bottom: 8px; z-index: 20; }
.kle[data-klf] nav.kle-steps .klf-stepskip { background: #fff; margin: 4px 0 0; padding: 2px 0; }
.kle[data-klf] nav.kle-steps + * { margin-top: 12px; }
.kle[data-klf] .klf-rev h2, .kle[data-klf] .klf-rev h3, .kle[data-klf] .kle-review h2, .kle[data-klf] .kle-review h3 { scroll-margin-top: calc(var(--kle-hdr, 120px) + 150px); }

/* round 39 (4): cabinet codes in small print after the friendly name */
.klf-code{font-size:14px;font-weight:400;color:#6b6b6b;margin-left:4px;white-space:nowrap}

/* round 40 (M2): the full maker title in small print under the friendly name */
.klf-rev__row .klf-full{display:block;font-size:14px;line-height:1.35;font-weight:400;color:#6b6b6b;margin:1px 0 4px}

/* round 40 (polish) */
.klf-choice small.klf-code, .klf-choice__warn small.klf-code, button small.klf-code { font-size: 14px; font-weight: 400; opacity: .85; margin-left: 2px; }
.kle-btn--primary small.klf-code { color: inherit; }
.klf-quote__inc .klf-op { margin: 0 6px; white-space: pre; }
.klf-stepskip__k { display: none; }
.kle[data-klf] nav.kle-steps .klf-stepskip { background: transparent; }
.klf-tip-done { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: #eef6ef; color: #23542e; font-size: 16px; line-height: 22px; }
.klf-tip-done strong { margin-right: 6px; }
.klf-qgo.klf-qgo--wait, [data-kle-next].klf-qgo--wait { background: #cfc8bc !important; border-color: #cfc8bc !important; color: #3f3a33 !important; }
.klf-fit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.klf-fit li > span:first-child { grid-column: 1; }
.klf-fit li > span:nth-child(2) { grid-column: 1; font-size: 14px; }
.klf-fit li strong { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; white-space: nowrap; text-align: right; }
.kle-rv__look img { border: 1px solid #d6cfc3; background: #f3efe8; border-radius: 6px; box-sizing: border-box; }
/* round 40 (polish 6): the pick card's picture sits at the top, not in the middle of a tall text column */
.klf-rec__body { align-items: start; }
.klf-rec__media { align-self: start; }
/* round 41 (2): the Appliances pick card wraps its text under the photo, so no blank column under the picture */
@media (min-width: 750px) {
  [data-kle-pane="appliances"] .klf-rec__body { display: block; }
  [data-kle-pane="appliances"] .klf-rec__body::after { content: ""; display: block; clear: both; }
  [data-kle-pane="appliances"] .klf-rec__media { float: left; width: 42%; margin: 0 24px 12px 0; }
  [data-kle-pane="appliances"] .klf-rec__txt { display: block; }
  [data-kle-pane="appliances"] .klf-rec__txt > * { margin-top: 0; margin-bottom: 8px; }
}
/* round 41 (3): the sticky step bar slides under the site header, never over it */
.kle[data-klf] nav.kle-steps { z-index: 7; }
/* round 41 (4): every Review thumbnail has a frame; a white tile shows on a tinted card */
.kle-rv__look li img { object-fit: cover; }
.kle-rv__look li[data-k="bs"] img { object-fit: contain; padding: 6px; background: #ddd5c8; border: 1px solid #bfb5a6; }
/* round 41 (6): one "Add plan to cart" on Review: the sticky bar's (it clicks this one) */
.kle[data-klf] [data-kle-pane="review"] .kle-review__cta [data-kle-add] { display: none; }
/* round 41 (7) */
.klf-inst__next { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 0; }
.klf-inst__next a { font-weight: 700; color: var(--kle-ink, #1d1d1d); text-decoration: underline; }
/* round 41 (8): the combo stock choice is a light card like the other choices, in words */
.klf-choice__opts .klf-choice__combo, .kle[data-klf] .klf-choice__opts .kle-btn.klf-choice__combo { display: block; width: 100%; height: auto; min-height: 44px; padding: 10px 16px; border-radius: 12px; text-align: left; white-space: normal; line-height: 1.4; }
.klf-combo__h { display: block; font-weight: 700; }
.klf-combo__l { display: block; font-weight: 400; }
/* round 41 (9): the kitchen questions bar looks like the 7-step bar: lines on top, names under */
.klf-prog__t { font-size: 16px; }
.klf-prog__q { color: var(--kle-muted, #5c554b); }
.klf-sbar__b { border-bottom: 0; border-top: 6px solid #e3ddd2; border-radius: 0; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 6px 0 0; min-height: 44px; }
.klf-sbar__b.is-done { border-top-color: #2f7a4f; }
.klf-sbar__b.is-on { border-top-color: var(--kle-ink, #1d1d1d); }
.klf-sbar__n { display: none; }
/* round 41 (11) */
.klf-ba__cap { font-size: 14px; margin-top: 4px; color: var(--kle-ink, #1d1d1d); }
/* round 41 (15) */
.klf-proj-note { margin: 8px 0 16px; font-size: 16px; color: var(--kle-ink, #1d1d1d); }
/* round 41 (16): a neutral box until a shape is picked */
.klf-outline__ph { display: flex; align-items: center; justify-content: center; min-height: 220px; border: 2px dashed #cfc8bc; border-radius: 12px; background: #faf8f4; color: var(--kle-muted, #5c554b); text-align: center; padding: 16px; }
.klf-outline__ph p { margin: 0; font-size: 16px; }
/* round 42 (polish): the backsplash 'real tile, up close' swatch gets a clear border on every step, not just Review */
.kle[data-klf] .klf-rec__chip--bs img, .klf-rec__chip--bs img { border: 2px solid #6d665c !important; background: #9b9387 !important; padding: 6px !important; box-sizing: border-box !important; object-fit: contain !important; border-radius: 8px !important; }
/* round 42 (polish): the whole mode card, its text included, selects its radio */
.kle[data-klf] .kle-mode { cursor: pointer; }
.kle[data-klf] .kle-mode .kle-mode__body, .kle[data-klf] .kle-mode .kle-mode__body * { cursor: pointer; }

/* round 43 (P7): prices in the right-hand plan list never wrap or clip; the name wraps instead */
.klf-slim__ex li > span, .kle[data-klf] .kle-plan__items li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.klf-slim__ex li > strong, .kle[data-klf] .kle-plan__items li > span + span, .kle[data-klf] [data-klf-qlist] li > strong { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
/* round 43 (P4): the 'order only what is in stock' choice is the same card as the swap choice */
.klf-choice__opts .klf-choice__leave .klf-combo__l { color: #4a453e; }
/* round 43 (P13): on short windows the step bar stays above the plan preview, and a step opened from it starts below it */
@media (max-height: 820px) {
  .kle[data-klf] nav.kle-steps { z-index: 30; }
  .kle[data-klf] .klf-q--shape > .klf-outline, .kle[data-klf] .klf-q--island > .klf-outline, .kle[data-klf] .klf-q--walls > .klf-outline { max-height: min(380px, calc(100vh - var(--klf-stick, 120px) - 110px)); }
  .kle[data-klf] [data-kle-pane], .kle[data-klf] .klf-wiz { scroll-margin-top: calc(var(--kle-hdr, 120px) + 90px); }
}

/* round 43 (M2): the hood swap note sits under the hood card button */
.klf-otrsaid { margin: 10px 0 0; font-size: 16px; line-height: 1.4; text-align: left; }
/* round 45 (i): the "Cabinets: $" line sits at the bottom of each delivery card, so the cards line up */
.kle[data-klf] .kle-modes .kle-mode { display: flex; align-items: stretch; }
.kle[data-klf] .kle-modes .kle-mode > .kle-mode__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.kle[data-klf] .kle-modes .kle-mode > .kle-mode__body > * { max-width: 100%; }
.kle[data-klf] .kle-modes .kle-mode .kle-mode__total { margin-top: auto; padding-top: 8px; }

/* round 46 (P4): while a stock choice is open, the Plan step doesn't also say 'Looks good.' */
.klf-needon .klf-nav__lg, .klf-needon .klf-lg { display: none !important; }

/* round 47 (polish): no 'Looks good.' while the plan step shows a 'not fully in stock' heads-up */
html:has([data-klf-wiz] [data-klf-qstock] [data-klf-stockearly]) .klf-nav__lg,
[data-klf-wiz]:has([data-klf-qstock] [data-klf-stockearly]) .klf-lg { display: none !important; }

/* round 49: drawing reader, items per wall + "please check" line */
.klf-rp__items{display:block;margin-top:2px;line-height:1.35}
.klf-rp__chk{display:block;margin-top:4px;color:#9a3d00;font-weight:600}
.klf-rp__zoom{margin:4px 0 8px}

/* round 49 B: optional extras fork under the plan */
.klf-fork{margin:16px 0 4px;padding:14px 16px;border:1px solid #d8d8d8;border-radius:12px;background:#fafafa}
.klf-fork p{margin:0 0 10px}

/* round 49c: showroom pickup for assembled */
.klf-pickup{display:flex;gap:8px;align-items:flex-start;margin:4px 0 10px 4px;font-size:.95em}
.kle-mode.is-min{opacity:.6}

/* ===== R50 (UX audit 2026-11-02): calmer screen ===== */
/* question headings get focus for screen readers; no thick black frame on screen */
.kle[data-klf] [tabindex="-1"]:focus, .klf-wiz [tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }
/* the grey price pill repeated the bar's total; keep it for screen readers only */
.klf-wiz .klf-live { position: absolute !important; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* no "—" in the bar before there is a price */
.klf-nav__tot:has([data-klf-nav-total]:empty) { visibility: hidden; }
/* shape names read as clearly as the other choices */
[data-klf-shape] span { color: var(--kle-ink, #1d1d1d); }
@media (max-width: 699px) {
  /* phones: the step header scrolls away, so only the bottom bar stays on screen */
  .kle[data-klf] nav.kle-steps { position: static !important; box-shadow: none; }
  /* the video-call bubble covered the right edge of every step */
  html:has(.klf-wiz) .hover_two_three { display: none !important; }
}

/* R50: one step bar (the tabs say where you are), and a clear See details row on the Plan */
.klf-wiz .klf-prog__t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klf-plan__more { margin: 16px 0; border: 1px solid var(--kle-line, #d9d2c5); border-radius: 12px; background: #fff; }
.klf-plan__more > summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative; font-size: 16px; font-weight: 700; min-height: 48px; box-sizing: border-box; }
.klf-plan__more > summary::-webkit-details-marker { display: none; }
.klf-plan__more > summary::after { content: "+"; position: absolute; right: 16px; top: 12px; font-size: 22px; font-weight: 400; }
.klf-plan__more[open] > summary::after { content: "\2212"; }
.klf-plan__more > summary small { display: block; font-size: 14px; font-weight: 400; color: var(--kle-muted, #5c554b); margin-top: 2px; }
.klf-plan__more > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.klf-plan__more > summary:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
/* R50: the door styles are picked in the designer above, so "Compare other finishes" becomes a short row of links (no second picture grid) */
.kle-lines { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: none !important; }
.kle-lines li { width: auto !important; }
.kle-lines .kle-linecard { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 14px !important; min-height: 44px; box-sizing: border-box; border: 1px solid var(--kle-line, #d9d2c5); border-radius: 999px; background: #fff; text-decoration: none; }
.kle-lines .kle-linecard img, .kle-lines .kle-linecard__group { display: none !important; }
.kle-lines .kle-linecard strong { font-size: 14px; font-weight: 600; }
.kle-lines .kle-linecard.is-current { border-color: var(--kle-ink, #1d1d1d); border-width: 2px; }
.kle[data-klf] .klf-plan__more > summary { display: block !important; width: auto !important; }
.kle[data-klf] .klf-plan__more > summary small { display: block !important; }
/* R50: the hero note already says what is and isn't in the price */
.klf-wiz [data-klf-quote] .klf-quote__inc { display: none; }

/* theme C: whole-kitchen tiles on the Plan */
.klf-tiles { margin: 16px 0; }
.klf-tiles h4 { font-size: 18px; margin: 0 0 8px; }
.klf-tiles h4 small { font-size: 14px; font-weight: 400; color: var(--kle-muted, #5c554b); margin-left: 4px; }
.klf-tiles__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 750px) { .klf-tiles__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.klf-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--kle-line, #d9d2c5); border-radius: 12px; background: #fff; color: var(--kle-ink, #1d1d1d); text-align: left; cursor: pointer; font: inherit; }
.klf-tile strong { font-size: 16px; }
.klf-tile small { font-size: 14px; color: var(--kle-muted, #5c554b); }
.klf-tile:hover { border-color: var(--kle-ink, #1d1d1d); }
.klf-tile:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.klf-tile.is-on { border-color: var(--klf-ok, #17603b); background: #eef6ef; }
.klf-tile.is-on small { color: var(--klf-ok, #17603b); font-weight: 600; }
.klf-tiles__more { margin: 10px 0 0; font-size: 14px; color: var(--kle-muted, #5c554b); }

/* theme C: compare this plan in other door styles */
.klf-cmp { margin: 12px 0 16px; }
.klf-cmp__go { width: 100%; }
.klf-cmp__list { list-style: none; margin: 8px 0 0; padding: 0; }
.klf-cmp__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--kle-line, #e6e0d6); }
.klf-cmp__list li.is-on { background: #f6f3ee; border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.klf-cmp__list img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.klf-cmp__n strong, .klf-cmp__p strong { display: block; font-size: 16px; }
.klf-cmp__n small, .klf-cmp__p small { display: block; font-size: 14px; color: var(--kle-muted, #5c554b); }
.klf-cmp__p { text-align: right; }
.klf-cmp__p small.is-less { color: var(--klf-ok, #17603b); font-weight: 600; }
.klf-cmp__a { font-size: 14px; font-weight: 600; text-decoration: underline; padding: 10px 4px; }

.klf-save { margin: 2px 0 8px; font-size: 16px; font-weight: 600; color: var(--klf-ok, #17603b); }
.klf-cmp__nc { color: var(--kle-muted, #5c554b); }

/* R50: tester feedback (test themes only) */
.klf-fb__tab { position: fixed; left: 0; top: 42%; z-index: 2147483000; transform: rotate(-90deg) translate(-50%, 0); transform-origin: left top; padding: 8px 14px; min-height: 40px; border: 0; border-radius: 0 0 10px 10px; background: #b45309; color: #fff; font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.klf-fb__tab:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.klf-fb { position: fixed; inset: auto 0 0 0; z-index: 2147483001; display: flex; justify-content: center; padding: 0 8px 8px; pointer-events: none; }
.klf-fb[hidden] { display: none; }
.klf-fb__f { pointer-events: auto; width: 100%; max-width: 440px; max-height: 88vh; overflow: auto; box-sizing: border-box; padding: 16px; border-radius: 14px; background: #fff; color: #1d1d1d; box-shadow: 0 10px 40px rgba(0,0,0,.3); font-size: 16px; }
@media (min-width: 750px) { .klf-fb { inset: auto auto 16px 56px; justify-content: flex-start; } }
.klf-fb__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.klf-fb h2 { margin: 0 0 8px; font-size: 18px; }
.klf-fb h2 small { display: block; font-size: 14px; font-weight: 400; color: #5c554b; }
.klf-fb__close { border: 0; background: none; font-size: 28px; line-height: 1; min-width: 44px; min-height: 44px; cursor: pointer; }
.klf-fb label { display: block; margin: 8px 0; font-weight: 600; font-size: 14px; }
.klf-fb input:not([type=file]), .klf-fb textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border: 1px solid #cfc8bc; border-radius: 8px; font: 400 16px/1.4 inherit; font-family: inherit; }
.klf-fb__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.klf-fb__b { display: inline-flex !important; align-items: center; min-height: 44px; margin: 0 !important; padding: 8px 12px; border: 1px solid #1d1d1d; border-radius: 999px; background: #fff; font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; }
.klf-fb__shot img { display: block; max-width: 100%; max-height: 180px; border: 1px solid #cfc8bc; border-radius: 8px; }
.klf-fb__x { margin-top: 4px; border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 36px; }
.klf-fb__msg { min-height: 1.2em; margin: 6px 0; font-size: 14px; color: #17603b; }
.klf-fb__msg.is-bad { color: #9a3412; }
.klf-fb__send { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #1d1d1d; color: #fff; font: 700 16px/1.2 inherit; font-family: inherit; cursor: pointer; }
.klf-fb__send:disabled { opacity: .6; }
.klf-fb__fine { margin: 8px 0 0; font-size: 13px; color: #5c554b; }

/* R52: fraction of an inch next to the in box */
.klf-wall .klf-fr select { min-height: 44px; min-width: 64px; padding: 0 6px; border: 1px solid var(--kle-line, #cfc8bc); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; }

/* R53: 2020-style drawing sheet */
.klf-sheet-ov { position: fixed; inset: 0; z-index: 2147482000; background: #fff; overflow: auto; color: #1d1d1d; font-family: inherit; }
.klf-sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 16px; background: #f3efe8; border-bottom: 1px solid #d9d2c5; }
.klf-sheet-bar span { display: flex; gap: 8px; flex-wrap: wrap; }
.klf-sheet { max-width: 1100px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.klf-sheet__h { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid #1d1d1d; padding-bottom: 8px; margin-bottom: 12px; }
.klf-sheet__h strong { display: block; font-size: 22px; } .klf-sheet__h span { font-size: 14px; color: #5c554b; } .klf-sheet__d { font-size: 14px; white-space: nowrap; }
.klf-sheet h3 { font-size: 18px; margin: 14px 0 6px; }
.klf-sheet__s { overflow-x: auto; border: 1px solid #d9d2c5; border-radius: 8px; padding: 4px; background: #fff; }
.klf-sheet__p svg { max-width: 100%; height: auto; max-height: 360px; }
.klf-elev { display: block; }
.klf-elev .e-c, .klf-elev .e-f { stroke: #1d1d1d; stroke-width: .6; }
.klf-elev .e-b { fill: #fff; stroke: #1d1d1d; stroke-width: .5; } .klf-elev .e-sink { fill: #eef3f8; } .klf-elev .e-cor { fill: #f1ecf6; }
.klf-elev .e-ap { fill: #f1f1f1; stroke: #1d1d1d; stroke-width: .5; stroke-dasharray: 2 1.2; }
.klf-elev .e-w { fill: #fff; stroke: #1d1d1d; stroke-width: .5; }
.klf-elev .e-fill { fill: #e6dfd3; stroke: #8a8174; stroke-width: .3; } .klf-elev .e-gap { fill: none; stroke: #8a8174; stroke-width: .4; stroke-dasharray: 2 2; }
.klf-elev .e-hood { fill: #f7f7f7; stroke: #1d1d1d; stroke-width: .4; } .klf-elev .e-ct { fill: #c9c2b6; stroke: #1d1d1d; stroke-width: .3; }
.klf-elev .e-d { stroke: #1a4fa0; stroke-width: .35; }
.klf-elev .e-l { font-size: 3.6px; font-weight: 700; fill: #1d1d1d; } .klf-elev .e-s { font-size: 3px; fill: #5c554b; }
.klf-elev .e-t { font-size: 3.6px; fill: #1a4fa0; } .klf-elev .e-tot { font-size: 4.4px; font-weight: 700; }
.klf-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; } .klf-sheet th, .klf-sheet td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e6e0d6; } .klf-sheet td:last-child, .klf-sheet th:last-child { text-align: right; }
.klf-sheet__t { font-size: 16px; margin: 10px 0 0; } .klf-sheet__f { margin-top: 16px; font-size: 13px; color: #5c554b; border-top: 1px solid #d9d2c5; padding-top: 8px; }
@media print {
  body.klf-printing > *:not(.klf-sheet-ov) { display: none !important; }
  body.klf-printing > .klf-sheet-ov, body.klf-printing > .klf-sheet-ov .klf-sheet, body.klf-printing > .klf-sheet-ov .klf-sheet * { visibility: visible !important; }
  body.klf-printing > .klf-sheet-ov { display: block !important; position: static !important; overflow: visible !important; }
  body.klf-printing > .klf-sheet-ov .klf-sheet { display: block !important; }
  body.klf-printing > .klf-sheet-ov .klf-sheet__h, body.klf-printing > .klf-sheet-ov .klf-sheet__d { display: flex !important; }
  body.klf-printing > .klf-sheet-ov .klf-sheet section, body.klf-printing > .klf-sheet-ov .klf-sheet footer, body.klf-printing > .klf-sheet-ov .klf-sheet__s { display: block !important; }
  .klf-sheet-bar { display: none !important; }
  .klf-sheet { max-width: none; padding: 0; }
  .klf-sheet__e, .klf-sheet__p, .klf-sheet__l { break-inside: avoid; }
  .klf-sheet__s { overflow: visible; border: 0; } .klf-sheet__s svg, .klf-sheet__p svg { max-width: 100%; height: auto; }
  @page { size: landscape; margin: 0.4in; }
}

/* R54: "How well did we read your plan?" */
.klf-rate { margin: 16px 0 8px; padding: 12px 14px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; }
.klf-rate__q { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.klf-rate__row { display: flex; flex-wrap: wrap; gap: 8px; }
.klf-rate__b { min-height: 44px; padding: 8px 14px; font-size: 16px; border: 1px solid rgba(0,0,0,.25); border-radius: 22px; background: #fff; color: inherit; cursor: pointer; }
.klf-rate__b.is-on { background: #1f2a24; color: #fff; border-color: #1f2a24; }
.klf-rate__more { margin-top: 10px; } .klf-rate__more label { display: block; font-size: 14px; }
.klf-rate__more textarea { display: block; width: 100%; margin-top: 4px; font-size: 16px; padding: 8px; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; box-sizing: border-box; }
.klf-rate__send { margin-top: 8px; min-height: 44px; padding: 8px 18px; font-size: 16px; border-radius: 22px; border: 0; background: #1f2a24; color: #fff; cursor: pointer; }
.klf-rate__msg { margin: 6px 0 0; font-size: 14px; min-height: 1em; }
.klf-rate__why { margin: 10px 0 4px; font-size: 14px; }
.klf-rate__c { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.klf-rate__c label { font-size: 14px; } .klf-rate__c input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 44px; font-size: 16px; padding: 8px; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; }

/* audit Batch 1: one truthful status instead of "Your kitchen is ready" */
.klf-status { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid #d9d4cc; }
.klf-status .klf-plan__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.klf-status__i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: 700; color: #fff; flex: none; }
.klf-status.is-bad { border-color: #e3b7b3; background: #fdf3f2; } .klf-status.is-bad .klf-status__i { background: #b3261e; }
.klf-status.is-need { border-color: #e8d6a8; background: #fdf9ee; } .klf-status.is-need .klf-status__i { background: #9a6b00; }
.klf-status.is-ok { border-color: #bcd9c4; background: #f2f9f4; } .klf-status.is-ok .klf-status__i { background: #2e7d4f; }
.klf-status ul { margin: 6px 0; padding-left: 20px; font-size: 15px; } .klf-status li { margin: 3px 0; } .klf-status li.is-bad { color: #8c1d18; }
.klf-status__v { margin: 6px 0 0; font-size: 14px; color: #4a453e; }
.klf-svg__mk--bad { stroke: #b3261e !important; stroke-dasharray: 3 2; } .klf-svg__mkl--bad { fill: #b3261e; font-weight: 700; }
.klf-elev .e-op { stroke-width: .6; } .klf-elev .e-op--door { fill: #f3eee6; stroke: #8a6a3c; } .klf-elev .e-op--win { fill: #d6e7f5; fill-opacity: .85; stroke: #3f7fb5; }
.klf-elev .e-op--unk { fill-opacity: .4; stroke-dasharray: 2 1.5; } .klf-elev .e-op--bad { stroke: #b3261e; stroke-width: .9; } .klf-elev .e-op__t { fill: #2b3a4a; }
.klf-mk__h { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 6px 0; font-size: 14px; } .klf-mk__h input { width: 72px; min-height: 40px; font-size: 16px; padding: 4px 6px; }
.klf-sheet__st { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #d9d4cc; border-radius: 6px; font-size: 12px; } .klf-sheet__st.is-bad { border-color: #b3261e; } .klf-sheet__st ul { margin: 4px 0 0; padding-left: 18px; }

/* audit Batch 2: what was read, which room, identity, choices, import preview */
.klf-rp__src { margin: 8px 0; } .klf-rp__src img { display: block; max-width: 100%; max-height: 320px; border: 1px solid #d9d4cc; border-radius: 6px; background: #fff; }
.klf-rp__src figcaption { font-size: 13px; color: #4a453e; margin-top: 4px; }
.klf-rp__id { margin: 8px 0; padding: 10px 12px; border: 1px solid #e8d6a8; background: #fdf9ee; border-radius: 8px; font-size: 15px; } .klf-rp__id p { margin: 0 0 6px; }
.klf-rp__ch { display: block; font-weight: 400; } .klf-rp__ch + .klf-chips, .klf-rp__id .klf-chips { margin-top: 6px; }
.klf-rp__opts { display: grid; gap: 8px; margin: 8px 0; } .klf-rp__opt { text-align: left; padding: 10px 12px; min-height: 48px; border: 1px solid #c9c2b6; border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px; }
.klf-rp__opt strong, .klf-rp__opt span, .klf-rp__opt small { display: block; } .klf-rp__opt small { color: #6b655c; font-size: 13px; }
.klf-rp__tw { overflow-x: auto; margin: 8px 0; } .klf-rp__t { border-collapse: collapse; font-size: 14px; min-width: 520px; } .klf-rp__t th, .klf-rp__t td { border-bottom: 1px solid #e6e1d8; padding: 6px 8px; text-align: left; vertical-align: top; }
.klf-impundo { margin: 6px 0 10px; font-size: 14px; color: #4a453e; }
.klf-wall__src { display: block; font-size: 12px; font-weight: 400; color: #4a6b4f; } .klf-wall__src.is-typ { color: #8a6200; }

/* audit Batch 3: parts list */
.klf-parts { margin: 12px 0; padding: 10px 12px; border: 1px solid #d9d4cc; border-radius: 10px; } .klf-parts h4 { margin: 0 0 6px; font-size: 16px; }
.klf-parts ul { list-style: none; margin: 0; padding: 0; } .klf-parts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-top: 1px solid #eee8de; font-size: 15px; }
.klf-parts li small { display: block; color: #5c574f; font-size: 13px; } .klf-parts li em { font-style: normal; font-size: 13px; font-weight: 600; }
.klf-parts li.is-in em { color: #2e7d4f; } .klf-parts li.is-site em { color: #4a453e; } .klf-parts li.is-missing em, .klf-parts li.is-short em, .klf-parts li.is-oos em { color: #8a5a00; }
.klf-parts__why { width: 100%; } .klf-opts--4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.klf-opt[aria-pressed="true"] { border-color: #1f2a24; box-shadow: inset 0 0 0 2px #1f2a24; }
.klf-svg__isfx { opacity: .95; }

/* audit Batch 4 (F05): style switch result */
.klf-pin { border: 1px solid #d9d2c3; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; background: #fbf8f2; font-size: 14px; line-height: 1.45; }
.klf-pin.is-same { border-color: #b9d8c4; background: #f2f9f4; }
.klf-pin ul { margin: 6px 0 6px 18px; padding: 0; }
.klf-pin__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* audit Batch 4 (F15): add or replace an imported list */
.klf-impq { border: 1px solid #d9d2c3; border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #fbf8f2; font-size: 14px; }
.klf-impq ul { margin: 4px 0 6px 18px; padding: 0; }
.klf-impq__acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* audit Batch 5 (F16/F22): Start over lists what it clears */
.klf-sov__q ul { margin: 4px 0 6px 18px; padding: 0; text-align: left; } .klf-sov__q p { margin: 0 0 4px; }
/* audit Batch 6: page thumbnails, reading identity and differences */
.klf-rp__pg { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px; padding: 6px; border: 1px solid #d9d2c3; border-radius: 8px; background: #fff; font-size: 12px; cursor: pointer; max-width: 140px; }
.klf-rp__pg canvas { max-width: 120px; max-height: 120px; background: #f4f1ea; }
.klf-rp__ident { font-size: 12px; }
.klf-rp__diff { border: 1px solid #e3c58a; background: #fff8ea; border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px; } .klf-rp__diff ul { margin: 4px 0 0 18px; padding: 0; }

/* ---------- B8 (Rahul 11-07): calm cabinet cards. Same controls, less text; the size shows once ---------- */
.kle-app .kle-table tr.kle-row { gap: 4px; padding: 10px !important; border-color: #e6e1d8; border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.kle-app .kle-table tr.kle-row:hover { border-color: #cfc8bb; }
.kle-app .kle-table tr.kle-row.is-in { border-color: #1a5fb4; box-shadow: 0 0 0 2px #1a5fb4; }
.kle-app .kle-row__img, .kle-app .kle-row__img--ph { background: #faf8f5; border-radius: 10px; padding: 8px; }
.kle-app .kle-row__item > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.kle-app .kle-row__code { font-size: 18px; font-weight: 800; }
.kle-app .klf-wchip { order: 3; flex: 1 0 100%; font-size: 13px; font-weight: 600; color: #4a453d; }\n@media (max-width: 749px) { .kle-app .klf-wchip { font-size: 12px; letter-spacing: -.01em; } }
.kle-app .kle-row__name { order: 2; }
.kle-app .kle-row__badges { order: 4; }
.kle-app .kle-row__name { flex: 1 0 100%; font-size: 14px !important; line-height: 1.35; color: #5c574f; text-decoration: none; }
.kle-app .kle-row__name:hover { text-decoration: underline; }
.kle-app .kle-table .kle-row__meta { display: none; }
.kle-app .kle-row__badges { flex: 1 0 100%; display: flex; gap: 8px; }
.kle-app .kle-table .kle-pill { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; font-size: 13px !important; font-weight: 500; color: #5c574f; }
.kle-app .kle-table .kle-pill::before { content: "●"; margin-right: 4px; font-size: 10px; vertical-align: 1px; }
.kle-app .kle-table .kle-pill--ok { color: #2e7d32 !important; }
.kle-app .kle-table .kle-pill--no { color: #b3261e !important; }
.kle-app .kle-table .kle-pill--ship { display: none; }
.kle-app .kle-table .kle-row__price { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.kle-app .kle-table .kle-row__price s { font-size: 12px; font-weight: 400; color: #9a948a; }
/* not in the plan yet: one "+ Add" button */
.kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty [data-dec], .kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty input { display: none; }
.kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty { border: 0; }
.kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty [data-inc] { flex: 1 1 auto; width: 100% !important; max-width: none !important; height: auto !important; min-height: 44px; padding: 0 12px !important; border: 1px solid #1d1d1d; border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; }
.kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty [data-inc]::after { content: " Add"; }
.kle-app .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty [data-inc]:hover { background: #1d1d1d; color: #fff; }
/* in the plan: quantity and L / R on one line */
.kle-app .kle-table tr.kle-row.is-in td.kle-c-total { display: none !important; }
.kle-app .kle-table tr.kle-row.is-in td.kle-c-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; order: 5; }
.kle-app .kle-table tr.kle-row.is-in td.kle-c-qty { order: 4; }
.kle-app .kle-table .kle-hinge-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kle-app .kle-table .kle-hinge { display: inline-flex !important; border: 1px solid #cfc8bb !important; border-radius: 999px !important; overflow: hidden; }
.kle-app .kle-table .kle-hinge label { margin: 0; }
.kle-app .kle-table .kle-hinge label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kle-app .kle-table .kle-hinge label span { display: flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; cursor: pointer; background: #fff; color: #4a453d; }
.kle-app .kle-table .kle-hinge label input:checked + span { background: #1d1d1d; color: #fff; }
.kle-app .kle-table .kle-hinge label input:focus-visible + span { outline: 2px solid #1a5fb4; outline-offset: -2px; }
.kle-app .kle-table .kle-hinge-wrap:not(.is-required) > small { display: none; }
.kle-app .kle-table .kle-hinge-wrap.is-required > small { flex: 1 0 100%; color: #b3261e; font-size: 13px; }
/* Modify: a small link; opens a panel (sheet on phone, centered on desktop) */
.kle-app .kle-table .kle-mods { border: 0 !important; padding: 0 !important; background: none !important; }
.kle-app .kle-table .kle-mods > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px; border: 0 !important; background: none !important; color: #1a5fb4; font-weight: 700; font-size: 14px; cursor: pointer; }
.kle-app .kle-table .kle-mods > summary::-webkit-details-marker { display: none; }
.kle-app .kle-table .kle-mods > summary::before { content: "⚙"; font-weight: 400; }
.kle-app .kle-table .kle-mods[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,.35); cursor: default; }
.kle-app .kle-table .kle-mods[open] > .kle-mods__b { position: fixed; z-index: 99991; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; background: #fff; border: 0 !important; border-radius: 16px; padding: 18px 18px 16px !important; box-shadow: 0 16px 48px rgba(0,0,0,.25); display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (max-width: 749px) { .kle-app .kle-table .kle-mods[open] > .kle-mods__b { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 85vh; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; } }
.kle-app .kle-mods__b .klf-mhead { margin: 0 0 2px; font-size: 19px; }
.kle-app .kle-mods__b .kle-mods__f { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding-top: 10px; border-top: 1px solid #eee; }
.kle-app .kle-mods__b .kle-mods__f label { font-weight: 700; font-size: 15px; }
.kle-app .kle-mods__b .kle-mods__f input, .kle-app .kle-mods__b .kle-mods__f select { width: 120px; min-height: 44px; }
.kle-app .kle-mods__b .kle-mods__f small { grid-column: 1 / -1; color: #777; font-size: 12px; }
.kle-app .kle-mods__b .kle-mods__c { padding-top: 10px; border-top: 1px solid #eee; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.kle-app .kle-mods__b .kle-mods__note { font-size: 12px; color: #777; margin: 4px 0 0; }
.kle-app .kle-mods__b .klf-mdone { width: 100%; min-height: 48px; margin-top: 4px; background: #1d1d1d; color: #fff; border-radius: 999px; }
.kle-app .kle-table td.kle-c-price { padding: 0 !important; margin: 0 !important; }
.kle-app .kle-table .kle-row__badges { display: flex !important; }
.kle-app .kle-table .kle-row__badges .kle-pill:not(.kle-pill--ship) { display: inline-flex !important; align-items: baseline; }\n.kle-app .kle-table .kle-row__badges .kle-pill--ship { display: none !important; }
/* plan list: short names */
.kle-plan [data-kle-plan-items] li > span:first-child { line-height: 1.35; }

/* ---------- B13 (Rahul 11-07): Cards / Table switch. Table = the engine's own rows as a compact order table ---------- */
.kle-app .klf-view { display: inline-flex; border: 1px solid #cfc8bb; border-radius: 999px; overflow: hidden; margin-left: auto; }
.kle-app .klf-view button { min-height: 40px; padding: 0 14px; border: 0; background: #fff; color: #4a453d; font: inherit; font-size: 14px; cursor: pointer; }
.kle-app .klf-view button[aria-pressed="true"] { background: #1d1d1d; color: #fff; }
.kle-app.klf-tv .kle-table { display: table !important; width: 100%; border-collapse: collapse; }
.kle-app.klf-tv .kle-table thead { display: table-header-group !important; }
.kle-app.klf-tv .kle-table thead th { text-align: left; font-size: 13px; color: #5c574f; padding: 8px 10px; border-bottom: 2px solid #e6e1d8; position: sticky; top: 0; background: #fff; z-index: 1; }
.kle-app.klf-tv .kle-table tbody { display: table-row-group !important; }
.kle-app.klf-tv .kle-table tr.kle-row { display: table-row !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.kle-app.klf-tv .kle-table tr.kle-row > td { display: table-cell !important; padding: 8px 10px !important; border-bottom: 1px solid #eee !important; vertical-align: middle; }
.kle-app.klf-tv .kle-table tr.kle-row.is-in > td { background: #f4f8fd; }
.kle-app.klf-tv .kle-table tr.kle-row.is-in td.kle-c-total, .kle-app.klf-tv .kle-table td.kle-c-total { display: table-cell !important; font-weight: 700; white-space: nowrap; }
.kle-app.klf-tv .kle-table tr.kle-row:not(.is-in) td.kle-c-opts { display: table-cell !important; visibility: hidden; }
.kle-app.klf-tv .kle-row__item { display: flex !important; align-items: center; gap: 10px; }
.kle-app.klf-tv .kle-row__img, .kle-app.klf-tv .kle-row__img--ph { width: 44px !important; height: 44px !important; padding: 2px; }
.kle-app.klf-tv .kle-row__item > div { flex-wrap: wrap; column-gap: 8px; }
.kle-app.klf-tv .kle-row__code { font-size: 16px; }
.kle-app.klf-tv .kle-row__name { flex: 0 1 auto; }
.kle-app.klf-tv .klf-wchip { order: 2; flex: 0 1 auto; font-weight: 500; color: #5c574f; }
.kle-app.klf-tv .kle-row__badges { flex: 1 0 100%; }
.kle-app.klf-tv .kle-table .kle-row__price { font-size: 16px; white-space: nowrap; }
.kle-app.klf-tv .kle-table .kle-qty { width: 128px; }
.kle-app.klf-tv .kle-table tr.kle-row:not(.is-in):not(.is-oos) .kle-qty [data-inc] { min-height: 38px; }
.kle-app.klf-tv .kle-table tr.kle-oos-row { display: table-row !important; }
.kle-app.klf-tv .kle-table tr.kle-oos-row > td { display: table-cell !important; }
@media (max-width: 749px) {
  .kle-app.klf-tv .kle-table thead { display: none !important; }
  .kle-app.klf-tv .kle-table, .kle-app.klf-tv .kle-table tbody { display: block !important; }
  .kle-app.klf-tv .kle-table tr.kle-row { display: grid !important; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 0 !important; border-bottom: 1px solid #eee !important; }
  .kle-app.klf-tv .kle-table tr.kle-row > td { display: block !important; border: 0 !important; padding: 2px 0 !important; }
  .kle-app.klf-tv .kle-table td.kle-c-item { grid-column: 1 / -1; }
  .kle-app.klf-tv .kle-table td.kle-c-total { display: none !important; }
  .kle-app.klf-tv .kle-table tr.kle-row:not(.is-in) td.kle-c-opts { display: none !important; }
  .kle-app.klf-tv .kle-table tr.kle-row.is-in td.kle-c-total { display: none !important; }
  .kle-app.klf-tv .kle-table tr.kle-row.is-in { background: #f4f8fd; }
  .kle-app.klf-tv .kle-table tr.kle-row.is-in > td { background: transparent; }
  .kle-app.klf-tv .kle-table .kle-mods > summary { white-space: nowrap; }
}

/* B3 (Rahul 11-07): feedback attachments list */
.klf-fb__atts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.klf-fb__atts li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.klf-fb__atts img, .klf-fb__pdf { width: 48px; height: 48px; object-fit: cover; border: 1px solid #cfc8bc; border-radius: 6px; max-height: none !important; }
.klf-fb__pdf { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #9a1b1b; background: #fff5f5; }
.klf-fb__atts span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klf-fb__atts small { color: #6d665c; }

/* B12 cabinets first: until kitchen-app.js boots, a first visit already shows the build view and the cabinet list (no jump when it boots) */
html.klf-cf .kle[data-path="build"]:not(.is-app-ready) [data-kle-pane="cabinets"][hidden] { display: block; }
/* B12: on a first visit the path switch is one compact row (titles only), so the list starts higher */
html.klf-cf .klf-path__b { min-height: 48px; justify-content: center; padding: 8px 14px; }
html.klf-cf .klf-path__b span { display: none; }
@media (max-width: 749px) {
  /* width chips: one row that scrolls sideways, not three rows */
  html.klf-cf .kle-app .kle-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.klf-cf .kle-app .kle-chips > * { flex: 0 0 auto; }
  html.klf-cf .kle-app .kle-chips::-webkit-scrollbar { display: none; }
}

/* R12 (Rahul 11-08 screenshot): "Right end" wrapped when picked. Short centred choices (.klf-opt--day) keep even padding,
   a smaller tick in the corner and a one-line label. */
.klf-opt--day strong { white-space: nowrap; }
.klf-opt--day[aria-checked="true"] { padding-right: 14px; padding-left: 14px; }
.klf-opt--day[aria-checked="true"]::after { top: 4px; right: 4px; width: 18px; height: 18px; font-size: 12px; line-height: 18px; }
@media (max-width: 380px) { .klf-opts--3 .klf-opt--day { padding-left: 8px; padding-right: 8px; } .klf-opts--3 .klf-opt--day strong { font-size: 15px; } }

/* R12 (Rahul 11-08): the question still to answer is outlined, with the reason right under it */
.klf-need-hl { outline: 3px solid #e0a100; outline-offset: 4px; border-radius: var(--klf-r, 10px); }
.klf-need-inline { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff3d6; color: #6b4a00; font-weight: 700; font-size: 15px; }

/* C v1.2 (Rahul 11-07, mockup C): slim phone top on cabinet-line pages. This file loads only with the kitchen line
   section, so these rules touch no other page. Desktop is unchanged. */
@media (max-width: 749px) {
  /* the category image chips repeat the menu row above them (same rule the Anatolia series pages already use) */
  .mobile-nav-links2 { display: none !important; }
  /* the showroom line is in the trust tiles further down; the breadcrumb repeats the page title */
  .a7h-mshow, main#main-content > .container:has(.breadcrumbs, nav[aria-label*="readcrumb"]) { display: none !important; }
  /* thinner step bar: the bars stay tappable (24 px), the empty band under them goes */
  .kle-app .kle-steps { padding-bottom: 0; margin-bottom: 4px; }
  .kle-app .kle-steps .kle-step { min-height: 24px; padding-top: 4px; }
  .kle-pane.kle-card { margin-top: 6px; }
  .klf-path__b { padding-top: 6px; padding-bottom: 6px; }
  .klf-path__b strong { font-size: 15px; line-height: 1.2; }
  /* the two-line order table title repeats the selected "Cabinets" tab right above it: kept for screen readers only */
  .kle-order__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .kle-order__head .kle-search { flex: 1 1 160px; }
  .kle-order__head h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}