/* OpalSketch: full-page app layout (kitchen-designer.html). Builds on the .cd designer styles in site.css. */
html.kda-page, html.kda-page body { height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--ground); }
html.kda-page body::before { display: none; }
.kda-boot { position: fixed; inset: 0; display: grid; place-items: center; font: 600 1rem var(--font-body); color: var(--ink-soft); }

.cd.cd--app { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: var(--ground); }

/* ---------- top bar ---------- */
.kda-top { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--navy); color: #fff; min-height: 60px; }
.kda-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding-right: 10px; border-right: 1px solid rgba(255,255,255,.14); margin-right: 2px; }
.kda-brand img { width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 4px; }
.kda-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.kda-brand b { font: 800 .98rem var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.kda-brand small { font-size: .72rem; color: rgba(255,255,255,.66); }
.kda-top__name input { width: clamp(120px, 18vw, 240px); background: rgba(255,255,255,.08); border: 1px solid transparent; color: #fff; font: 700 .95rem var(--font-body); padding: 8px 10px; border-radius: 8px; }
.kda-top__name input:hover { border-color: rgba(255,255,255,.2); }
.kda-top__name input:focus { outline: none; border-color: var(--ember); background: rgba(255,255,255,.12); }
.kda-top__name input::placeholder { color: rgba(255,255,255,.5); }
.kda-top__hist { display: flex; gap: 2px; }
.kda-top__sp { flex: 1; }
.kda-saved { font-size: .78rem; color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: 6px; }
.kda-saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5fbf8a; }
.kda-saved.is-busy::before { background: var(--ember); }
.kda-ico { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; padding: 0; text-decoration: none; }
.kda-ico svg { width: 21px; height: 21px; }
.kda-top .kda-ico:hover { background: rgba(255,255,255,.1); }
.kda-top .kda-ico:disabled { opacity: .35; cursor: default; background: none; }
.kda-pill { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; border: 0; background: var(--ember); color: var(--navy); border-radius: 12px; padding: 7px 14px; cursor: pointer; font: inherit; min-height: 44px; justify-content: center; }
.kda-pill small { font-size: .68rem; font-weight: 600; opacity: .8; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-pill b { font: 800 1.02rem var(--font-display); }
.kda-pill:hover { background: #e39a48; }

/* ---------- body: rail | panel | stage ---------- */
.cd--app .cd__main { display: grid; grid-template-columns: 84px auto minmax(0, 1fr); min-height: 0; height: 100%; }
.kda-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; }
.kda-rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; border-radius: 12px; padding: 10px 2px; font: 700 .7rem/1.1 var(--font-body); color: var(--ink-soft); cursor: pointer; text-align: center; }
.kda-rail button svg { width: 24px; height: 24px; }
.kda-rail button:hover { background: var(--ground); color: var(--ink); }
.kda-rail button.is-on { background: var(--sky); color: var(--blue); }
.kda-rail button[data-open="price"] { margin-top: auto; }
.kda-rail button[data-open="price"].is-on { background: #ffe4ec; color: var(--ember-dark); }

.kda-panel { width: 0; overflow: hidden; background: var(--paper); border-right: 1px solid var(--line); min-height: 0; }
.kda--panel .kda-panel { width: 348px; overflow-y: auto; overscroll-behavior: contain; }
.kda--wide .kda-panel { width: 480px; }
.kda-sec__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.kda-sec__head h2 { margin: 0; font: 800 1.12rem var(--font-display); }
.kda-sec__x { color: var(--ink-soft); }
.kda-sec__x:hover { background: var(--ground); color: var(--ink); }
.kda-sec__body { padding: 14px 16px 28px; }
.kda-block { margin-bottom: 22px; }
.kda-block h3 { margin: 0 0 4px; font: 800 .82rem var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.kda-hint { margin: 0 0 10px; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.kda-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--blue); text-decoration: underline; cursor: pointer; }
.kda-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 10px; font-size: .88rem; }
.kda-roomdims { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; margin-bottom: 10px; }
.kda-roomdims .cd__lbl { flex-basis: 100%; font-weight: 700; font-size: .82rem; color: var(--ink-soft); }
.cd--app .kda-block input[type="number"], .cd--app .kda-block select { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.cd--app .kda-block input[type="number"] { width: 62px; }
.cd--app .kda-block > label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; margin-bottom: 10px; }
.cd--app #cdCutWrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: .88rem; }
.cd--app #cdCutWrap[hidden] { display: none; }
.cd--app #cdClear { width: 100%; padding: 10px; border-radius: 10px; }
.kda-find { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; margin-bottom: 8px; background: var(--ground); }
.kda-find:focus { outline: none; border-color: var(--blue); background: #fff; }
.cd--app .cd__grp { margin-bottom: 18px; }
.cd--app .cd__grp[hidden] { display: none; }
.cd--app .cd__chips { gap: 6px; }
.cd--app .cd__chip { padding: 9px 12px; font-size: .82rem; border-radius: 10px; min-height: 38px; }
.cd--app .cd__chip[hidden] { display: none; }
.cd--app .cd__chip--tpl { padding: 12px 14px; font-size: .88rem; }
.cd--app .cd__grp--custom { border-top: 0; padding: 14px; background: var(--ground); border-radius: 12px; }
.cd--app .cd__customrow select, .cd--app .cd__customrow input { font-size: 16px; padding: 8px; border-radius: 8px; }
.cd--app .cd__customrow .cd__mini { padding: 8px 14px; border-radius: 8px; }
.cd--app .cd__list { max-height: none; }
.cd--app .cd__actions .btn { border-radius: 10px; }

/* price panel: the quote tool without its card chrome */
.cd--app .cq { border: 0; padding: 0; box-shadow: none; border-radius: 0; background: none; }
.cd--app .cq__head h2 { display: none; }
.cd--app .cq__kick { display: none; }
.cd--app .cq__head p { font-size: .85rem; margin-bottom: 12px; }
.cd--app .cq__brands { gap: 6px; }
.cd--app .cq__brand { padding: 10px; }
.cd--app .cq__brand b { font-size: .9rem; }
.cd--app .cq__brand small { font-size: .72rem; display: block; line-height: 1.3; }
.cd--app .cq__lines { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.cd--app .cq__table table { min-width: 0; font-size: .8rem; }
.cd--app .cq__table th, .cd--app .cq__table td { padding: 7px 8px; }
.cd--app .cq__btns .btn { flex: 1 1 100%; }
.cd--app .cq__browse-head input { flex: 1 1 100%; }
.cd--app .cq__toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; }

/* ---------- stage ---------- */
.cd--app .cd__stage { position: relative; display: block; padding: 0; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.cd--app #cdCanvas { display: block; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
.cd--app .cd__views { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; box-shadow: 0 4px 16px -6px rgba(36,28,32,.35); }
.cd--app .cd__views button { padding: 9px 18px; white-space: nowrap; }
.cd--app .cd__alt { position: absolute; inset: 64px 14px 12px; z-index: 4; }
.cd--app .cd__alt[hidden] { display: none; }
.cd--app .k3__cv { box-shadow: none; border: 1px solid var(--line-soft); }
.cd--app .cd__hint { position: absolute; left: 14px; bottom: 12px; z-index: 3; text-align: left; max-width: 34ch; font-size: .72rem; background: rgba(255,255,255,.85); padding: 6px 9px; border-radius: 8px; pointer-events: none; }
.cd--app .cd__sel { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; width: auto; max-width: calc(100% - 150px); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px -10px rgba(36,28,32,.45); border-color: var(--line-soft); }
.cd--app .cd__sel .cd__mini { padding: 8px 12px; border-radius: 8px; }
.cd--app .cd__sel input { font-size: 16px; width: 60px; border-radius: 6px; }
.cd--app .cd__stage:has(.cd__sel:not([hidden])) .cd__hint { display: none; }
.kda-zoom { position: absolute; right: 14px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px -8px rgba(36,28,32,.4); overflow: hidden; }
.kda-zoom .kda-ico { border-radius: 0; color: var(--ink); width: 44px; height: 44px; }
.kda-zoom .kda-ico + .kda-ico { border-top: 1px solid var(--line-soft); }
.kda-zoom .kda-ico:hover { background: var(--ground); }
.cd--app .cd__stage:has(.cd__alt:not([hidden])) .kda-zoom, .cd--app .cd__stage:has(.cd__alt:not([hidden])) .kda-hello { display: none; }

/* welcome card */
.kda-hello { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 20px; background: rgba(243,241,236,.9); overflow-y: auto; }
.kda-hello[hidden] { display: none; }
.kda-hello__card { background: #fff; border-radius: 20px; padding: clamp(20px, 3vw, 34px); max-width: 680px; width: 100%; box-shadow: 0 30px 60px -30px rgba(36,28,32,.5); text-align: center; }
.kda-hello__kick { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-dark); }
.kda-hello__card h2 { margin: 0 0 6px; font: 800 clamp(1.4rem, 3vw, 1.9rem) var(--font-display); }
.kda-hello__card > p { margin: 0 auto 18px; color: var(--ink-soft); max-width: 44ch; }
.kda-hello__tpls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kda-hello__tpls button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.kda-hello__tpls button:hover { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,102,140,.15); }
.kda-hello__tpls b { font-size: .92rem; }
.kda-hello__tpls small { font-size: .74rem; color: var(--ink-soft); }
.kda-hello__foot { margin: 16px 0 0 !important; font-size: .78rem; color: var(--ink-soft); }
/* little plan icons for each starter layout */
.kda-shape { position: relative; width: 64px; height: 48px; border: 2px solid var(--ink); border-radius: 3px; margin-bottom: 6px; background: var(--ground); }
.kda-shape::before, .kda-shape::after { content: ""; position: absolute; background: #cdb58f; }
.kda-shape--one-wall::before { left: 4px; right: 4px; top: 3px; height: 9px; }
.kda-shape--galley::before { left: 4px; right: 4px; top: 3px; height: 9px; }
.kda-shape--galley::after { left: 4px; right: 4px; bottom: 3px; height: 9px; }
.kda-shape--l-island::before { left: 3px; top: 3px; bottom: 3px; width: 9px; box-shadow: 0 0 0 0 transparent; }
.kda-shape--l-island::after { left: 3px; right: 3px; bottom: 3px; height: 9px; }
.kda-shape--l-island { background: linear-gradient(#cdb58f, #cdb58f) 60% 42% / 24px 10px no-repeat, var(--ground); }
.kda-shape--blank { border-style: dashed; }
.kda-shape--open-plan::before { left: 4px; right: 20px; top: 3px; height: 9px; }
.kda-shape--suite::before { right: 3px; top: 3px; bottom: 3px; width: 2px; background: var(--ink); }

/* ---------- phones and small tablets: bottom tabs + sheet ---------- */
@media (max-width: 899px) {
  .kda-top { gap: 6px; padding-left: 8px; padding-right: 8px; min-height: 54px; }
  .kda-brand { border: 0; padding: 0; margin: 0; }
  .kda-brand span, .kda-saved, .kda-top [data-full] { display: none; }
  .kda-brand img { width: 32px; height: 32px; }
  .kda-top__name { flex: 1; min-width: 0; }
  .kda-top__name input { width: 100%; font-size: 16px; padding: 7px 8px; }
  .kda-top__sp { display: none; }
  .kda-pill { padding: 5px 10px; min-height: 40px; }
  .kda-pill small { display: none; }
  .kda-pill b { font-size: .92rem; }
  .kda-top .kda-ico { width: 38px; height: 38px; }
  .cd--app .cd__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cd--app .cd__stage { grid-row: 1; grid-column: 1; }
  .kda-rail { grid-row: 2; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow: visible; z-index: 20; }
  .kda-rail button { flex: 1; height: 50px; justify-content: center; padding: 0; font-size: .6rem; letter-spacing: -.01em; gap: 3px; min-width: 0; }
  .kda-rail button svg { width: 22px; height: 22px; }
  .kda-rail button[data-open="price"] { margin-top: 0; }
  .kda-panel, .kda--panel .kda-panel, .kda--wide .kda-panel { position: absolute; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); width: auto; max-height: 62%; z-index: 15; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px -20px rgba(36,28,32,.45); transform: translateY(105%); transition: transform .22s ease; overflow-y: auto; }
  .kda--panel .kda-panel { transform: none; }
  .kda--wide .kda-panel { max-height: 80%; }
  .cd--app .cd__main { position: relative; }
  .kda-sec__head { padding-top: 16px; }
  .kda-sec__head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
  .cd--app .cd__hint { display: none; }
  .cd--app .cd__views { top: 8px; }
  .cd--app .cd__views button { padding: 8px 12px; font-size: .8rem; }
  .cd--app .cd__alt { inset: 56px 6px 6px; }
  .cd--app .cd__sel { left: 8px; right: 64px; bottom: 10px; transform: none; max-width: none; padding: 8px 10px; gap: 6px; font-size: .8rem; }
  .cd--app .cd__seldist { display: none; }
  .kda-zoom { right: 8px; bottom: 10px; }
  .kda-hello__tpls { grid-template-columns: repeat(2, 1fr); }
  .kda-hello { align-items: start; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .kda-panel { transition: none; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- our products ---------- */
.kda-pb__cats { display: flex; gap: 6px; margin: 0 -16px 10px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.kda-pb__cats::-webkit-scrollbar { display: none; }
.kda-pb__cats button { flex: 0 0 auto; white-space: nowrap; }
.kda-pb__cats button, .kda-pb__w button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font: 700 .78rem var(--font-body); color: var(--ink-soft); cursor: pointer; min-height: 36px; }
.kda-pb__cats button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.kda-pb__w { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.kda-pb__w button { padding: 6px 10px; min-height: 32px; }
.kda-pb__w button.is-on { background: var(--sky); border-color: var(--blue); color: var(--blue); }
.kda-pb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.kda-pc { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px; background: #fff; min-width: 0; }
.kda-pc__img { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; }
.kda-pc__img img { width: 100%; height: 100%; object-fit: contain; }
.kda-pc__img i { position: absolute; left: 6px; top: 6px; font: 800 .68rem var(--font-body); font-style: normal; background: var(--navy); color: #fff; padding: 3px 7px; border-radius: 6px; }
.kda-pc small { font-size: .68rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.kda-pc__t { font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.kda-pc__row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kda-pc__row b { font: 800 .95rem var(--font-display); }
.kda-pc__row em { font-style: normal; font-size: .66rem; color: var(--ember-dark); font-weight: 700; }
.kda-pc__go { margin-top: auto; border: 0; background: var(--blue); color: #fff; border-radius: 9px; padding: 9px 6px; font: 700 .78rem var(--font-body); cursor: pointer; min-height: 38px; }
.kda-pc__go:hover { background: var(--blue-700, #2d5373); }
.kda-pc__qty { margin-top: auto; display: flex; align-items: center; justify-content: space-between; background: var(--sky); border-radius: 9px; min-height: 38px; }
.kda-pc__qty button { width: 36px; height: 38px; border: 0; background: none; font: 800 1.1rem var(--font-body); color: var(--blue); cursor: pointer; }
.kda-pc__qty span { font-size: .74rem; font-weight: 700; color: var(--blue); }
.kda-generic { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.kda-generic summary { cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--ink-soft); padding: 6px 0; }
.kda-generic .cd__grp { margin-top: 10px; }
.kda-toast { position: absolute; left: 50%; top: 76px; transform: translate(-50%, -12px); z-index: 30; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .86rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: min(92vw, 440px); text-align: center; }
.kda-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kda-toast .kda-link { color: #ffcf96; }

/* products in the plan list and the selection card */
.cd__prods ul { list-style: none; padding: 0; }
.cd__prods li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "img t t" "img q p"; gap: 2px 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.cd__prods li img { grid-area: img; width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line-soft); }
.cd__prods li a { grid-area: t; font-size: .78rem; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd__prods li b { grid-area: p; font-size: .82rem; }
.cd__pq { grid-area: q; display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--ink-soft); }
.cd__pq button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; font-weight: 800; }
.cd__ptot { display: flex; justify-content: space-between; margin: 10px 0; font-size: .9rem; }
.cd__selprod { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; text-decoration: none; color: var(--ink); background: var(--ground); border-radius: 10px; padding: 4px 10px 4px 4px; }
.cd__selprod img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 7px; }
.cd__selprod span { font-size: .74rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd__selprod b { font-size: .8rem; white-space: nowrap; }
@media (max-width: 899px) { .cd__selprod span { display: none; } .kda-toast { top: 62px; } }

/* chosen cabinet line on top of the Cabinets panel */
.cd--app .cq--browse { border: 0; padding: 0; box-shadow: none; background: none; }
.cq__now { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ground); border-radius: 12px; margin-bottom: 12px; }
.cq__now > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cq__now small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cq__now b { font: 800 .95rem var(--font-display); }
.cq__now em { font-style: normal; font-size: .74rem; color: var(--ink-soft); }
.cq__chip { width: 40px; height: 48px; border-radius: 6px; background: var(--c); flex: 0 0 auto; box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 5px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.12); }
.cd--app .cq--browse .cq__browse { margin: 0; padding: 0; border: 0; }
.cd--app .cq--browse .cq__browse-head h3 { display: none; }
.cd--app .cq--browse .cq__skus { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
.cd--app .cq--browse .cq__tabs { gap: 5px; }
.cd--app .cq--browse .cq__tabs button { min-height: 34px; }
.k3p__line { display: flex; align-items: center; gap: 8px; font-size: .82rem; margin: 0 0 10px; }
.k3p__line span { width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* store header only hosts the cart; the cart button lives in the top bar */
.kda-sfhost { display: none !important; }
.kda-cart { position: relative; color: #fff; background: transparent; border: 0; }
.kda-cart svg { width: 22px; height: 22px; }
.kda-cart .sf-cart-btn__count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ember); color: var(--navy); font: 800 .68rem/17px var(--font-body); text-align: center; padding: 0 4px; }
.kda-top .kda-cart:hover { background: rgba(255,255,255,.1); }
@media (max-width: 899px) {
  .cd--app .k3__bar, .cd--app .k3__actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cd--app .k3__bar::-webkit-scrollbar, .cd--app .k3__actions::-webkit-scrollbar { display: none; }
  .cd--app .k3__bar .cd__mini, .cd--app .k3__actions .cd__mini { flex: 0 0 auto; }
  .cd--app .k3__tip { display: none; }
}
.kda-pb__cats button small { font-weight: 600; opacity: .6; margin-left: 2px; }
/* studio backdrop behind the transparent 3D render */
.k3__gl { background: radial-gradient(ellipse at 50% 42%, #fbfaf8 0%, #ece9e3 62%, #e1ddd6 100%) !important; }

.kda-present { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; border-radius: 12px; font: 700 .86rem var(--font-body); cursor: pointer; }
.kda-present svg { width: 20px; height: 20px; }
.kda-present:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.kda-present:disabled { opacity: .6; cursor: progress; }
@media (max-width: 899px) { .kda-present { padding: 0 9px; min-height: 40px; } .kda-present span { display: none; } }

/* ---------- premium finish ---------- */
.kda-top { background: linear-gradient(180deg, #f7769c 0%, #c93b6a 100%); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px -12px rgba(226,73,122,.4); position: relative; z-index: 12; }
.kda-brand b { letter-spacing: -.005em; }
.kda-brand small { letter-spacing: .04em; }
.kda-rail { background: #fbfaf8; }
.kda-rail button { position: relative; transition: background .15s, color .15s; }
.kda-rail button.is-on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.kda-rail button[data-open="price"].is-on::before { background: var(--ember); }
.kda-panel { box-shadow: 8px 0 24px -20px rgba(36,28,32,.45); position: relative; z-index: 2; }
.kda-sec__head h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.cd--app .cd__views { background: rgba(255,255,255,.95); border-color: rgba(22,33,44,.1); }
.cd--app .cd__mini { border-radius: 10px; min-height: 36px; padding: 0 13px; font-weight: 700; border-color: rgba(22,33,44,.14); background: #fff; transition: border-color .15s, color .15s, box-shadow .15s; }
.cd--app .cd__mini:hover { box-shadow: 0 4px 12px -8px rgba(36,28,32,.5); }
.cd--app .k3__bar, .cd--app .k3__actions { gap: 6px; }
.kda-pc { transition: transform .15s, box-shadow .15s, border-color .15s; }
.kda-pc:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(36,28,32,.45); border-color: var(--line); }
.cd--app .cq__sku { transition: transform .15s, box-shadow .15s; }
.cd--app .cq__sku:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(36,28,32,.45); }

.kda-pill { box-shadow: 0 6px 16px -8px rgba(213,133,46,.7); }

/* ---------- feel: drag ghost, drop target, pick card, help, skeletons, motion ---------- */
.kda-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(36,28,32,.55); border: 2px solid transparent; max-width: 280px; transition: border-color .12s, box-shadow .12s; }
.kda-ghost img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; }
.kda-ghost b { display: block; font-size: .84rem; line-height: 1.25; }
.kda-ghost small { display: block; font-size: .72rem; color: var(--ink-soft); }
.kda-ghost.is-over { border-color: var(--blue); box-shadow: 0 18px 40px -14px rgba(58,102,140,.6); }
.kda-ghost.is-over small::before { content: "Release to place \2022  "; color: var(--blue); font-weight: 700; }
.kda--dragging, .kda--dragging * { cursor: grabbing !important; user-select: none; }
.cd--app .cd__stage.kda-drop::after { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--blue); border-radius: 14px; pointer-events: none; background: rgba(58,102,140,.04); }
.cd--app .kda-pc, .cd--app .cd__chip[data-cat] { cursor: grab; }
.kda-pick { position: absolute; z-index: 9; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; width: 290px; box-shadow: 0 18px 40px -16px rgba(36,28,32,.55); animation: kda-pop .16s ease-out; }
.kda-pick[hidden] { display: none; }
.kda-pick img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; flex: 0 0 auto; }
.kda-pick b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; line-height: 1.3; }
.kda-pick small { display: block; color: var(--ink-soft); font-size: .74rem; margin: 2px 0 4px; }
.kda-pick span { font-size: .8rem; }
.kda-help { position: absolute; inset: 0; z-index: 60; background: rgba(36,28,32,.42); display: grid; place-items: center; padding: 20px; animation: kda-fade .15s ease-out; }
.kda-help[hidden] { display: none; }
.kda-help__card { background: #fff; border-radius: 18px; width: min(720px, 100%); max-height: 90%; overflow: auto; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); animation: kda-pop .18s ease-out; }
.kda-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; padding: 16px 20px 22px; }
.kda-help__grid div { display: flex; gap: 12px; align-items: baseline; font-size: .86rem; }
.kda-help__grid kbd { flex: 0 0 150px; font: 700 .76rem var(--font-body); background: var(--ground); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; padding: 4px 8px; text-align: center; }
.kda-helpbtn { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; border-radius: 12px; padding: 10px 2px; font: 700 .7rem/1.1 var(--font-body); color: var(--ink-soft); cursor: pointer; }
.kda-helpbtn svg { width: 22px; height: 22px; }
.kda-helpbtn:hover { background: var(--ground); color: var(--ink); }
.kda-pc--skel { pointer-events: none; }
.kda-pc--skel i, .kda-pc--skel b, .kda-pc--skel em { display: block; border-radius: 8px; background: linear-gradient(90deg, #efede8 0%, #f8f7f4 50%, #efede8 100%); background-size: 200% 100%; animation: kda-shimmer 1.1s linear infinite; }
.kda-pc--skel i { aspect-ratio: 1; }
.kda-pc--skel b { height: 11px; margin-top: 8px; }
.kda-pc--skel b + b { width: 70%; }
.kda-pc--skel em { height: 36px; margin-top: 10px; }
.cd--app .cq__toast { display: none !important; }
.kda-toast .kda-link { margin-left: 6px; }
@keyframes kda-shimmer { to { background-position: -200% 0; } }
@keyframes kda-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kda-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
  .kda-sec:not([hidden]) { animation: kda-fade .18s ease-out; }
}
@media (max-width: 899px) {
  .kda-help__grid { grid-template-columns: 1fr; }
  .kda-help__grid kbd { flex-basis: 120px; }
  .kda-helpbtn { display: none; }
  .kda-pick { width: auto; left: 8px !important; right: 8px; top: auto !important; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .kda-pc--skel i, .kda-pc--skel b, .kda-pc--skel em, .kda-pick, .kda-help__card, .kda-sec { animation: none !important; } }

/* fill a wall */
.kda-fill { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.kda-fill button { min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font: 700 .82rem var(--font-body); color: var(--ink); cursor: pointer; }
.kda-fill button:hover { border-color: var(--blue); color: var(--blue); }
.kda-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.kda-check input { width: 18px; height: 18px; }
/* my designs */
.kda-libbtn { color: #fff; }
.kda-lib__card { width: min(920px, 100%); }
.kda-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 16px 20px; }
.kda-lib__new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border: 2px dashed var(--line); border-radius: 14px; background: var(--ground); color: var(--ink); cursor: pointer; font: inherit; }
.kda-lib__new svg { width: 30px; height: 30px; color: var(--blue); }
.kda-lib__new:hover { border-color: var(--blue); }
.kda-lib__new small { color: var(--ink-soft); }
.kda-lib__item { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.kda-lib__item:hover { box-shadow: 0 14px 30px -18px rgba(36,28,32,.5); transform: translateY(-2px); }
.kda-lib__item.is-cur { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(58,102,140,.2); }
.kda-lib__open { border: 0; padding: 0; background: #f6f5f2; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.kda-lib__open img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kda-lib__blank { display: block; width: 100%; height: 100%; }
.kda-lib__meta { padding: 10px 12px 4px; }
.kda-lib__meta b { display: block; font-size: .92rem; }
.kda-lib__meta small { color: var(--ink-soft); font-size: .74rem; }
.kda-lib__act { display: flex; gap: 4px; padding: 6px 8px 10px; flex-wrap: wrap; }
.kda-lib__act button { border: 0; background: none; color: var(--blue); font: 700 .76rem var(--font-body); padding: 6px; border-radius: 6px; cursor: pointer; }
.kda-lib__act button:hover { background: var(--sky); }
.kda-lib__act button[data-lib-del] { color: #a4372c; }
@media (max-width: 899px) { .kda-lib__grid { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; } .kda-lib__new { min-height: 150px; } }
/* top bar shrinks gracefully on laptops and tablets */
.kda-top { min-width: 0; }
.kda-top > * { flex-shrink: 0; }
.kda-top__name { flex-shrink: 1; min-width: 90px; }
.kda-top__name input { width: clamp(90px, 16vw, 240px); }
@media (max-width: 1180px) { .kda-saved { display: none; } .kda-brand small { display: none; } }
@media (max-width: 1040px) { .kda-present span { display: none; } .kda-present { padding: 0 10px; } .kda-brand b { font-size: .88rem; } }
@media (min-width: 900px) and (max-width: 960px) { .kda-brand span { display: none; } }

/* overlays cover the whole app, top bar included */
.kda-help { position: fixed; z-index: 80; }
.k3__mood { background: #c93b6a !important; color: #fff !important; border-color: #c93b6a !important; }
@media (max-width: 899px) { .kda-rail button { font-size: .69rem; letter-spacing: -.02em; } .kda-pc small { font-size: .72rem; } }

/* finish your kitchen */
.kda-finish { margin-bottom: 18px; }
.kda-finish:empty { display: none; }
.kda-finish__head { display: flex; justify-content: space-between; align-items: baseline; }
.kda-finish__head b { font: 800 1rem var(--font-display); }
.kda-finish__head span { font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.kda-finish__bar { height: 6px; border-radius: 3px; background: var(--ground); margin: 8px 0 10px; overflow: hidden; }
.kda-finish__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #5b8db5); border-radius: 3px; transition: width .4s ease; }
.kda-finish ul { list-style: none; margin: 0; padding: 0; }
.kda-finish li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.kda-finish li > div { flex: 1; min-width: 0; }
.kda-finish li b { display: block; font-size: .86rem; }
.kda-finish li em { font-style: normal; font-weight: 600; color: var(--ink-soft); font-size: .72rem; }
.kda-finish li small { display: block; font-size: .74rem; color: var(--ink-soft); }
.kda-finish__tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; }
.kda-finish li.is-done .kda-finish__tick { background: var(--ok, #1E7B4D); border-color: var(--ok, #1E7B4D); }
.kda-finish li.is-done b { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.kda-finish li button { border: 0; background: var(--sky); color: var(--blue); font: 700 .78rem var(--font-body); padding: 8px 12px; border-radius: 9px; cursor: pointer; min-height: 34px; }
.kda-finish li button:hover { background: var(--blue); color: #fff; }
.kda-badge { position: absolute; top: 4px; right: 12px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ember); color: var(--navy); font: 800 .66rem/18px var(--font-body); font-style: normal; text-align: center; padding: 0 4px; }
.kda-badge[hidden] { display: none; }
.kda-rail button { position: relative; }
.kda-measure.is-on { background: var(--ember) !important; color: var(--navy) !important; }
.kda-sharebtn { color: #fff; }
@media (max-width: 899px) { .kda-badge { top: 2px; right: 6px; } .kda-sharebtn { display: none; } }

/* right-click menu */
.kda-ctx { position: fixed; z-index: 120; min-width: 230px; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 20px 44px -16px rgba(36,28,32,.55), 0 0 0 1px rgba(22,33,44,.06); animation: kda-pop .12s ease-out; }
.kda-ctx[hidden] { display: none; }
.kda-ctx p { margin: 0; padding: 6px 10px 8px; font-size: .74rem; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.kda-ctx button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; border: 0; background: none; padding: 9px 10px; border-radius: 8px; font: 600 .86rem var(--font-body); color: var(--ink); cursor: pointer; text-align: left; }
.kda-ctx button:hover, .kda-ctx button:focus-visible { background: var(--sky); color: var(--blue); outline: none; }
.kda-ctx button.is-del { color: #a4372c; }
.kda-ctx button.is-del:hover { background: #fbeceb; }
.kda-ctx kbd { font: 600 .7rem var(--font-body); color: var(--ink-soft); background: var(--ground); border-radius: 5px; padding: 2px 6px; }

/* design it for me */
.kda-dfm__card { width: min(620px, 100%); }
.kda-dfm__form { padding: 14px 20px 20px; display: grid; gap: 14px; }
.kda-dfm__form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.kda-dfm__form legend { font: 800 .78rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; padding: 0; }
.kda-dfm__form label { font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.kda-dfm__form input[type=number], .kda-dfm__form select { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; width: 74px; }
.kda-dfm__form select { width: 100%; }
.kda-dfm__opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.kda-dfm__opts--3 { grid-template-columns: repeat(3, 1fr); }
.kda-dfm__opt { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 4px !important; padding: 12px 6px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; }
.kda-dfm__opt input { position: absolute; opacity: 0; pointer-events: none; }
.kda-dfm__opt:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,102,140,.15); background: var(--sky); }
.kda-dfm__opt b { font-size: .84rem; }
.kda-dfm__opt small { font-size: .72rem; color: var(--ink-soft); font-weight: 500; }
.kda-dfm__opt .kda-shape { width: 48px; height: 36px; margin: 0; }
.kda-dfm__cta { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px; margin-bottom: 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #10222F, #25475f); color: #fff; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 12px 26px -16px rgba(36,28,32,.8); }
.kda-dfm__cta svg { width: 26px; height: 26px; color: #F5C27E; flex: 0 0 auto; }
.kda-dfm__cta b { display: block; font: 800 1rem var(--font-display); }
.kda-dfm__cta small { color: rgba(255,255,255,.72); font-size: .78rem; }
.kda-dfm__cta:hover { filter: brightness(1.08); }
.kda-hello__dfm { margin: 14px auto 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #10222F; color: #fff; font: 700 .9rem var(--font-body); padding: 12px 18px; border-radius: 12px; cursor: pointer; }
.kda-hello__dfm svg { width: 18px; height: 18px; color: #F5C27E; }
/* budget dial */
.kda-dial { margin-bottom: 18px; }
.kda-dial:empty { display: none; }
.kda-dial__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.kda-dial__head b { font: 800 1rem var(--font-display); }
.kda-dial__head span { font-size: .76rem; color: var(--ink-soft); font-weight: 700; }
.kda-dial__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kda-dial__opts button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 6px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.kda-dial__opts button:hover { border-color: var(--blue); }
.kda-dial__opts b { font-size: .86rem; }
.kda-dial__opts small { font: 800 .9rem var(--font-display); color: var(--ember-dark); }
@media (max-width: 899px) { .kda-dfm__opts { grid-template-columns: repeat(3, 1fr); } }
/* tour + record */
.k3__tour { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.k3__rec { color: #b3261e !important; }

.kda-drawbtn { color: #fff; }
@media (max-width: 899px) { .kda-drawbtn { display: none; } }

/* first-person walk */
.k3-walk[hidden] { display: none; }
.k3-walk__tip { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 6; margin: 0; background: rgba(36,28,32,.82); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: .8rem; white-space: nowrap; pointer-events: none; animation: kda-fade .3s ease-out; }
.k3-walk__tip b { color: #F5C27E; margin-right: 6px; }
.k3-walk__pad { position: absolute; left: 16px; bottom: 58px; z-index: 6; display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 6px; }
.k3-walk__pad button { border: 0; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 6px 16px -8px rgba(36,28,32,.5); font-size: 1rem; color: var(--ink); cursor: pointer; touch-action: none; user-select: none; }
.k3-walk__pad button:active { background: var(--ember); }
.k3-walk__pad [data-k="w"] { grid-column: 2; grid-row: 1; }
.k3-walk__pad [data-k="a"] { grid-column: 1; grid-row: 2; }
.k3-walk__pad [data-k="s"] { grid-column: 2; grid-row: 2; }
.k3-walk__pad [data-k="d"] { grid-column: 3; grid-row: 2; }
.k3-walk__exit { position: absolute; right: 16px; top: 56px; z-index: 6; border: 0; background: #fff; border-radius: 10px; padding: 8px 14px; font: 700 .82rem var(--font-body); box-shadow: 0 6px 16px -8px rgba(36,28,32,.5); cursor: pointer; }
html.kda-walking .k3__gl { cursor: grab; }
@media (hover: hover) and (pointer: fine) { .k3-walk__pad { opacity: .75; } }
@media (max-width: 899px) { .k3-walk__tip span { display: none; } .k3-walk__tip { top: 10px; } .k3-walk__exit { top: 10px; } }

/* brand stone picker */
.kda-stone__card { width: min(980px, 100%); display: flex; flex-direction: column; max-height: 88%; }
.kda-stone__top { padding: 12px 20px 0; }
.kda-stone__top .kda-pb__cats { margin: 0 0 10px; padding: 0 0 4px; }
.kda-stone__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 6px 20px 12px; overflow-y: auto; }
.kda-stone__sw { border: 2px solid transparent; background: #fff; border-radius: 12px; padding: 5px; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 5px; }
.kda-stone__sw i { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s; }
.kda-stone__sw i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kda-stone__sw:hover i { transform: scale(1.03); }
.kda-stone__sw b { font-size: .8rem; line-height: 1.25; }
.kda-stone__sw small { font-size: .7rem; color: var(--ink-soft); margin-top: -3px; }
.kda-stone__sw.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,102,140,.15); }
.kda-stone__foot { padding: 0 20px 16px; margin: 0; }
.k3p__brandstone { border: 1px dashed var(--blue); background: var(--sky); color: var(--blue); font: 700 .74rem var(--font-body); border-radius: 999px; padding: 6px 10px; cursor: pointer; margin-right: 4px; }
.k3p__brandstone:hover { background: var(--blue); color: #fff; }
@media (max-width: 899px) { .kda-stone__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 12px 12px; } }

/* 3D edit card */
.kda-pick { display: block; width: 350px; padding: 12px; }
.kda-pick__head { display: flex; gap: 10px; align-items: center; }
.kda-pick__tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 8px; }
.kda-pick__tools button { flex: 1 1 60px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--line-soft); background: #fff; border-radius: 10px; padding: 7px 4px; cursor: pointer; font: 700 .68rem var(--font-body); color: var(--ink); }
.kda-pick__tools button svg { width: 18px; height: 18px; }
.kda-pick__tools button:hover { background: var(--sky); color: var(--blue); border-color: var(--sky-line); }
.kda-pick__tools button.is-del { color: #a4372c; }
.kda-pick__tools button.is-del:hover { background: #fbeceb; }
.kda-pick__foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .74rem; color: var(--ink-soft); }
.kda-pick__foot span { flex: 1; }
@media (max-width: 899px) { .kda-pick { width: auto; } .kda-pick__tools button span { font-size: .62rem; } }

/* bath */
.kda-bathcats { display: flex; flex-wrap: wrap; gap: 6px; }
.kda-bathcats button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; font: 700 .78rem var(--font-body); color: var(--ink); cursor: pointer; min-height: 36px; }
.kda-bathcats button:hover { border-color: var(--blue); color: var(--blue); }
.kda-shape--primary-bath::before { left: 4px; right: 40%; top: 3px; height: 9px; }
.kda-shape--primary-bath::after { right: 4px; bottom: 3px; width: 26px; height: 18px; background: #bfe0dc; }

/* countertop take-off */
.kda-ctr { margin-bottom: 18px; }
.kda-ctr:empty { display: none; }
.kda-ctr__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.kda-ctr__head b { font: 800 1rem var(--font-display); }
.kda-ctr__head span { font: 800 .9rem var(--font-display); color: var(--ember-dark); }
.kda-ctr__pick { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--ground); border-radius: 12px; margin-bottom: 8px; }
.kda-ctr__pick i { width: 44px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.kda-ctr__pick i.kda-ctr__none { background: repeating-linear-gradient(45deg, #e8e4dc 0 6px, #f4f1ea 6px 12px); }
.kda-ctr__pick > div { flex: 1; min-width: 0; }
.kda-ctr__pick b { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kda-ctr__pick small { font-size: .72rem; color: var(--ink-soft); }
.kda-ctr__rows { list-style: none; margin: 0 0 10px; padding: 0; font-size: .82rem; }
.kda-ctr__rows li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.kda-ctr__quote { border-radius: 10px; }

/* phone: eight tools now, so the bottom bar scrolls sideways with a hint of the next tab */
@media (max-width: 899px) {
  .kda-rail { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kda-rail::-webkit-scrollbar { display: none; }
  .kda-rail button { flex: 0 0 68px; scroll-snap-align: start; font-size: .64rem; letter-spacing: 0; }
  .kda-rail button span { white-space: nowrap; }
  .kda-rail::after { content: ""; position: sticky; right: 0; flex: 0 0 18px; margin-left: -18px; background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none; }
}

/* RK Parisi family of companies in the top bar */
.kda-brand img { background: #fff; padding: 3px; }
.kda-family { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.14); }
.kda-family a { display: inline-flex; opacity: .72; transition: opacity .15s, transform .15s; }
.kda-family a:hover { opacity: 1; transform: scale(1.06); }
.kda-family img { height: 18px; width: auto; filter: brightness(0) invert(1); }
@media (max-width: 1360px) { .kda-family { gap: 10px; padding: 0 10px; } .kda-family img { height: 15px; } }
@media (max-width: 1180px) { .kda-family { display: none; } }

.kda-furnish { margin-top: 10px; border-radius: 10px; }

.cd--app .cq__brands { grid-template-columns: repeat(2, 1fr); }

/* family strip, take two: colour logos on a light plate */
.kda-family { background: #f1f3f5; border-radius: 12px; padding: 5px 12px 5px 10px; gap: 16px; border-left: 0; }
.kda-family span { font: 700 .62rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-right: -4px; }
.kda-family a { opacity: 1; }
.kda-family img { height: 24px; filter: none; }
.kda-brand img { background: #fff; padding: 4px; width: 38px; height: 38px; }
@media (max-width: 1360px) { .kda-family img { height: 20px; } .kda-family { gap: 12px; } }
/* product cards, take two */
.kda-pb__grid { gap: 12px; }
.kda-pc { padding: 0; overflow: hidden; border-radius: 14px; gap: 0; box-shadow: 0 1px 0 rgba(22,33,44,.04); }
.kda-pc__img { border-radius: 0; background: #fff; padding: 10px; }
.kda-pc__img img { object-fit: contain; transition: transform .25s ease; }
.kda-pc:hover .kda-pc__img img { transform: scale(1.04); }
.kda-pc__img i { left: auto; right: 8px; top: 8px; background: rgba(36,28,32,.85); }
.kda-pc__mk { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 0; min-height: 30px; }
.kda-pc__logo { height: 22px; max-width: 70%; width: auto; object-fit: contain; object-position: left; }
.kda-pc__mk small { margin: 0; }
.kda-pc__mk em { font-style: normal; font-size: .62rem; color: var(--ember-dark); font-weight: 700; white-space: nowrap; }
.kda-pc__t { padding: 4px 10px 0; font-size: .8rem; }
.kda-pc__row { padding: 6px 10px 0; }
.kda-pc__row b { font-size: 1rem; }
.kda-pc__go, .kda-pc__qty { margin: 8px 10px 10px; }
.kda-pc__go { border-radius: 10px; }
/* brand tabs with logos (stone picker) */
.kda-pb__cats--logos button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; }
.kda-pb__cats--logos button img { height: 16px; width: auto; max-width: 110px; object-fit: contain; }
.kda-pb__cats--logos button.is-on { background: var(--ink); }
.kda-pb__cats--logos button.is-on img { filter: brightness(0) invert(1); }

/* product browser: category tiles, brand chips, sort */
.kda-find--big { padding: 14px 14px; font-size: 16px; border-radius: 12px; border-color: var(--line); background: #fff; box-shadow: 0 6px 18px -14px rgba(36,28,32,.5); margin-bottom: 14px; }
.kda-pb__gh { font: 800 .78rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.kda-pb__gh .kda-link { font-size: .78rem; text-transform: none; letter-spacing: 0; }
.kda-pb__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kda-tile { border: 1px solid var(--line-soft); background: #fff; border-radius: 14px; padding: 8px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.kda-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(36,28,32,.45); border-color: var(--line); }
.kda-tile i { display: block; aspect-ratio: 4 / 3; border-radius: 9px; background: #fff center / contain no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.kda-tile b { font-size: .8rem; line-height: 1.25; }
.kda-tile small { font-size: .7rem; color: var(--ink-soft); }
.kda-pb__crumb { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--ink-soft); margin-bottom: 4px; }
.kda-pb__crumb .kda-link { text-decoration: none; }
.kda-pb__crumb span::before { content: "/ "; opacity: .5; }
.kda-pb__title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
.kda-pb__title h3 { margin: 0; font: 800 1.15rem var(--font-display); }
.kda-pb__title span { font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.kda-pb__brands { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px 4px; }
.kda-pb__brands::-webkit-scrollbar { display: none; }
.kda-pb__brands button { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 700 .76rem var(--font-body); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; }
.kda-pb__brands button img { height: 18px; width: auto; max-width: 96px; object-fit: contain; }
.kda-pb__brands button.is-on { border-color: var(--blue); background: var(--sky); color: var(--blue); }
.kda-pb__bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.kda-pb__bar .kda-pb__w { margin: 0; flex: 1; }
.kda-pb__sort { font: 700 .76rem var(--font-body); padding: 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); flex: 0 0 auto; }
.kda-pb__rgrp { margin-bottom: 8px; }
.kda-pb__results .kda-pb__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1500px) { .kda--wide .kda-panel { width: 620px; } .kda-pb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kda-pb__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .kda--wide .kda-panel { width: 720px; } }
@media (max-width: 899px) { .kda-pb__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kda-pb__results .kda-pb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kda-srchbtn { display: none; } }
.kda-srchbtn { color: #fff; }

/* quick view */
.kda-pc__img, .kda-pc__t { border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.kda-pc__img { width: 100%; display: block; }
.kda-pc__t { background: none; display: block; width: 100%; }
.kda-pc__t:hover { color: var(--blue); }
.kda-qv__card { width: min(1040px, 100%); max-height: 92%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); position: relative; overflow: hidden; }
.kda-qv__x { position: absolute; top: 10px; right: 10px; z-index: 3; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.kda-qv__media { background: #fff; padding: 28px 24px 18px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line-soft); min-height: 0; }
.kda-qv__main { flex: 1; min-height: 300px; display: grid; place-items: center; }
.kda-qv__main img { max-width: 100%; max-height: 440px; object-fit: contain; }
.kda-qv__thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kda-qv__thumbs button { width: 56px; height: 56px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; padding: 3px; cursor: pointer; }
.kda-qv__thumbs button.is-on { border-color: var(--ink); }
.kda-qv__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.kda-qv__body { padding: 26px 26px 26px; overflow: auto; min-height: 0; }
.kda-qv__body .kda-pc__mk { padding: 0; min-height: 26px; }
.kda-qv__body .kda-pc__logo { height: 22px; }
.kda-qv__t { margin: 8px 0 6px; font: 800 1.15rem/1.3 var(--font-display); }
.kda-qv__price { display: flex; align-items: baseline; gap: 10px; }
.kda-qv__price b { font-size: 1.45rem; }
.kda-qv__price s { color: var(--ink-soft); }
.kda-qv__price em { font-style: normal; font-size: .72rem; color: var(--ember-dark); font-weight: 700; }
.kda-qv__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.kda-qv__facts span { font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--ground); border-radius: 999px; padding: 4px 10px; }
.kda-qv__vars { display: flex; flex-wrap: wrap; gap: 6px; }
.kda-qv__vars button { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 10px; font: 700 .76rem var(--font-body); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.kda-qv__vars button small { font-weight: 600; color: var(--ink-soft); }
.kda-qv__vars button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.kda-qv__vars button.is-on small { color: rgba(255,255,255,.75); }
.kda-qv__vars button[data-out] { opacity: .55; }
.kda-qv__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; align-items: center; }
.kda-qv__acts .btn { border-radius: 10px; }
.kda-qv__acts .kda-pc__qty { margin: 0; min-width: 190px; }
.kda-qv__copy { font-size: .84rem; line-height: 1.55; color: var(--ink); max-height: 7.8em; overflow: hidden; position: relative; }
.kda-qv__copy:not(.is-open)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2.4em; background: linear-gradient(transparent, #fff); }
.kda-qv__copy.is-open { max-height: none; }
.kda-qv__copy p { margin: 0 0 .6em; } .kda-qv__copy ul { padding-left: 1.2em; margin: 0 0 .6em; } .kda-qv__copy h1, .kda-qv__copy h2, .kda-qv__copy h3, .kda-qv__copy h4 { font-size: .9rem; margin: .6em 0 .3em; } .kda-qv__copy table { font-size: .78rem; border-collapse: collapse; } .kda-qv__copy td, .kda-qv__copy th { border: 1px solid var(--line-soft); padding: 3px 6px; }
.kda-qv__row { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.kda-qv__mini { border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; padding: 6px; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.kda-qv__mini:hover { border-color: var(--line); box-shadow: 0 8px 18px -14px rgba(36,28,32,.5); }
.kda-qv__mini img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.kda-qv__mini span { font-size: .68rem; line-height: 1.3; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kda-qv__mini b { font-size: .76rem; }
@media (max-width: 899px) {
  .kda-qv__card { grid-template-columns: 1fr; overflow: auto; max-height: 94%; }
  .kda-qv__media { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 20px 16px 12px; }
  .kda-qv__main { min-height: 200px; } .kda-qv__main img { max-height: 260px; }
  .kda-qv__body { padding: 18px 16px 24px; overflow: visible; }
}

/* favourites + compare + complete the look */
.kda-pc { position: relative; }
.kda-fav { position: absolute; top: 8px; left: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); opacity: 0; transition: opacity .15s, transform .15s; }
.kda-fav svg { width: 16px; height: 16px; }
.kda-pc:hover .kda-fav, .kda-fav.is-on, .kda-fav:focus-visible { opacity: 1; }
.kda-fav.is-on { color: #d63d57; } .kda-fav.is-on svg path { fill: currentColor; }
.kda-fav:hover { transform: scale(1.08); }
@media (hover: none) { .kda-fav { opacity: 1; } }
.kda-pb__favs { background: linear-gradient(180deg, #fff7f8, #fff); border: 1px solid #f3d7dc; border-radius: 14px; padding: 4px 12px 12px; margin-bottom: 8px; }
.kda-pb__favs .kda-pb__gh { margin-top: 10px; gap: 12px; flex-wrap: wrap; }
.kda-pb__favs .kda-pb__gh small { font-weight: 700; color: #d63d57; margin-left: 4px; }
.kda-pb__favs .kda-pb__gh .kda-link { margin-left: auto; }
.kda-qv__fav { position: absolute; top: 10px; right: 56px; z-index: 3; }
.kda-qv__fav .kda-fav { position: static; opacity: 1; width: 36px; height: 36px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.kda-qv__mini small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
.kda-cmp { overflow-x: auto; }
.kda-cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .8rem; }
.kda-cmp th { width: 84px; text-align: left; font: 700 .7rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 8px 6px 8px 0; vertical-align: top; }
.kda-cmp td { padding: 8px 6px; border-top: 1px solid var(--line-soft); vertical-align: top; position: relative; min-width: 0; }
.kda-cmp tr:first-child td { border-top: 0; }
.kda-cmp__img { width: 100%; aspect-ratio: 1; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; padding: 6px; cursor: pointer; }
.kda-cmp__img img { width: 100%; height: 100%; object-fit: contain; }
.kda-cmp__x { position: absolute; top: 12px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--ink-soft); box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; display: grid; place-items: center; }
.kda-cmp__x svg { width: 12px; height: 12px; }
.kda-cmp__t { text-decoration: none; text-align: left; font-weight: 700; font-size: .78rem; line-height: 1.3; color: var(--ink); }
.kda-cmp td b { font-size: 1rem; } .kda-cmp td b.is-lo { color: #1a7f4b; } .kda-cmp td small { display: block; font-size: .66rem; color: #1a7f4b; font-weight: 700; }
.kda-cmp .ok { color: #1a7f4b; font-weight: 700; } .kda-cmp .so { color: var(--ember-dark); font-weight: 700; }
.kda-cmp .kda-pc__go { margin: 0; }

.kda-pb__recent { margin-bottom: 6px; }
.kda-pb__recent .kda-qv__mini { background: #fff; }

/* 3D bar: wall modes + grid */
.k3__seg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(22,33,44,.14); border-radius: 10px; background: #fff; padding: 2px; min-height: 36px; }
.k3__seg b { font: 700 .68rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 0 6px 0 8px; }
.k3__seg button { border: 0; background: none; font: 700 .76rem var(--font-body); color: var(--ink-soft); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.k3__seg button.is-on { background: var(--ink); color: #fff; }
.cd--app .k3__grid.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 899px) { .k3__seg b { display: none; } }

/* OpalSketch: the brand and its marble-green palette */
html.kda-page { --navy: #2b3137; --blue: #c93b6a; --blue-dark: #1f2429; --sky: #fff0f4; --ink: #1f2429; --ember: #f7769c; --ember-dark: #c93b6a; --sand: #f3eef0; }
.kda-top { background: linear-gradient(180deg, #f7769c 0%, #c93b6a 100%); }
.kda-brand { gap: 8px; }
.kda-brand__logo { height: 36px; width: auto; border-radius: 8px; background: #fff; padding: 4px 8px; }
.kda-brand__mark { display: none; }
.kda-brand small { color: rgba(255,255,255,.72); }
.kda-pill { background: #f3eef0; color: #2b3137; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.kda-pill:hover { background: #fff; }
.kda-rail button.is-on { background: #fff0f4; color: #1f2429; }
.kda-rail button.is-on::before { background: #c93b6a; }
.btn--primary, .kda-pc__go { background: #1f2429; border-color: #1f2429; }
.btn--primary:hover, .kda-pc__go:hover { background: #c93b6a; border-color: #c93b6a; }
.kda-tile:hover, .kda-pc:hover { border-color: #f7769c; }
.kda-fav.is-on { color: #b5433c; }
.kda-family { background: #fff; }
@media (max-width: 1180px) { .kda-brand small { display: none; } }
@media (max-width: 899px) { .kda-brand__logo { display: none; } .kda-brand__mark { display: block; width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 2px; } .kda-brand span { display: none; } }

/* top bar, tidy: the wordmark at full size, the family strip inline only on wide screens, a dropdown elsewhere */
.kda-brand .kda-brand__logo { width: auto; height: 34px; padding: 4px 9px; border-radius: 9px; background: #fff; display: block; }
.kda-brand .kda-brand__mark { display: none; }
.kda-brand { border-right: 0; padding-right: 4px; }
.kda-brand small { font-size: .68rem; letter-spacing: .03em; color: rgba(255,255,255,.62); }
@media (max-width: 1180px) { .kda-brand span { display: none; } }
.kda-famdd { position: relative; margin-left: 2px; }
.kda-famdd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.78); font: 700 .7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.kda-famdd summary::-webkit-details-marker { display: none; }
.kda-famdd summary i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.kda-famdd summary:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.kda-famdd .kda-family { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); min-width: 200px; }
.kda-famdd .kda-family span { display: none; }
.kda-famdd .kda-family img { height: 22px; }
.kda-famdd.is-inline summary { display: none; }
.kda-famdd.is-inline .kda-family { position: static; flex-direction: row; align-items: center; gap: 12px; background: rgba(255,255,255,.94); border-radius: 9px; padding: 0 10px; height: 34px; box-shadow: none; min-width: 0; }
.kda-famdd.is-inline .kda-family span { display: inline; font-size: .58rem; letter-spacing: .12em; }
.kda-famdd.is-inline .kda-family img { height: 17px; }
@media (max-width: 899px) { .kda-famdd { display: none; } .kda-brand .kda-brand__logo { display: none; } .kda-brand .kda-brand__mark { display: block; width: 34px; height: 34px; padding: 2px; border-radius: 8px; background: #fff; } }
.kda-top__name input { background: rgba(255,255,255,.1); border-color: transparent; }
.kda-top__name input:focus { background: #fff; }
.kda-saved { font-size: .7rem; }

.kda-brand .kda-brand__logo { height: 42px; padding: 4px 10px; }
.kda-top { min-height: 62px; }
@media (max-width: 1040px) { .kda-brand .kda-brand__logo { height: 36px; } }

/* three ways to buy: PoshHaus (products), Shop Design Build (products + labour), Builders Fixtures (builder + homeowner pricing) */
.kda-ways { margin: 18px 0 8px; }
.kda-ways__grid { display: grid; gap: 10px; }
.kda-way { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 14px 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.kda-way::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f2429; }
.kda-way--poshhaus::before { background: #3a668c; } .kda-way--buildersfixtures::before { background: #d5852e; }
.kda-way:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(36,28,32,.5); border-color: var(--line); }
.kda-way img { height: 22px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.kda-way b { font: 800 .92rem var(--font-display); }
.kda-way span { font-size: .78rem; line-height: 1.45; color: var(--ink-soft); }
.kda-way em { font-style: normal; font-weight: 700; font-size: .8rem; color: #1f2429; margin-top: 4px; }
.kda-way--poshhaus em { color: #3a668c; } .kda-way--buildersfixtures em { color: var(--ember-dark); }
.kda-ways--pb { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.kda-ways--pb .kda-ways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .kda-ways--pb .kda-ways__grid { grid-template-columns: 1fr; } }
@media (min-width: 1500px) { .kda--wide .kda-ways--pb .kda-ways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 3D: the floating label under the pointer */
.k3__label { position: absolute; z-index: 8; pointer-events: none; background: rgba(20,32,27,.92); color: #fff; border-radius: 10px; padding: 7px 10px; font: 600 .74rem/1.35 var(--font-body); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); max-width: 240px; }
.k3__label[hidden] { display: none; }
.k3__label b { display: block; font-weight: 800; margin-bottom: 1px; }
.k3__label small { display: block; margin-top: 3px; color: rgba(255,255,255,.62); font-size: .66rem; }

.kda-hello__kick { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; color: var(--ink-soft); letter-spacing: .12em; }
.kda-hello__kick img { height: 52px; width: auto; }

/* audit fixes: readable active wall tab in elevations; rail keeps one lit tab */
.cd--app .cd__mini.cd__mini--go { background: var(--ink); color: #fff; border-color: var(--ink); }
.cd--app .cd__mini.cd__mini--go:hover { background: #c93b6a; border-color: #c93b6a; }
.cd__chip--gen { border-style: dashed; }

/* price panel: the chosen line folds the picker away */
.cq__pick { margin-bottom: 14px; }
.cq__pick > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cq__pick > summary::-webkit-details-marker { display: none; }
.cq__pick > summary small { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.cq__pick > summary b { font-size: .95rem; }
.cq__pick > summary em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--blue); text-decoration: underline; font-size: .82rem; white-space: nowrap; }
.cq__pick[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.cq__pick[open] > summary em::after { content: " \2191"; }
.cq__pick[open] > .cq__head, .cq__pick[open] > .cq__brands, .cq__pick[open] > .cq__lines, .cq__pick[open] > .cq__opts { margin-left: 0; }
.cq__pick[open] > :not(summary) { border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding-left: 14px; padding-right: 14px; }
.cq__pick[open] > :last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; padding-bottom: 12px; }
.k3__meas { pointer-events: none; }
.cd--app .k3__meas-btn.is-on { background: var(--ember); color: #fff; border-color: var(--ember); }

.cd--app .k3__photos.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.kda-hello__back { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #e2e2dc); text-align: center; }
.kda-hello__back p { margin: 0 0 8px !important; font-size: .82rem; color: var(--ink-soft); }
.kda-hello__sites { display: flex; justify-content: center; align-items: center; gap: 18px 34px; flex-wrap: wrap; }
.kda-hello__sites a { display: inline-flex; opacity: .92; }
.kda-hello__sites a:hover { opacity: 1; }
.kda-hello__sites img { height: 46px; width: auto; max-width: 180px; object-fit: contain; }
.kda-hello__sites img[src*="shopdesignbuild"] { height: 62px; }   /* a stacked, square logo: taller so it reads as large as the wide ones */
@media (max-width: 480px) { .kda-hello__sites { gap: 14px 22px; } .kda-hello__sites img { height: 38px; max-width: 140px; } .kda-hello__sites img[src*="shopdesignbuild"] { height: 52px; } }
.kda-hello__back .kda-hello__about { margin: 10px 0 0 !important; }
.kda-hello__about a { color: var(--blue); font-weight: 600; text-decoration: underline; }

.kda-pc .kda-fav { opacity: 1; width: 32px; height: 32px; top: 10px; left: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.kda-pc .kda-fav:not(.is-on):hover { color: #b5433c; }
.kda-pc__row { padding: 0 10px; }
.kda-pc__stock { font-size: .68rem; font-weight: 700; color: var(--blue); background: var(--sky); border-radius: 999px; padding: 2px 8px; margin-left: auto; }
.kda-pc__go { margin: 8px 10px 0; }
.kda-pc__qty { margin: 8px 10px 0; }
.kda-pc__ph { display: block; text-align: center; margin: 2px 10px 10px; padding: 7px 4px 0; font: 600 .74rem var(--font-body); color: var(--blue); text-decoration: none; }
.kda-pc__ph:hover { text-decoration: underline; }

.kda-pb__shopbrands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kda-pb__shopbrands button { height: 52px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 8px 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kda-pb__shopbrands button:hover { border-color: var(--blue); box-shadow: 0 8px 18px -14px rgba(36,28,32,.5); }
.kda-pb__shopbrands img { max-width: 100%; max-height: 30px; object-fit: contain; }
.kda-pb__shopbrands span { font: 700 .74rem var(--font-body); color: var(--ink); text-align: center; }
.kda-pb__fins { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.kda-pb__fins button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px 6px 8px; font: 600 .76rem var(--font-body); color: var(--ink); cursor: pointer; }
.kda-pb__fins button i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.22); }
.kda-pb__fins button:hover { border-color: var(--blue); }
.kda-pb__fins button.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Settings and history panel */
.kda-hist{list-style:none;margin:8px 0 0;padding:0;max-height:46vh;overflow:auto}
.kda-hist li{margin:0}
.kda-hist button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-bottom:1px solid rgba(0,0,0,.08);background:none;font:inherit;font-size:13px;cursor:pointer;color:inherit}
.kda-hist button:hover{background:rgba(226,73,122,.08)}
.kda-hist button.is-on{background:rgba(226,73,122,.16);font-weight:600}

/* ===== OpalSketch viewer redesign (2026): quiet glass controls, calm canvas card ===== */
.cd--app .cd__stage { background: #f1eef0; padding: 0; }
.cd--app .cd__views { top: 14px; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid rgba(36,28,32,.08); box-shadow: 0 10px 30px -14px rgba(36,28,32,.45); }
.cd--app .cd__views button { border: 0; background: none; border-radius: 999px; padding: 8px 18px; font: 650 .84rem/1 Inter, system-ui, sans-serif; color: #5b6a63; transition: background .15s, color .15s; }
.cd--app .cd__views button:hover { color: #1f2429; }
.cd--app .cd__views button.is-on { background: #c93b6a; color: #fff; box-shadow: 0 4px 12px -6px rgba(226,73,122,.8); }
.cd--app .k3__bar, .cd--app .k3__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 62px 14px 8px; padding: 6px; min-height: 46px; flex: 0 0 auto; border-radius: 16px; background: rgba(255,255,255,.78); border: 1px solid rgba(36,28,32,.07); box-shadow: 0 8px 24px -16px rgba(36,28,32,.45); }
.cd--app .k3__actions { margin-top: 0; }
.cd--app .k3__bar::-webkit-scrollbar, .cd--app .k3__actions::-webkit-scrollbar { display: none; }
.cd--app .k3__bar .cd__mini, .cd--app .k3__actions .cd__mini { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #3b3337; font: 600 .8rem/1 Inter, system-ui, sans-serif; box-shadow: none; }
.cd--app .k3__bar .cd__mini:hover, .cd--app .k3__actions .cd__mini:hover { background: rgba(226,73,122,.1); color: #b8305c; box-shadow: none; }
.cd--app .k3__bar .cd__mini.is-on, .cd--app .k3__grid.is-on, .cd--app .k3__photos.is-on { background: #c93b6a; color: #fff; border: 0; }
.cd--app .k3__tour { background: #c93b6a !important; color: #fff !important; border: 0 !important; }
.cd--app .k3__rec { color: #b3372f !important; }
.cd--app .k3__mood { background: #c93b6a !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px -6px rgba(226,73,122,.8); }
.cd--app .k3__seg { border: 0; background: rgba(36,28,32,.06); border-radius: 10px; min-height: 34px; }
.cd--app .k3__seg button.is-on { background: #fff; color: #1f2429; box-shadow: 0 2px 6px -3px rgba(36,28,32,.5); }
.cd--app .k3__seg b { color: #7a8981; }
.cd--app .k3__tip { margin-left: auto; padding: 0 8px; font: 500 .74rem Inter, system-ui, sans-serif; color: #7a8981; white-space: nowrap; }
.cd--app .k3__cv, .cd--app .k3__gl { border: 0 !important; border-top: 1px solid rgba(36,28,32,.07) !important; box-shadow: none; margin: 0; }
.k3__gl { background: radial-gradient(ellipse at 50% 38%, #fbfcfb 0%, #eef1ee 58%, #dfe5e1 100%) !important; }
@media (max-width: 899px) { .cd--app .k3__bar, .cd--app .k3__actions { margin-left: 8px; margin-right: 8px; } .cd--app .cd__views button { padding: 8px 12px; } }

/* ===== OpalSketch panel redesign (2026): calm fields, tidy rows, one accent ===== */
.kda-rail { background: #fff; border-right: 1px solid rgba(36,28,32,.08); }
.kda-rail button { border-radius: 14px; color: #716a6e; font-weight: 650; }
.kda-rail button:hover { background: #f5eef1; color: #1f2429; }
.kda-rail button.is-on { background: #fff0f4; color: #c43a6d; }
.kda-panel { background: #fff; border-right: 1px solid rgba(36,28,32,.08); }
.kda-sec__head { border-bottom: 1px solid rgba(36,28,32,.07); }
.kda-sec__head h2 { font: 650 1.06rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #1f2429; }
.kda-block h3 { font: 650 .7rem/1 Inter, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #716a6e; margin: 22px 0 8px; }
.kda-hint { color: #716a6e; }
.kda-sec input[type="number"], .kda-sec input[type="text"], .kda-sec select { height: 38px; border: 1px solid #d9dfdb; border-radius: 10px; background: #fff; padding: 0 10px; font: 500 .92rem Inter, system-ui, sans-serif; color: #1f2429; transition: border-color .12s, box-shadow .12s; }
.kda-sec input:hover, .kda-sec select:hover { border-color: #aab5ae; }
.kda-sec input:focus, .kda-sec select:focus { outline: none; border-color: #c93b6a; box-shadow: 0 0 0 3px #fff0f4; }
.kda-sec input[type="number"] { width: 62px; }
.kda-sec .cd__group-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: #44524b; font-size: .9rem; margin: 4px 0; }
.kda-sec .cd__group-inline input[type="number"] { width: 58px; }
.kda-sec label.cd__lbl { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #44524b; margin: 8px 0; }
.kda-sec .cd__mini--go, .kda-sec #cdSetRoom { display: block; width: 100%; height: 42px; margin-top: 14px; border: 0; border-radius: 999px; background: #c93b6a; color: #fff; font: 650 .95rem Inter, system-ui, sans-serif; cursor: pointer; transition: background .12s, transform .08s; }
.kda-sec .cd__mini--go:hover, .kda-sec #cdSetRoom:hover { background: #b8305c; }
.kda-sec .cd__mini--go:active, .kda-sec #cdSetRoom:active { transform: scale(.985); }
.kda-sec .cd__chip { border: 1px solid #d9dfdb; background: #fff; color: #1f3a2e; border-radius: 999px; padding: 7px 14px; font: 600 .86rem Inter, system-ui, sans-serif; transition: background .12s, border-color .12s; }
.kda-sec .cd__chip:hover { background: #fff0f4; border-color: #c93b6a; }
.kda-sec .cd__chip--gen { background: #fff0f4; border-color: #f9cfdc; }
.kda-dfm, .kda-sec [data-dfm] { border-radius: 16px; }

.kda-sec .cd__dim { display: flex; align-items: center; gap: 8px; width: 100%; color: #44524b; }
.kda-sec .cd__dim em { font-style: normal; font-weight: 600; width: 52px; color: #716a6e; font-size: .86rem; }

/* import dialogs */
.kda-import .kda-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kda-file { display: inline-flex; align-items: center; cursor: pointer; }
.kda-mymodels h3 { margin-top: 16px; }
.kda-mm { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(36,28,32,.08); }
.kda-mm div { flex: 1; min-width: 0; }
.kda-mm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-mm small { color: #716a6e; }
.kda-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,20,15,.6); }
.kda-modal__card { background: #fff; border-radius: 18px; width: min(460px, 100%); max-height: 92vh; overflow: auto; padding: 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.kda-modal__card h2 { margin: 0 0 12px; font: 650 1.2rem Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.kda-modal__body label { display: block; margin: 10px 0; font: 600 .84rem Inter, system-ui, sans-serif; color: #44524b; }
.kda-modal__body input, .kda-modal__body select { display: block; width: 100%; height: 42px; margin-top: 4px; border: 1px solid #d9dfdb; border-radius: 10px; padding: 0 12px; font: 500 16px Inter, system-ui, sans-serif; }
.kda-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kda-dims label { margin: 10px 0 0; }
.kda-big { font: 650 1.5rem Inter, system-ui, sans-serif; margin: 6px 0; }
.kda-modal__foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.kda-modal__foot .cd__mini { min-height: 42px; padding: 0 18px; }

/* ===== phones: a compact top bar that fits ===== */
@media (max-width: 640px) {
  .kda-top { gap: 6px; padding-inline: 8px; }
  .kda-top__name, .kda-saved, [data-full], .kda-top .kda-ico[aria-label="Search"], .kda-top__hist .kda-ico:nth-child(2) { display: none !important; }
  .kda-present span { display: none; }
  .kda-present { padding: 0 10px; }
  .kda-pill { padding: 4px 10px; min-width: 0; }
  .kda-pill small { font-size: .62rem; }
  .kda-pill b { font-size: .95rem; }
  .kda-brand__logo { display: none; }
  .kda-modal__card { padding: 18px; }
  .kda-dims { grid-template-columns: 1fr 1fr 1fr; }
}

/* ===== OpalSketch simple designer (2026): less on screen, more room for the design ===== */
/* top bar: name, undo/redo, Presentation, price, and one menu for everything else */
.kda-pill small { display: none; }
.kda-pill { padding: 6px 16px; }
.kda-more { position: relative; display: flex; align-items: center; }
.kda-morebtn { color: #fff; }
.kda-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 90; min-width: 230px; background: #fff; color: #1f2429; border-radius: 16px; padding: 6px; box-shadow: 0 24px 50px -18px rgba(30,18,24,.55); display: flex; flex-direction: column; }
.kda-menu[hidden] { display: none; }
.kda-menu > * { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; width: 100%; height: auto !important; min-height: 42px; padding: 8px 12px !important; border: 0 !important; border-radius: 10px !important; background: none !important; color: #1f2429 !important; font: 550 .92rem Inter, system-ui, sans-serif; text-decoration: none; text-align: left; cursor: pointer; }
.kda-menu > *:hover { background: #f5eef1 !important; }
.kda-menu > * svg { width: 20px; height: 20px; flex: 0 0 auto; color: #44524b; }
.kda-menu > * .kda-badge, .kda-menu > * [data-count] { margin-left: auto; }
/* rail: five tools, the rest under More */
.kda-railmore { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; border-radius: 14px; padding: 10px 2px; font: 650 .7rem/1.1 Inter, system-ui, sans-serif; color: #716a6e; cursor: pointer; }
.kda-railmore svg { width: 24px; height: 24px; }
.kda-railmore:hover, .kda-railmore[aria-expanded="true"] { background: #f5eef1; color: #1f2429; }
.kda-rmenu { position: fixed; z-index: 90; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 24px 50px -18px rgba(30,18,24,.55); display: grid; grid-template-columns: repeat(3, 84px); gap: 4px; }
.kda-rmenu[hidden] { display: none; }
.kda-rmenu button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; border-radius: 14px; padding: 12px 2px; font: 650 .72rem/1.1 Inter, system-ui, sans-serif; color: #44524b; cursor: pointer; margin: 0 !important; }
.kda-rmenu button svg { width: 24px; height: 24px; }
.kda-rmenu button:hover { background: #f5eef1; color: #1f2429; }
.kda-rmenu button.is-on { background: #fff0f4; color: #c43a6d; }
/* welcome: four layouts, the rest on request */
.kda-hello__tpls:not(.is-open) [data-extra] { display: none; }
.kda-moretpl { display: block; margin: 10px auto 0; font-weight: 600; }
/* less explaining text: hints stay out of the way */
.kda-sec .kda-hint, .cd__hint, .k3__tip { display: none !important; }
/* 3D toolbar: camera, zoom, day or evening, and one View options popover */
.cd--app .k3__bar { overflow: visible !important; flex-wrap: wrap; position: relative; z-index: 7; }
.k3__grp { display: inline-flex; gap: 2px; padding: 3px; background: rgba(36,28,32,.06); border-radius: 12px; }
.cd--app .k3__grp .cd__mini { min-height: 32px; border-radius: 9px; }
.cd--app .k3__grp .cd__mini:hover { background: #fff; }
.k3__more { position: relative; margin-left: auto; }
.k3__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.k3__more > summary::-webkit-details-marker { display: none; }
.k3__more > summary::after { content: "\25BE"; margin-left: 6px; font-size: .7rem; }
.k3__more[open] > summary { background: rgba(226,73,122,.12); }
.k3__pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; max-width: calc(100vw - 24px); background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 24px 50px -18px rgba(30,18,24,.55); border: 1px solid rgba(36,28,32,.07); }
.k3__lbl { font: 650 .68rem/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #716a6e; margin: 12px 0 6px; }
.k3__lbl:first-child { margin-top: 0; }
.k3__row { display: flex; flex-wrap: wrap; gap: 6px; }
.k3__col { display: flex; flex-direction: column; gap: 6px; }
.k3__pop button { border: 1px solid #d9dfdb; border-radius: 10px; min-height: 36px; padding: 0 12px; background: #fff; color: #1f2429; font: 600 .82rem Inter, system-ui, sans-serif; cursor: pointer; text-align: left; }
.k3__pop button:hover { background: #fff0f4; border-color: #c93b6a; }
.k3__pop button.is-on { background: #c93b6a !important; color: #fff !important; border-color: #c93b6a !important; }
.cd--app .k3__pop .k3__tour, .cd--app .k3__pop .k3__rec { background: #fff !important; color: #1f2429 !important; border: 1px solid #d9dfdb !important; }
.cd--app .k3__pop .k3__rec { color: #b3372f !important; }
/* the old second toolbar becomes a quiet status line */
.cd--app .k3__actions { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; }
.cd--app .k3__actions .cd__mini { display: none; }
.k3__msg:not(:empty) { display: inline-block; background: #1f2429; color: #fff; padding: 8px 14px; border-radius: 999px; font: 600 .82rem Inter, system-ui, sans-serif; }
@media (max-width: 899px) { .kda-rmenu { grid-template-columns: repeat(4, 1fr); } .k3__more { margin-left: 0; } .k3__pop { right: auto; left: 0; } }

.kda-hello__tpls { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important; }
.kda-morebtn svg { stroke-width: 3.4; width: 22px; height: 22px; }
.kda-menu { min-width: 270px; }
.cd--app .k3__bar { margin-top: 56px; }
.kda-fold { border-top: 1px solid rgba(36,28,32,.08); }
.kda-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font: 650 .9rem Inter, system-ui, sans-serif; color: #1f2429; }
.kda-fold > summary::-webkit-details-marker { display: none; }
.kda-fold > summary::after { content: "+"; color: #c93b6a; font-size: 1.3rem; line-height: 1; }
.kda-fold[open] > summary::after { content: "\2212"; }
.kda-fold > *:not(summary) { margin-bottom: 8px; }

/* ===== simpler left panel ===== */
.kda-fold { border-top: 1px solid rgba(36,28,32,.08); }
.kda-sec__body > .kda-fold:first-of-type { border-top: 0; }
.k3p__fold { border-top: 1px solid rgba(36,28,32,.08); margin-top: 6px; }
.k3p__fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; font: 650 .9rem Inter, system-ui, sans-serif; color: #1f2429; }
.k3p__fold > summary::-webkit-details-marker { display: none; }
.k3p__fold > summary::after { content: "+"; color: #c93b6a; font-size: 1.3rem; line-height: 1; }
.k3p__fold[open] > summary::after { content: "\2212"; }
.kda-finish li.is-done { display: none; }
.kda-finish.show-done li.is-done { display: flex; }
.kda-finish [data-showdone] { margin-top: 8px; }
.kda-fold:has(> .cd__warn[hidden]), .kda-fold:has(> .kda-ctr[hidden]) { display: none; }
/* cabinet cards: two tight columns */
.cq__skus { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.cq__skus > * { padding: 10px 12px !important; min-height: 0 !important; }
.cq__lines { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; gap: 8px !important; }
.cq__lines > * { padding: 6px !important; }
.cq__lines > * b, .cq__lines > * span { font-size: .72rem; }

/* import and export hub, traced plan controls */
.kda-hub .kda-modal__card { width: min(780px, 100%); }
.kda-hub .kda-modal__body { max-height: min(72vh, 760px); overflow: auto; padding-right: 4px; }
.kda-hgroup { margin: 18px 0 8px; font: 800 .8rem/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #2b3137; }
.kda-hgroup:first-child { margin-top: 4px; }
.kda-hgroup small { display: block; margin-top: 2px; font: 400 .8rem/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #716a6e; }
.kda-hcard { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 0 0 6px; border: 1px solid #e6e1da; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.kda-hcard:hover { border-color: #c9c0b6; box-shadow: 0 6px 16px -14px rgba(36,28,32,.5); }
.kda-hcard > svg { width: 26px; height: 26px; flex: 0 0 auto; color: #c93b6a; }
.kda-hcard__t { flex: 1; min-width: 0; }
.kda-hcard__t b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 .92rem Inter, system-ui, sans-serif; }
.kda-hcard__t small { display: block; margin-top: 2px; color: #716a6e; font: 400 .8rem/1.4 Inter, system-ui, sans-serif; }
.kda-hcard__badge { font: 700 .66rem Inter, system-ui, sans-serif; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; background: #f1eeef; color: #5b5558; }
.kda-hcard .cd__mini { min-width: 104px; justify-content: center; }
.kda-hcard.is-locked > svg { color: #9a9296; }
.kda-hdrop { display: grid; justify-items: center; gap: 4px; padding: 18px 14px; margin: 0 0 6px; border: 2px dashed #d9d2c9; border-radius: 14px; background: #faf8f5; color: #5b5558; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.kda-hdrop > svg { width: 28px; height: 28px; color: #c93b6a; }
.kda-hdrop b { font: 700 .92rem Inter, system-ui, sans-serif; color: #2b3137; } .kda-hdrop small { font: 400 .8rem/1.4 Inter, system-ui, sans-serif; max-width: 460px; }
.kda-hdrop.is-over { border-color: #c93b6a; background: #fff0f4; }
@media (max-width: 560px) { .kda-hcard { flex-wrap: wrap; } .kda-hcard .cd__mini { width: 100%; } }
.kda-tabs { display: inline-flex; padding: 3px; background: rgba(36,28,32,.07); border-radius: 999px; margin-bottom: 12px; }
.kda-tabs button { border: 0; background: none; padding: 8px 20px; border-radius: 999px; font: 650 .88rem Inter, system-ui, sans-serif; color: #5b6962; cursor: pointer; }
.kda-tabs button.is-on { background: #fff; color: #1f2429; box-shadow: 0 2px 8px -3px rgba(36,28,32,.4); }
.kda-hrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(36,28,32,.08); }
.kda-hrow:first-of-type { border-top: 0; }
.kda-hrow > div { flex: 1; min-width: 0; }
.kda-hrow b { display: block; font: 650 .95rem Inter, system-ui, sans-serif; }
.kda-hrow small { display: block; color: #716a6e; font: 400 .82rem/1.4 Inter, system-ui, sans-serif; margin-top: 2px; }
.kda-hrow .cd__mini { min-width: 96px; justify-content: center; }
.kda-hint2 { color: #716a6e; font: 400 .82rem/1.45 Inter, system-ui, sans-serif; margin: 10px 0 0; }
.kda-hubbtn { display: block; width: 100%; margin: 14px 0 0; min-height: 42px; }
.kda-under { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); padding: 8px 10px; background: rgba(255,255,255,.94); border-radius: 16px; box-shadow: 0 14px 34px -16px rgba(30,18,24,.55); border: 1px solid rgba(36,28,32,.08); font: 600 .8rem Inter, system-ui, sans-serif; }
.kda-under[hidden] { display: none; }
.kda-under label { display: flex; align-items: center; gap: 6px; color: #5b6962; }
.kda-under input[type=range] { width: 90px; accent-color: #c93b6a; }
.kda-under .cd__mini.is-on { background: #c93b6a; color: #fff; border-color: #c93b6a; }
@media (min-width: 900px) { .kda-under { flex-wrap: nowrap; white-space: nowrap; } }
@media (max-width: 899px) { .kda-under { bottom: 74px; } .kda-hrow { flex-wrap: wrap; } }

.kda-renders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kda-renders figure { margin: 0; background: #f4f6f5; border-radius: 12px; overflow: hidden; }
.kda-renders img { display: block; width: 100%; height: auto; }
.kda-renders figcaption { display: flex; justify-content: space-between; padding: 8px 12px; font: 600 .84rem Inter, system-ui, sans-serif; }
.kda-renders a { color: #c93b6a; }

/* placeholder library */
.kda-lib__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.kda-lib__tabs button { border: 1px solid #d9dfdb; background: #fff; border-radius: 999px; padding: 5px 12px; font: 600 .78rem Inter, system-ui, sans-serif; color: #44524b; cursor: pointer; }
.kda-lib__tabs button.is-on { background: #c93b6a; border-color: #c93b6a; color: #fff; }
.kda-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.kda-lc { display: flex; flex-direction: column; text-align: left; gap: 2px; border: 1px solid #e6e3e5; background: #fff; border-radius: 12px; padding: 6px; cursor: pointer; transition: border-color .12s, transform .12s; }
.kda-lc:hover { border-color: #c93b6a; transform: translateY(-1px); }
.kda-lc img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #dde4e0; }
.kda-lc b { font: 650 .76rem/1.2 Inter, system-ui, sans-serif; color: #1f2429; padding: 3px 2px 0; }
.kda-lc small { font: 400 .68rem Inter, system-ui, sans-serif; color: #716a6e; padding: 0 2px 2px; }

/* developer performance panel */
.v3d-perf { position: fixed; left: 10px; bottom: 10px; z-index: 95; width: 290px; max-width: calc(100vw - 20px); background: rgba(14,22,18,.9); color: #dfe9e3; border-radius: 12px; padding: 10px 12px; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); pointer-events: none; }
.v3d-perf b { display: block; color: #ffb3c9; margin-bottom: 4px; font-size: 12px; }
.v3d-perf div { display: flex; justify-content: space-between; gap: 10px; }
.v3d-perf span { color: #a89ea3; white-space: nowrap; }
.v3d-perf i { font-style: normal; text-align: right; }
.kda-lib__q { width: 100%; box-sizing: border-box; border: 1px solid #d9dfdb; border-radius: 10px; padding: 9px 12px; font: 500 .85rem Inter, system-ui, sans-serif; margin: 2px 0 4px; background: #fff; }
.kda-lib__q:focus { outline: 2px solid #c93b6a; outline-offset: 1px; }

/* 3D view: the scene fills the stage and the toolbar floats over it */
.cd--app .cd__alt.k3--float { inset: 0; }
.cd--app .k3--float .k3__cv, .cd--app .k3--float .k3__gl { border: 0 !important; border-radius: 0; }
.cd--app .k3--float .k3__bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0 !important; width: max-content; max-width: calc(100% - 24px); flex-wrap: nowrap; z-index: 7; background: rgba(255,255,255,.9); box-shadow: 0 14px 34px -18px rgba(36,28,32,.55); }
.cd--app .k3--float .k3__more { margin-left: 0; }
.cd--app .k3--float .k3__pop { top: auto; bottom: calc(100% + 10px); right: 0; left: auto; max-height: min(70vh, 560px); overflow: auto; }
.cd--app .k3--float .k3__actions { bottom: 80px; }
.cd--app .k3--float .k3-walk__pad { bottom: 84px; }
.k3__grp { display: inline-flex; gap: 2px; }
.k3__grp + .k3__grp, .k3__grp + .k3__mood, .k3__mood + .k3__more { position: relative; margin-left: 6px; }
.k3__grp + .k3__grp::before, .k3__grp + .k3__mood::before, .k3__mood + .k3__more::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 1px; background: rgba(36,28,32,.12); }
@media (max-width: 899px) {
  .cd--app .k3--float .k3__bar { bottom: 10px; max-width: calc(100% - 16px); overflow: visible !important; }
  .cd--app .k3--float .k3__pop { right: 0; left: auto; width: min(320px, calc(100vw - 24px)); }
}
/* phone: all six rail tabs fit without sideways scrolling; the 3D bar drops zoom (pinch does that) */
@media (max-width: 899px) {
  .kda-rail { justify-content: space-around; overflow-x: visible; }
  .kda-rail::after { display: none; }
  .kda-rail > button, .kda-rail .kda-railmore { flex: 1 1 0; min-width: 0; }
  .cd--app .k3--float .k3__bar .k3__grp[aria-label="Zoom"] { display: none; }
  .cd--app .k3--float .k3__bar .cd__mini { padding: 0 10px; }
}
@media (max-width: 899px) { .cd--app .k3--float .k3__mood span { display: none; } }
/* Room panel: centered primary button and a tidy cut-out row */
.kda-sec .cd__mini--go, .kda-sec #cdSetRoom { display: flex; align-items: center; justify-content: center; padding: 0 16px; line-height: 1; min-height: 44px; }
.kda-sec #cdCutWrap:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: #716a6e; }
.kda-sec #cdCutWrap .cd__lbl { flex: 0 0 54px; }
.kda-sec #cdCutWrap select { flex: 1 1 140px; min-width: 0; }
.kda-sec #cdCutWrap #cdCutW { margin-left: 62px; }
.kda-sec #cdCutWrap input { width: 64px; }
.k3__gl.is-eve { background: radial-gradient(ellipse at 50% 38%, #3a4552 0%, #252d36 60%, #1a2027 100%) !important; transition: background .4s; }
/* beta tag beside the logo */
.kda-brand { display: inline-flex; align-items: center; gap: 8px; }
.kda-beta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #ffb3c9; color: #8a1f49; font: 750 .64rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; flex: 0 0 auto; }
.kda-top .kda-brand { display: inline-flex !important; align-items: center; }
.kda-top .kda-brand .kda-beta { display: inline-flex !important; align-self: center; margin: 0; }
@media (max-width: 899px) { .kda-top .kda-brand .kda-beta { height: 18px; padding: 0 6px; font-size: .58rem; } }
.kda-top .kda-brand .kda-beta { flex-direction: row; justify-content: center; line-height: 1; }

/* flat pass: solid surfaces, hairline borders, no decorative gradients or heavy shadows */
.kda-top { background: #f7769c !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,.15); }
.kda-panel { box-shadow: none !important; }
.kda-rail { box-shadow: none; }
.kda-dfm__cta { background: #c93b6a !important; box-shadow: none !important; }
.kda-dfm__cta:hover { background: #b8305c !important; }
.kda-hello__card { box-shadow: none !important; border: 1px solid rgba(36,28,32,.1); }
.kda-hello__tpls button { box-shadow: none !important; }
.cd--app .cd__views { box-shadow: none !important; border: 1px solid rgba(36,28,32,.1); }
.cd--app .k3--float .k3__bar { box-shadow: none !important; border: 1px solid rgba(36,28,32,.1); background: rgba(255,255,255,.96) !important; }
.k3__pop, .kda-menu, .kda-rmenu { box-shadow: 0 16px 40px -24px rgba(30,18,24,.45) !important; border: 1px solid rgba(36,28,32,.08); }
.kda-zoom, .kda-zoom button { box-shadow: none !important; }
.kda-zoom { border: 1px solid rgba(36,28,32,.1); }
.cd__mini, .kda-pc, .kda-lc { box-shadow: none !important; }
@media (max-width: 899px) { .kda-panel, .kda--panel .kda-panel, .kda--wide .kda-panel { box-shadow: 0 -1px 0 rgba(36,28,32,.1), 0 -16px 40px -28px rgba(30,18,24,.45) !important; } }
.kda-hello__dfm { background: #c93b6a !important; box-shadow: none !important; }
.kda-hello__dfm:hover { background: #b8305c !important; }

/* CRM staff links and live sessions (crm-link.js) */
.crm-bar { position: fixed; z-index: 120; top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 999px; background: #2b3137; color: #fff; font: 500 .84rem/1.3 Inter, system-ui, sans-serif; box-shadow: 0 12px 30px -16px rgba(30,18,24,.6); }
.crm-bar b { color: #ffb3c9; margin-right: 6px; font-weight: 700; }
.crm-bar.is-own b { color: #F5C27E; }
.crm-bar.is-err { background: #5a1f1a; }
.crm-bar button { border: 0; border-radius: 999px; padding: 7px 14px; background: #fff; color: #2b3137; font: 650 .8rem Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.crm-bar.is-nudge { animation: crm-nudge .45s ease; }
@keyframes crm-nudge { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
@media (max-width: 899px) { .crm-bar { top: 64px; border-radius: 16px; font-size: .78rem; } }
/* ==== top-left view tools, camera pad, top-middle history ==== */
.cd--app .cd__views { z-index: 9; }   /* the view tabs stay on top of the tool strip when a wide panel narrows the stage */
.kda--panel .kda-cam__btn span, .kda--panel .kda-cam__btn svg:last-child { display: none; }
.kda-tools { position: absolute; top: 14px; left: 14px; z-index: 7; display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(255,255,255,.96); border: 1px solid rgba(36,28,32,.1); border-radius: 12px; box-shadow: 0 10px 30px -14px rgba(36,28,32,.35); }
.kda-tools .kda-ico { width: 34px; height: 34px; border-radius: 8px; color: #3b3337; }
.kda-tools .kda-ico svg { width: 19px; height: 19px; }
.kda-tools .kda-ico:hover { background: rgba(226,73,122,.1); color: #b8305c; }
.kda-tools .kda-ico.is-on { background: var(--navy); color: #fff; }
.kda-tools .kda-ico.is-on:hover { background: var(--navy); }
.kda-tools .kda-measure.is-on { background: var(--ember); color: var(--navy); }
.kda-cam { position: relative; margin-left: 2px; padding-left: 4px; border-left: 1px solid rgba(36,28,32,.12); }
.kda-cam__btn.kda-ico { width: auto; padding: 0 8px 0 6px; gap: 6px; display: inline-flex; font: 700 .8rem var(--font-body); }
.kda-cam__btn svg:last-child { width: 14px; height: 14px; opacity: .6; }
.kda-cmenu { left: 0; right: auto; top: calc(100% + 8px); min-width: 230px; }
.kda-cmenu > * { flex-direction: column; align-items: flex-start !important; gap: 1px; }
.kda-cmenu b { font: 700 .86rem var(--font-body); }
.kda-cmenu small { font-size: .74rem; color: #746a6f; }
.kda-pad { position: absolute; top: 64px; left: 22px; z-index: 6; width: 64px; height: 64px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.kda-pad::before { content: ""; grid-area: 1 / 1 / 4 / 4; margin: 10px; background: rgba(255,255,255,.92); border: 1px solid rgba(36,28,32,.12); border-radius: 8px; transform: rotate(45deg); box-shadow: 0 8px 22px -12px rgba(36,28,32,.4); }
.kda-pad button { position: relative; z-index: 1; border: 0; background: none; color: #3b3337; cursor: pointer; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.kda-pad button:hover { color: var(--navy); background: rgba(226,73,122,.1); }
.kda-pad button svg { width: 16px; height: 16px; }
.kda-pad [data-pad="up"] { grid-area: 1 / 2; } .kda-pad [data-pad="left"] { grid-area: 2 / 1; } .kda-pad [data-pad="right"] { grid-area: 2 / 3; } .kda-pad [data-pad="down"] { grid-area: 3 / 2; }
.cd--app .cd__stage.kda--elev .kda-tools, .cd--app .cd__stage.kda--elev .kda-pad { display: none; }
.cd--app .cd__stage:not(.kda--3d) .kda-cam__btn span { display: inline; }
.cd--app .cd__stage:has(.kda-hello:not([hidden])) .kda-pad { display: none; }
.cd--app .k3__bar [data-zoom], .cd--app .k3__bar [data-rot], .cd--app .k3__bar [data-preset], .cd--app .k3__bar .k3__grp[aria-label="Zoom"], .cd--app .k3__bar .k3__grp[aria-label="Camera"], .cd--app .k3__bar .k3__tip { display: none; }   /* the strip and the Camera menu cover these */
.cd--app .k3__bar:not(:has(.k3__more)) { display: none; }
.cd--app .k3__bar { width: max-content; margin-left: auto; }
.kda-gear { position: absolute; top: 14px; left: 50%; z-index: 6; margin-left: calc(var(--views-w, 300px) / 2 + 8px); width: 42px; height: 42px; border: 1px solid rgba(36,28,32,.1); border-radius: 999px; background: rgba(255,255,255,.86); color: #3b3337; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px -14px rgba(36,28,32,.35); }
.kda-gear svg { width: 20px; height: 20px; }
.kda-gear:hover { color: var(--navy); background: #fff; }
.kda-top__mid { display: flex; align-items: center; gap: 4px; }
.kda-top__mid .kda-top__hist { gap: 4px; }
.kda-top__mid .kda-ico { width: auto; height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 9px; border-radius: 9px; background: rgba(255,255,255,.08); font: 700 .82rem var(--font-body); color: #fff; }
.kda-top__mid .kda-ico svg { width: 18px; height: 18px; }
.kda-top__mid .kda-ico:hover { background: rgba(255,255,255,.16); }
.kda-top__mid .kda-ico:disabled { opacity: .4; }
.kda-hwrap { position: relative; }
.kda-hbtn svg:last-child { width: 13px; height: 13px; opacity: .6; margin-left: -2px; }
.kda-hmenu { left: 50%; right: auto; transform: translateX(-50%); top: calc(100% + 8px); min-width: 280px; max-height: min(60vh, 460px); overflow-y: auto; }
.kda-hmenu__head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px 6px !important; min-height: 0 !important; font: 800 .8rem var(--font-body); color: #1f2429; letter-spacing: .04em; text-transform: uppercase; }
.kda-hmenu__head small { font: 600 .72rem var(--font-body); color: #746a6f; text-transform: none; letter-spacing: 0; }
.kda-hmenu__head:hover { background: none !important; }
.kda-hmenu [data-jump] { font: 500 .86rem var(--font-body); color: #1f2429; text-align: left; }
.kda-hmenu [data-jump].is-on { background: #f5eef1 !important; font-weight: 700; }
.kda-hmenu [data-jump].is-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g, #f7769c); flex: 0 0 auto; }
@media (max-width: 1100px) { .kda-top__mid .kda-ico span { display: none; } .kda-top__mid .kda-ico { padding: 0 9px; } .kda-hbtn svg:last-child { display: none; } }
@media (max-width: 899px) {
  .kda-tools { top: auto; bottom: 14px; left: 10px; }
  .kda-pad, .kda-cam, .kda-snap, .kda-gear { display: none; }
  .kda-top__mid { gap: 2px; }
  .kda-top__mid .kda-ico { background: none; height: 40px; width: 40px; padding: 0; justify-content: center; }
  .kda-top__mid [data-export] { display: none; }
}
@media (max-width: 640px) { .kda-top__mid .kda-hwrap { display: none; } .kda-tools { bottom: 70px; } }

/* ==== quick finishes picker (from the tool strip) ==== */
.kda-fin { position: absolute; top: 60px; left: 14px; z-index: 8; width: min(380px, calc(100% - 28px)); max-height: calc(100% - 80px); overflow-y: auto; background: #fff; border: 1px solid rgba(36,28,32,.1); border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(30,18,24,.45); padding: 10px; }
.kda-fin[hidden] { display: none; }
.kda-fin__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.kda-fin__tabs button { border: 0; background: #f4f0f2; color: #3b3337; border-radius: 999px; padding: 6px 11px; font: 700 .76rem var(--font-body); cursor: pointer; }
.kda-fin__tabs button.is-on { background: var(--navy); color: #fff; }
.kda-fin__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.kda-fin__sw { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #3b3337; }
.kda-fin__sw i { display: block; width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-style: normal; display: grid; place-items: center; font: 800 1.2rem var(--font-body); color: #746a6f; }
.kda-fin__sw span { font: 600 .68rem/1.15 var(--font-body); text-align: center; max-width: 68px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kda-fin__sw:hover i { box-shadow: inset 0 0 0 2px rgba(226,73,122,.5); }
.kda-fin__sw.is-on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.kda-fin__sw.is-on span { color: var(--navy); font-weight: 800; }
.kda-fin__sw--same i { background: #f4f0f2; }
.kda-fin__foot { margin-top: 10px; }
.kda-fin__foot .cd__mini { width: 100%; }
.kda-fin__note { margin: 10px 0 0; font-size: .72rem; color: #746a6f; }
.kda-fin__tint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 .78rem var(--font-body); color: #3b3337; }
.kda-fin__tint label { display: inline-flex; align-items: center; gap: 8px; }
.kda-fin__tint input[type=color] { width: 40px; height: 30px; border: 1px solid rgba(36,28,32,.15); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.kda-fin__tint small { color: #746a6f; font-weight: 500; }
.kda-fin__tintv { font-family: ui-monospace, monospace; font-size: .74rem; color: #746a6f; }
.kda-fin__tint .cd__mini { width: auto; }
.kda-finbtn.is-on { background: var(--navy); color: #fff; }
.cd--app .cd__stage.kda--elev .kda-fin { display: none; }
@media (max-width: 899px) { .kda-fin { top: auto; bottom: 64px; left: 10px; width: calc(100% - 20px); max-height: 55vh; } .kda-finbtn { display: inline-grid; } }
@media (max-width: 640px) { .kda-fin { bottom: 120px; } }

/* ==== partner skins ==== */
html.has-skin { --navy: var(--skin-ink); --blue: var(--skin-ink); --blue-dark: var(--skin-ink); --sky: var(--skin-soft); --ink: var(--skin-text); --ember: var(--skin-mute); --ember-dark: var(--skin-ink); --sand: var(--skin-soft); --font-body: var(--skin-font); --font-display: var(--skin-font); }
html.has-skin body,html.has-skin button,html.has-skin input,html.has-skin select { font-family: var(--skin-font); }
html.has-skin .kda-top { background: linear-gradient(180deg, var(--skin-ink) 0%, var(--skin-ink) 100%); }
html.has-skin .kda-pill { background: var(--skin-soft); color: var(--skin-ink); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
html.has-skin .kda-rail button.is-on { background: var(--skin-soft); color: var(--skin-ink); }
html.has-skin .kda-rail button.is-on::before { background: var(--skin-ink); }
html.has-skin .btn--primary,html.has-skin .kda-pc__go { background: var(--skin-accent); border-color: var(--skin-accent); }
html.has-skin .btn--primary:hover,html.has-skin .kda-pc__go:hover { background: var(--skin-accent); border-color: var(--skin-accent); }
html.has-skin .kda-tile:hover,html.has-skin .kda-pc:hover { border-color: var(--skin-mute); }
html.has-skin .kda-way::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--skin-ink); }
html.has-skin .kda-way em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--skin-ink); margin-top: 4px; }
html.has-skin .cd--app .cd__mini.cd__mini--go:hover { background: var(--skin-accent); border-color: var(--skin-accent); }
html.has-skin .kda-hist button:hover {background:rgba(var(--skin-ink-rgb),.08)}
html.has-skin .kda-hist button.is-on {background:rgba(var(--skin-ink-rgb),.16);font-weight:600}
html.has-skin .cd--app .cd__views button.is-on { background: var(--skin-ink); color: #fff; box-shadow: 0 4px 12px -6px rgba(var(--skin-ink-rgb),.8); }
html.has-skin .cd--app .k3__bar .cd__mini:hover,html.has-skin .cd--app .k3__actions .cd__mini:hover { background: rgba(var(--skin-ink-rgb),.1); color: var(--skin-ink); box-shadow: none; }
html.has-skin .cd--app .k3__bar .cd__mini.is-on,html.has-skin .cd--app .k3__grid.is-on,html.has-skin .cd--app .k3__photos.is-on { background: var(--skin-ink); color: #fff; border: 0; }
html.has-skin .cd--app .k3__tour { background: var(--skin-ink) !important; color: #fff !important; border: 0 !important; }
html.has-skin .kda-rail button.is-on { background: var(--skin-soft); color: var(--skin-ink); }
html.has-skin .kda-sec input:focus,html.has-skin .kda-sec select:focus { outline: none; border-color: var(--skin-ink); box-shadow: 0 0 0 3px var(--skin-soft); }
html.has-skin .kda-sec .cd__mini--go,html.has-skin .kda-sec #cdSetRoom { display: block; width: 100%; height: 42px; margin-top: 14px; border: 0; border-radius: 999px; background: var(--skin-accent); color: #fff; font: 650 .95rem Inter, system-ui, sans-serif; cursor: pointer; transition: background .12s, transform .08s; }
html.has-skin .kda-sec .cd__chip:hover { background: var(--skin-soft); border-color: var(--skin-ink); }
html.has-skin .kda-sec .cd__chip--gen { background: var(--skin-soft); border-color: var(--skin-soft); }
html.has-skin .kda-rmenu button.is-on { background: var(--skin-soft); color: var(--skin-ink); }
html.has-skin .k3__more[open] > summary { background: rgba(var(--skin-ink-rgb),.12); }
html.has-skin .k3__pop button:hover { background: var(--skin-soft); border-color: var(--skin-ink); }
html.has-skin .k3__pop button.is-on { background: var(--skin-ink) !important; color: #fff !important; border-color: var(--skin-ink) !important; }
html.has-skin .kda-fold > summary::after { content: "+"; color: var(--skin-ink); font-size: 1.3rem; line-height: 1; }
html.has-skin .k3p__fold > summary::after { content: "+"; color: var(--skin-ink); font-size: 1.3rem; line-height: 1; }
html.has-skin .kda-under input[type=range] { width: 90px; accent-color: var(--skin-ink); }
html.has-skin .kda-under .cd__mini.is-on { background: var(--skin-ink); color: #fff; border-color: var(--skin-ink); }
html.has-skin .kda-renders a { color: var(--skin-ink); }
html.has-skin .kda-lib__tabs button.is-on { background: var(--skin-ink); border-color: var(--skin-ink); color: #fff; }
html.has-skin .kda-lc:hover { border-color: var(--skin-ink); transform: translateY(-1px); }
html.has-skin .kda-lib__q:focus { outline: 2px solid var(--skin-ink); outline-offset: 1px; }
html.has-skin .kda-dfm__cta { background: var(--skin-accent) !important; box-shadow: none !important; }
html.has-skin .kda-hello__dfm { background: var(--skin-accent) !important; box-shadow: none !important; }
html.has-skin.kda-page .kda-top { background: var(--skin-ink) !important; }
html.has-skin .kda-brand__mark,html.has-skin .kda-brand small { display: none; }
html.has-skin .kda-brand__logo--skin { height: var(--skin-logo-h) !important; width: auto !important; max-width: 46vw; margin-block: calc(var(--skin-logo-h) * -.2); object-fit: contain; border-radius: 0; background: none; padding: 0; }
html.skin-invert-logo .kda-brand__logo--skin { filter: brightness(0) invert(1); }
html.skin-logo-plate .kda-brand__logo--skin { margin-block: 0; padding: 3px 8px; border-radius: 8px; background: #fff; box-sizing: border-box; }
html.has-skin .kda-skin__tag { font: 500 .78rem var(--skin-font); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-left: 2px; white-space: nowrap; }
html.has-skin .kda-beta { background: var(--skin-accent); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
html.has-skin .kda-hello__kick { display: flex; align-items: center; gap: 10px; justify-content: center; }
html.has-skin .kda-hello__skin { height: calc(var(--skin-logo-h) * 1.3); width: auto; max-width: 70%; margin-block: calc(var(--skin-logo-h) * -.25); }
html.has-skin .kda-hello__kick span { font: 500 .85rem var(--skin-font); letter-spacing: .14em; text-transform: uppercase; color: var(--skin-ink); }
@media (max-width: 899px) { html.has-skin .kda-brand .kda-brand__logo--skin { display: block !important; max-width: 34vw; } }
@media (max-width: 640px) { html.has-skin .kda-skin__tag { display: none; } html.has-skin .kda-brand__logo--skin { height: calc(var(--skin-logo-h) * .8) !important; max-width: 24vw; min-width: 0; } html.has-skin .kda-brand { min-width: 0; flex-shrink: 1; } }
.kda-powered { margin: 10px 0 0; font-size: .8rem; color: #767676; }

/* verified manufacturer model badge (model-source.js) */
.msrc { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font: 700 .68rem/1 var(--font-body, inherit); letter-spacing: .01em; color: #1f6f4a; background: #e8f6ee; border: 1px solid #bfe3cd; border-radius: 999px; padding: 3px 8px 3px 5px; white-space: nowrap; }
.msrc[hidden] { display: none; }
.msrc svg { color: #1f9d63; flex: 0 0 auto; }
.cd__selprod + .msrc, .kda-pick__head .msrc { margin-top: 6px; }

/* ---------- UI polish, October 2026 ----------
   Contrast measured with a script: white on the old pink was 3.8:1, and the controls on the pink top bar were 1.5 to 2.4:1.
   The fill pink is now #c93b6a (4.9:1 with white text). The top bar keeps the brand pink #f7769c, but its controls are white pills with dark text. */
html:not(.has-skin) .kda-top { color: #23282d; }
html:not(.has-skin) .kda-top .kda-ico,
html:not(.has-skin) .kda-top .kda-cart { color: #23282d; background: rgba(255,255,255,.62); }
html:not(.has-skin) .kda-top .kda-ico:hover:not(:disabled),
html:not(.has-skin) .kda-top .kda-cart:hover { background: #fff; }
html:not(.has-skin) .kda-top .kda-ico:disabled { opacity: 1; color: rgba(35,40,45,.45); background: rgba(255,255,255,.28); }
html:not(.has-skin) .kda-top .kda-ico:focus-visible, html:not(.has-skin) .kda-top .kda-cart:focus-visible, html:not(.has-skin) .kda-top__name input:focus-visible { outline: 2px solid #23282d; outline-offset: 2px; }
html:not(.has-skin) .kda-top__name input { background: rgba(255,255,255,.7); color: #23282d; }
html:not(.has-skin) .kda-top__name input:hover { border-color: rgba(35,40,45,.3); }
html:not(.has-skin) .kda-top__name input:focus { background: #fff; border-color: #23282d; }
html:not(.has-skin) .kda-top__name input::placeholder { color: rgba(35,40,45,.6); }
html:not(.has-skin) .kda-saved { color: rgba(35,40,45,.88); font-weight: 600; }
html:not(.has-skin) .kda-brand { border-right-color: rgba(35,40,45,.18); }
html:not(.has-skin) .kda-brand small { color: rgba(35,40,45,.75); }

/* the start card sits below the view switcher on phones instead of under it */
@media (max-width: 899px) { .kda-hello { padding-top: 64px; } }

/* Panels, simpler (October 2026 audit) */
/* with a panel open the view switcher and its gear sit right of the middle, where they ran into the tool bar */
@media (min-width: 900px) { .cd--app.kda--panel .cd__views, .cd--app.kda--panel .kda-gear { left: calc(50% + 150px); } }
/* the Style panel's one big "Looks" fold hid every setting when closed: it is always open now, with plain section labels */
#cdStyle .k3p > summary { display: none; }
#cdStyle .k3p__looks { margin-top: 2px; }
#cdStyle .k3p__looks::before { content: "Quick looks"; flex: 0 0 100%; font: 700 .72rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #716a6e; }
/* Your own models / Placeholder library are the last blocks in Products */
.kda-import, .kda-lib { margin-top: 18px; }

/* Room helper: two-column choices with a small caption */
.kda-dfm__opts--2 { grid-template-columns: repeat(2, 1fr); }
.kda-dfm__opt small { font-size: .74rem; color: #716a6e; text-align: center; line-height: 1.3; }
.kda-dfm__form [data-kind][hidden] { display: none; }
/* Build panel: the shower and vanity builders */
.kda-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #f1eeef; margin-bottom: 12px; }
.kda-seg2 button { border: 0; background: none; border-radius: 999px; padding: 10px 8px; font: 650 .88rem Inter, system-ui, sans-serif; color: #5b5558; cursor: pointer; }
.kda-seg2 button.is-on { background: #fff; color: #c93b6a; box-shadow: 0 1px 4px rgba(36,28,32,.18); }
.kda-bprog { margin: 0 0 8px; font-size: .88rem; color: #5b5558; }
.kda-bsteps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.kda-bs { display: grid; grid-template-columns: 26px 52px 1fr auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid rgba(36,28,32,.1); border-radius: 12px; background: #fff; }
.kda-bs.is-done { border-color: #e9c5d2; background: #fff8fa; }
.kda-bs__n { width: 26px; height: 26px; border-radius: 50%; background: #efecee; color: #5b5558; display: grid; place-items: center; font: 700 .8rem Inter, system-ui, sans-serif; }
.kda-bs.is-done .kda-bs__n { background: #c93b6a; color: #fff; }
.kda-bs__img { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid rgba(36,28,32,.08); }
.kda-bs__img--empty { background: #f6f4f5; }
.kda-bs__t { min-width: 0; display: grid; gap: 2px; }
.kda-bs__t b { font-size: .9rem; }
.kda-bs__t em { font-style: normal; font-weight: 500; color: #8a8286; font-size: .76rem; }
.kda-bs__t small { color: #6f676b; font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
.kda-bs__a { display: grid; gap: 4px; justify-items: end; }
.kda-bs__a button:not(.kda-link) { border: 1px solid #c93b6a; background: #fff; color: #c93b6a; border-radius: 999px; padding: 7px 12px; font: 650 .8rem Inter, system-ui, sans-serif; cursor: pointer; }
.kda-bs__a button:not(.kda-link):hover { background: #c93b6a; color: #fff; }
.kda-bs__a .kda-link { font-size: .74rem; }
.kda-bback { margin: 0 0 10px; } .kda-bback .kda-link { font-weight: 650; }

/* Build: the two full designers on top */
.kda-bcards { display: grid; gap: 10px; margin-bottom: 14px; }
.kda-bcard { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #c93b6a; color: #fff; text-decoration: none; }
.kda-bcard b { font-size: 1rem; }
.kda-bcard small { color: #ffe9f0; font-size: .82rem; line-height: 1.35; }
.kda-bcard:hover, .kda-bcard:focus-visible { background: #b8305c; outline: 2px solid #2b3137; outline-offset: 2px; }
.kda-bor { margin: 4px 0 10px; font: 700 .72rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #716a6e; }

/* Phones, simpler (October 2026): readable bottom bar, finger-sized targets, a start card that fits the screen */
@media (max-width: 899px) {
  .kda-rail button { font-size: .72rem; letter-spacing: 0; height: 54px; }
  .kda-rail button svg { width: 24px; height: 24px; }
  .kda-rail button.is-on::before { left: 22%; right: 22%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .cd--app .cd__views button { min-height: 40px; padding: 8px 14px; }
  .kda-ico, .kda-top .kda-ico { min-width: 42px; min-height: 42px; }
  .cd--app .kda-pad, .cd--app .kda-cam, .cd--app .kda-snap { display: none; }
  .k3p__chip { width: 40px; height: 40px; }
  .k3p__sw { gap: 8px; }
  .kda-link, .kda-sec .kda-link { display: inline-block; padding: 10px 4px; }
  .kda-sec .cd__chip, .kda-sec .cd__chips button { min-height: 40px; }
  /* the category chips of a long panel scroll sideways in one row instead of taking three */
  .kda-sec .cd__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px; }
  .kda-sec .cd__chips::-webkit-scrollbar { display: none; }
  .kda-sec .cd__chips .cd__chip { flex: 0 0 auto; }
  /* start card: smaller title, one column of compact layout rows, the Room helper first */
  .kda-hello { padding: 64px 10px 10px; }
  .kda-hello__card { padding: 14px; border-radius: 16px; display: flex; flex-direction: column; }
  .kda-hello__kick img { height: 30px; }
  .kda-hello__card h2 { font-size: 1.2rem; }
  .kda-hello__card > p { font-size: .88rem; margin-bottom: 10px; }
  .kda-hello__dfm { order: -1; margin: 0 0 12px; justify-content: center; min-height: 48px; width: 100%; }
  .kda-hello__tpls { grid-template-columns: 1fr !important; gap: 8px; }
  .kda-hello__tpls button { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 8px 12px; min-height: 58px; }
  .kda-hello__tpls .kda-shape { width: 52px; height: 38px; margin: 0; flex: 0 0 auto; }
  .kda-hello__tpls button > span, .kda-hello__tpls button b { display: block; }
  .cd--app .cq--browse .cq__tabs button { min-height: 42px; }
  .kda-sec input[type="number"], .kda-sec input[type="text"], .kda-sec select, .kda-sec input[type="search"] { min-height: 44px; font-size: 16px; }
  .cd--app .cq--browse .cq__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px; }
  .cd--app .cq--browse .cq__tabs::-webkit-scrollbar { display: none; }
  .cd--app .cq--browse .cq__tabs button { flex: 0 0 auto; }
  #cdStyle .k3p__looks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 8px; }
  #cdStyle .k3p__looks::-webkit-scrollbar { display: none; }
  #cdStyle .k3p__looks::before { position: sticky; left: 0; }
  #cdStyle .k3p__look { flex: 0 0 auto; min-height: 40px; }
}

.kda-pb__empty { padding: 16px; border: 1px dashed #d8cfd3; border-radius: 14px; background: #fbf8f9; color: #4a5258; }
.kda-pb__empty b { display: block; margin-bottom: 4px; color: #2b3137; }
.kda-pb__empty p { margin: 0; font-size: .9rem; line-height: 1.45; display: block !important; }

/* Cabinets panel, October 2026: brand tabs, a door color strip, wall height, and one-line cabinet rows */
.cq--browse .cq__pk { display: grid; gap: 10px; margin-bottom: 14px; }
.cq__bbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #f1eeef; }
.cq__bbar--5 { grid-template-columns: repeat(5, 1fr); }
.cq__bb img { display: block; width: 100%; height: 26px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .15s, opacity .15s; }
.cq__bb:hover img, .cq__bb.is-on img { filter: none; opacity: 1; }
.cq__bb.is-on { border-radius: 10px; }
.cq__groups { display: flex; flex-wrap: wrap; gap: 6px; }
.cq__group { border: 1px solid #e1dcd8; background: #fff; border-radius: 999px; padding: 6px 11px; font: 700 .78rem Inter, system-ui, sans-serif; color: #5b5558; cursor: pointer; }
.cq__group small { font-weight: 600; color: #9a9296; margin-left: 2px; }
.cq__group.is-on { background: #2b3137; border-color: #2b3137; color: #fff; } .cq__group.is-on small { color: rgba(255,255,255,.7); }
.cq__xover-list { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; max-height: 40vh; overflow: auto; }
.cq__bb { border: 0; background: none; border-radius: 999px; padding: 10px 4px; min-height: 40px; font: 750 .84rem Inter, system-ui, sans-serif; color: #5b5558; cursor: pointer; }
.cq__bb:hover { color: #2b3137; }
.cq__bb.is-on { background: #fff; color: #c93b6a; box-shadow: 0 1px 4px rgba(36,28,32,.18); }
.cq__strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cq__sw { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-radius: 12px; border: 2px solid transparent; background: #fff; overflow: hidden; cursor: pointer; scroll-snap-align: start; box-shadow: 0 0 0 1px rgba(36,28,32,.14); }
.cq__sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cq__sw .cq__door { width: 100%; height: 100%; }
.cq__sw.is-on { border-color: #c93b6a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c93b6a; }
.cq__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cq__sum > div { min-width: 0; display: grid; gap: 2px; }
.cq__sum b { font-size: .95rem; }
.cq__sum small { font-size: .78rem; color: #6f676b; line-height: 1.3; }
.cq__wh { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #5b5558; flex: 0 0 auto; }
.cq__wh select { min-height: 40px; border: 1px solid #d9dfdb; border-radius: 10px; padding: 0 8px; font: 600 .86rem Inter, system-ui, sans-serif; background: #fff; }
/* category tabs: one scrolling row */
.cd--app .cq--browse .cq__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 2px; }
.cd--app .cq--browse .cq__tabs::-webkit-scrollbar { display: none; }
.cd--app .cq--browse .cq__tabs button { flex: 0 0 auto; min-height: 40px; }
.cd--app .cq--browse .cq__tabs button.is-on { background: #c93b6a; border-color: #c93b6a; }
/* cabinet rows: code and name on the left, price and a plus on the right */
.cd--app .cq--browse .cq__skus { grid-template-columns: 1fr !important; gap: 6px !important; }
.cd--app .cq--browse .cq__sku { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "code price" "name add"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 12px !important; border-radius: 12px; }
.cd--app .cq--browse .cq__sku:hover { transform: none; border-color: #c93b6a; box-shadow: 0 6px 16px -12px rgba(36,28,32,.5); }
.cd--app .cq--browse .cq__sku code { grid-area: code; color: #c93b6a; font-size: 1rem; }
.cd--app .cq--browse .cq__sku span { grid-area: name; font-size: .8rem; color: #5b5558; }
.cd--app .cq--browse .cq__sku b { grid-area: price; text-align: right; font-size: 1rem; }
.cd--app .cq--browse .cq__sku i { grid-area: add; justify-self: end; font-style: normal; font-size: .76rem; font-weight: 750; color: #c93b6a; }
.cd--app .cq--browse .cq__sku i::before { content: "+ "; }

.k3p__seg--wrap { flex-wrap: wrap; }
.k3p__seg--wrap button { flex: 0 1 auto; }

/* Room helper suggestions: numbered designs with a picture, a name and a star */
.kda-sug { margin: 0 0 18px; }
.kda-sug h3 { margin: 0 0 8px; font: 800 .95rem var(--font-display); }
.kda-sug__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.kda-sug__card { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid #e6e1da; border-radius: 12px; background: #fff; }
.kda-sug__pic { width: 96px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #f4f1ec; cursor: pointer; }
.kda-sug__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kda-sug__meta { min-width: 0; display: grid; gap: 2px; }
.kda-sug__name { width: 100%; min-width: 0; border: 0; border-bottom: 1px dashed #cfc8bd; background: transparent; font: 700 .9rem var(--font-body, inherit); padding: 2px 0; }
.kda-sug__meta small { color: #6b6b6b; }
.kda-sug__star { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 1.3rem; cursor: pointer; color: #8a8478; }
.kda-sug__star.is-on { color: #e0a020; }
.kda-sug__pic:focus-visible, .kda-sug__star:focus-visible { outline: 2px solid #10222F; outline-offset: 2px; }

/* The selection card in 3D is docked at the right edge of the view, out of the working area, and can be minimized to one line. */
@media (min-width: 900px) {
  .kda-pick { left: auto !important; top: 128px !important; right: 14px; bottom: auto; width: 292px; max-height: calc(100% - 200px); overflow: auto; padding: 10px; }
  .kda-pick__head { position: relative; padding-right: 30px; }
  .kda-pick__min { position: absolute; top: 0; right: 0; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
  .kda-pick__min:hover, .kda-pick__min:focus-visible { background: #f2f0ed; color: var(--ink); }
  .kda-pick__min svg { width: 16px; height: 16px; transition: transform .2s; }
  .kda-pick.is-min .kda-pick__min svg { transform: rotate(180deg); }
  .kda-pick.is-min .kda-pick__tools, .kda-pick.is-min .kda-pick__foot { display: none; }
  .kda-pick.is-min .kda-pick__head img { width: 36px; height: 36px; }
  .kda-pick__tools button { padding: 6px 2px; }
}
@media (max-width: 899px) { .kda-pick__min { display: none; } }

/* ---------- pictures in the pickers (cabinet-icons.js) ---------- */
.ci { width: 44px; height: 44px; flex: 0 0 auto; display: block; }
.ci .ci-box { fill: #e9e4dc; stroke: #b9b0a4; stroke-width: .8; }
.ci .ci-door { fill: #fbfaf7; stroke: #8f8678; stroke-width: .8; }
.ci .ci-panel { fill: #f1ede6; stroke: #cfc6ba; stroke-width: .6; }
.ci .ci-false { fill: #f3f0ea; stroke: #8f8678; stroke-width: .8; }
.ci .ci-open { fill: #fff; stroke: #8f8678; stroke-width: .8; }
.ci .ci-shelf { stroke: #b9b0a4; stroke-width: .8; }
.ci .ci-oven { fill: #2b3137; }
.ci .ci-sink { fill: #d9dde0; stroke: #8f8678; stroke-width: .8; }
.ci .ci-pull { fill: #4a4a4a; }
.ci .ci-kick { fill: #3a3633; }
.cq .cq__sku.cq__sku--pic, .cq__skus > .cq__sku--pic { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.cq__sku--pic > .cq__sku-t, .cq__sku--pic > .cq__sku-r { font-size: inherit; color: inherit; line-height: 1.25; }   /* site.css styles every span in a card: these two are layout wrappers, not the name */
.cq__sku--pic .cq__sku-t > span { font-size: .8rem; color: #5b6670; }
.cq__sku--pic .cq__sku-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.cq__sku--pic .cq__sku-t small { font-size: .72rem; color: #7a7470; font-variant-numeric: tabular-nums; }
.cq__sku--pic .cq__sku-r { display: grid; justify-items: end; gap: 2px; text-align: right; }
.cq__skus { grid-template-columns: 1fr !important; }
/* the browse rules above name grid areas for a flat card (code, name, price, add); inside a picture card those names have no grid, so
   every child landed in the same implicit cell and the code, name, price and "Add to plan" drew on top of each other */
.cd--app .cq--browse .cq__sku--pic code, .cd--app .cq--browse .cq__sku--pic span, .cd--app .cq--browse .cq__sku--pic b, .cd--app .cq--browse .cq__sku--pic i { grid-area: auto; }
.cd--app .cq--browse .cq__sku--pic > .cq__sku-r { align-self: center; }
.cd__chip--pic { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 7px; width: 72px; border-radius: 10px; background: #fff; border: 1px solid #e3ddd6; color: #2b3137; font-size: .7rem; line-height: 1.2; text-align: center; }
.cd__chip--pic:hover { background: #fff; border-color: #c93b6a; color: #c93b6a; }
.cd__chip--pic .ci { width: 40px; height: 40px; }
.cd__chip--pic span { display: block; max-width: 100%; }
.ri { width: 52px; height: 44px; display: block; }
.ri .ri-room { fill: #faf8f4; stroke: #2b3137; stroke-width: 1.6; } .ri .ri-dashed { stroke-dasharray: 3 2; stroke: #8f8678; }
.ri .ri-run { fill: #d8c7a8; stroke: #a89473; stroke-width: .6; }
.ri .ri-island { fill: #c9b48d; stroke: #a89473; stroke-width: .6; }
.ri .ri-tub { fill: #cfe6e3; stroke: #7fb0aa; stroke-width: .7; }
.ri .ri-fix { fill: #fff; stroke: #7a7470; stroke-width: .7; }
.ri .ri-sofa { fill: #d4d9dd; stroke: #8f979d; stroke-width: .6; }
.ri .ri-wall { stroke: #2b3137; stroke-width: 1.4; }
.kda-dfm__opt .ri, .kda-hello__tpls .ri { margin: 0 auto 2px; }
.kda-dfm__opt:has(input:checked) .ri .ri-room { stroke: #c93b6a; }

/* ---------- Style: cabinet brand and color (all cabinets, or click a few) ---------- */
.kda-cbx { margin: 0 0 18px; padding: 12px; border: 1px solid #e6e1da; border-radius: 14px; background: #fff; }
.kda-cbx__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kda-cbx__head h3 { margin: 0; font: 800 .95rem var(--font-display); } .kda-cbx__head small { color: #7a7470; font-size: .76rem; }
.kda-cbx__brands { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.kda-cbx__b { border: 1px solid #e3ddd6; background: #f7f5f1; border-radius: 999px; padding: 5px 10px; font: 700 .76rem Inter, system-ui, sans-serif; color: #5b5558; cursor: pointer; }
.kda-cbx__b.is-on { background: #2b3137; color: #fff; border-color: #2b3137; }
.kda-cbx__groups { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.kda-cbx__g { border: 1px solid #e3ddd6; background: #fff; border-radius: 999px; padding: 4px 9px; font: 600 .72rem Inter, system-ui, sans-serif; color: #5b5558; cursor: pointer; } .kda-cbx__g.is-on { border-color: #c93b6a; color: #c93b6a; }
.kda-cbx__strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.kda-cbx__sw { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 2px solid transparent; background: #fff; overflow: hidden; cursor: pointer; }
.kda-cbx__sw img, .kda-cbx__sw i { display: block; width: 100%; height: 100%; object-fit: cover; }
.kda-cbx__sw.is-on { border-color: #c93b6a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c93b6a; }
.kda-cbx__now { margin: 4px 0 8px; font-size: .82rem; color: #5b5558; }
.kda-cbx__acts, .kda-cbx__pick > div { display: flex; gap: 6px; } .kda-cbx__acts .btn, .kda-cbx__pick .btn { flex: 1; padding: 9px 8px; font-size: .82rem; }
.kda-cbx__pick { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #fff0f4; border: 1px dashed #c93b6a; }
.kda-cbx__pick b { font-size: .95rem; color: #c93b6a; } .kda-cbx__pick span { font-size: .78rem; color: #5b5558; line-height: 1.35; }
.kda-cbx__mix { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid #efebe6; font-size: .78rem; color: #5b5558; }
.kda-cbx__mix li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; } .kda-cbx__mix b { color: #2b3137; }

/* Stone panel: brand strip, the picked color, target tabs, filters and the swatch grid */
.kda-st__brands { margin-bottom: 12px; }
.kda-st__brands button b { font-size: .78rem; }
.kda-st__sel { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px; }
.kda-st__sel > i { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.kda-st__sel > i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kda-st__sel > i.kda-st__none { background: repeating-linear-gradient(135deg, #f1ede6 0 6px, #e6e0d8 6px 12px); }
.kda-st__sel b { display: block; font-size: .92rem; line-height: 1.25; }
.kda-st__sel small { display: block; font-size: .72rem; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.kda-st__target { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.kda-st__target > span { font-size: .72rem; font-weight: 700; color: var(--ink-soft); margin-right: 2px; }
.kda-st__target button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 11px; font: 700 .76rem var(--font-body); color: var(--ink-soft); cursor: pointer; }
.kda-st__target button.is-on { background: #c93b6a; border-color: #c93b6a; color: #fff; }
.kda-st__cats { align-items: center; margin-bottom: 8px; }
.kda-st__tone { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 10px; font: 700 .76rem var(--font-body); color: var(--ink-soft); }
.kda-st__count { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.kda-st__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kda-st__sw { border: 2px solid transparent; background: #fff; border-radius: 12px; padding: 4px; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kda-st__sw i { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s; }
.kda-st__sw i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kda-st__sw i em { position: absolute; right: 4px; bottom: 4px; font: 800 .58rem var(--font-body); font-style: normal; background: rgba(31,36,41,.78); color: #fff; padding: 1px 5px; border-radius: 999px; }
.kda-st__sw:hover i { transform: scale(1.03); }
.kda-st__sw b { font-size: .74rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-st__sw small { font-size: .66rem; color: var(--ink-soft); margin-top: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-st__sw.is-on { border-color: #c93b6a; box-shadow: 0 0 0 3px rgba(201,59,106,.15); }
.kda-st__foot { margin: 12px 0 0; }
@media (max-width: 899px) { .kda-st__grid { grid-template-columns: repeat(4, 1fr); } }

/* Customize (3D pick card): made-to-order size and per-cabinet hardware */
.kda-pick__tools button.is-set { border-color: #c93b6a; color: #c93b6a; }
.kda-cz { border-top: 1px solid var(--line-soft); margin: 4px 0 8px; padding-top: 8px; }
.kda-cz__head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 6px; }
.kda-cz__head b { font-size: .8rem; }
.kda-cz__head span { font-size: .7rem; color: #c93b6a; font-weight: 700; }
.kda-cz__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kda-cz__grid--hw { grid-template-columns: 1fr 1fr; }
.kda-cz__grid label { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--ink-soft); position: relative; min-width: 0; }
.kda-cz__grid input, .kda-cz__grid select { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: 600 .8rem var(--font-body); color: var(--ink); background: #fff; }
.kda-cz__grid input { padding-right: 22px; }
.kda-cz__grid label i { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: .66rem; color: var(--ink-soft); }
.kda-cz__note { font-size: .66rem; color: var(--ink-soft); line-height: 1.35; margin: 6px 0 8px; }
.kda-cz__foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.cd--app .kda-cz__ok { background: #c93b6a !important; color: #fff !important; border-color: #c93b6a !important; }

/* Sink & faucet wizard */
.kda-sw__card { width: min(640px, 100%); }
.kda-sw__card .kda-sec__head h2 small { font-weight: 500; color: var(--ink-soft); font-size: .8rem; margin-left: 8px; }
.kda-sw__steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 10px 20px 0; }
.kda-sw__steps li { flex: 1; }
.kda-sw__steps button { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; font: 700 .74rem var(--font-body); color: var(--ink-soft); padding: 6px 4px; border-bottom: 3px solid var(--line); cursor: pointer; }
.kda-sw__steps button i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--ink); font-style: normal; font-size: .66rem; }
.kda-sw__steps li.is-on button { color: var(--ink); border-bottom-color: #c93b6a; }
.kda-sw__steps li.is-on button i, .kda-sw__steps li.is-done button i { background: #c93b6a; color: #fff; }
.kda-sw__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 16px 20px 6px; }
.kda-sw__opt { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 700 .76rem var(--font-body); color: var(--ink); cursor: pointer; text-align: center; }
.kda-sw__opt:hover { border-color: #e2a6ba; }
.kda-sw__opt.is-on { border-color: #c93b6a; box-shadow: 0 0 0 3px rgba(201,59,106,.14); }
.kda-sw__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ground); color: var(--ink); }
.kda-sw__ico svg { width: 30px; height: 30px; }
.kda-sw__chip { width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.kda-sw__sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 0; margin: 0; }
.kda-sw__sum span { font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: var(--ground); border-radius: 999px; padding: 4px 10px; }
.kda-sw__sum span.is-on { background: #fbe4ec; color: #c93b6a; }
.kda-sw__card .kda-hint { padding: 8px 20px 0; margin: 0; }
.kda-sw__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 18px; }
.cd--app .kda-sw__next { background: #c93b6a !important; color: #fff !important; border-color: #c93b6a !important; padding: 10px 16px !important; }

/* Floor and Tile panels (share the Stone panel's parts) */
.kda-sf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kda-sf__card i img { object-fit: cover; }
.kda-st__more { text-align: center; margin: 10px 0 0; }
.kda-st__brands button b { font-size: .74rem; white-space: nowrap; }

/* Customize part two: this cabinet, the handle map and per-handle tools */
.kda-cz__mapwrap { background: var(--ground); border-radius: 10px; padding: 8px; margin: 2px 0 8px; }
.kda-cz__map { display: block; width: 100%; max-height: 190px; }
.kda-cz__map rect { fill: #fff; stroke: #b9b3aa; stroke-width: 1.2; }
.kda-cz__map .kda-cz__hd rect, .kda-cz__map .kda-cz__hd circle { fill: #c93b6a; stroke: #fff; stroke-width: 1; cursor: pointer; }
.kda-cz__map .kda-cz__hd text { fill: #fff; font: 700 9px var(--font-body); pointer-events: none; }
.kda-cz__map .kda-cz__hd.is-on rect, .kda-cz__map .kda-cz__hd.is-on circle { fill: #d5852e; }
.kda-cz__map .kda-cz__hd.is-off rect, .kda-cz__map .kda-cz__hd.is-off circle { fill: #bbb; opacity: .6; }
.kda-cz__hsel { display: grid; gap: 6px; margin-bottom: 8px; }
.kda-cz__hsel b { font-size: .8rem; } .kda-cz__hsel small { color: var(--ink-soft); font-size: .7rem; margin-left: 6px; }
.kda-cz__hsel label { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 700; color: var(--ink-soft); }
.kda-cz__hsel select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: 600 .8rem var(--font-body); background: #fff; }
.kda-cz__nudge { display: flex; flex-wrap: wrap; gap: 4px; }
.kda-cz__nudge button { flex: 1 1 36px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 4px; font: 700 .8rem var(--font-body); cursor: pointer; }
.kda-cz__nudge button:hover { border-color: #c93b6a; color: #c93b6a; }
.kda-cz__cab label button { margin-top: 2px; }
.kda-pick { max-height: calc(100vh - 215px); overflow-y: auto; overscroll-behavior: contain; }
.kda-about { margin: 0 0 4px; font-size: .95rem; }
.kda-about__tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #fde7ee; color: #8f2c4c; font: 800 .68rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.kda-about__sub { margin: 0; font-size: .8rem; color: #6f676b; display: block !important; }

/* Room wizard */
.kda-rw__steps { display: flex; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .74rem; }
.kda-rw__steps li { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; background: #f1eef0; color: #716a6e; }
.kda-rw__steps li.is-on { background: #f7769c; color: #fff; font-weight: 700; }
.kda-rw__steps li.is-done { background: #fbe9ef; color: #c93b6a; }
.kda-rw__q { font-size: 1.05rem; font-weight: 700; margin: 4px 0 10px; }
.kda-rw__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kda-rw__fields { display: flex; flex-direction: column; gap: 10px; flex: 1 1 200px; }
.kda-rw__fields input { width: 4.2em; }
.kda-rw__svg { width: 300px; max-width: 100%; height: auto; }
.kda-rw__bad { color: #b3261e; font-size: .84rem; margin: 8px 0 0; }
.kda-rw__how { padding-left: 1.2em; line-height: 1.55; }
.kda-rw__sum { margin: 14px 0 0; font-size: .95rem; }
.kda-rw__nav { display: flex; justify-content: space-between; margin-top: 18px; }
.kda-rw__nav .btn[disabled] { opacity: .45; pointer-events: none; }

/* phones and tablets: the small controls grow to a 44 px tap target */
@media (pointer: coarse) { .cd__pq button, .kda-cmp__x, .k3__seg button, .kda-fav, #osSplash .os-nav button { min-width: 44px; min-height: 44px; } }