/* 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 { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
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; }
@media (hover: hover) { .kda-rail button:hover { background: var(--ground); color: var(--ink); } }   /* a tapped tab does not stay lit on a touch screen */
.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; }
/* one width for every section at a given screen size: Products and Price used to open 133 px wider, so the plan jumped when you moved
   between sections, and at 1280 the wide panel pushed the canvas tools under the view tabs */
@media (min-width: 1360px) { .kda--panel .kda-panel { width: 400px; } }
.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 auto 0 !important; max-width: none !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: 8px; bottom: 10px; transform: none; max-width: none; padding: 10px 12px; gap: 6px 8px; font-size: .8rem; border-radius: 16px; }
  .cd--app .cd__sel strong { flex: 1 1 100%; font-size: .95rem; }
  .cd--app .cd__sel .cd__mini { flex: 1 1 22%; padding: 9px 6px; }
  .cd--app .cd__seldist { display: none; }
  .cd--app .cd__stage:has(.cd__sel:not([hidden])) .kda-tools, .cd--app .cd__stage:has(.cd__sel:not([hidden])) .kda-zoom { display: none; }   /* the piece's own tools take the bottom; zoom comes back on deselect */
  .kda-dfm__cta { padding: 10px 12px; margin-bottom: 10px; gap: 10px; border-radius: 12px; }
  .kda-dfm__cta b { font-size: .92rem; }
  .kda-dfm__cta small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: .74rem; }
  .kda-dfm__cta svg { width: 22px; height: 22px; }
  .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; margin-left: 2px; }   /* the stone and floor counts: full strength, no opacity (contrast) */
/* 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, rgb(var(--os-pink-rgb,247,118,156)) 0%, rgb(var(--os-rose-rgb,201,59,106)) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px -12px rgba(var(--os-hot-rgb,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: 0 1 240px; min-width: 90px; }   /* the box shrinks with the bar, and the field inside it with the box, so it never runs over Saved */
.kda-top__name input { width: 100%; max-width: 240px; box-sizing: border-box; }
@media (max-width: 899px) { .kda-top__name { flex: 1 1 auto; min-width: 0; } .kda-top__name input { max-width: none; } }
@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: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border-color: rgb(var(--os-rose-rgb,201,59,106)) !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: rgb(var(--os-rose-rgb,201,59,106)); 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: #fff; 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: 22px; width: auto; max-width: 110px; object-fit: contain; }
.kda-pb__cats--logos button.is-on { background: #fff; border-color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 1px rgb(var(--os-rose-rgb,201,59,106)); }
.kda-pb__cats--logos button.is-on img { filter: none; }   /* the picked brand keeps its own logo colors (white on white made it vanish); stone, floor and tile rows */

/* 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: 900px) and (max-width: 1499px) { .kda-pb__results .kda-pb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .kda--panel .kda-panel { width: 440px; } .kda-pb__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .kda--panel .kda-panel { width: 500px; } .kda-pb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@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: rgb(var(--os-rose-rgb,201,59,106)); --blue-dark: #1f2429; --sky: #fff0f4; --ink: #1f2429; --ember: rgb(var(--os-pink-rgb,247,118,156)); --ember-dark: rgb(var(--os-rose-rgb,201,59,106)); --sand: #f3eef0; }
.kda-top { background: linear-gradient(180deg, rgb(var(--os-pink-rgb,247,118,156)) 0%, rgb(var(--os-rose-rgb,201,59,106)) 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: rgb(var(--os-rose-rgb,201,59,106)); }
.btn--primary, .kda-pc__go { background: #1f2429; border-color: #1f2429; }
.btn--primary:hover, .kda-pc__go:hover { background: rgb(var(--os-rose-rgb,201,59,106)); border-color: rgb(var(--os-rose-rgb,201,59,106)); }
.kda-tile:hover, .kda-pc:hover { border-color: rgb(var(--os-pink-rgb,247,118,156)); }
.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; } }

/* 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: rgb(var(--os-rose-rgb,201,59,106)); border-color: rgb(var(--os-rose-rgb,201,59,106)); }
.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(var(--os-hot-rgb,226,73,122),.08)}
.kda-hist button.is-on{background:rgba(var(--os-hot-rgb,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: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; box-shadow: 0 4px 12px -6px rgba(var(--os-hot-rgb,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(var(--os-hot-rgb,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: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; border: 0; }
.cd--app .k3__tour { background: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border: 0 !important; }
.cd--app .k3__rec { color: #b3372f !important; }
.cd--app .k3__mood { background: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px -6px rgba(var(--os-hot-rgb,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; }
@media (hover: hover) { .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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); }
.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--ask { z-index: 95; }   /* a yes or no asked over another panel (My designs, versions, Import) */
.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-modal__body textarea { display: block; width: 100%; margin-top: 4px; border: 1px solid #d9dfdb; border-radius: 10px; padding: 10px 12px; font: 500 16px/1.4 Inter, system-ui, sans-serif; resize: vertical; }
.cq__lead-msg { min-height: 1.2em; margin: 8px 0 0; font: 500 .86rem Inter, system-ui, sans-serif; color: #b3261e; }
.cq__lead-msg:empty { margin: 0; min-height: 0; }
.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-top .kda-brand { margin-right: auto; }   /* the design name is hidden here: the buttons keep to the right, as on a wide screen */
  .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 > [hidden] { display: none !important; }   /* a row switched off (the drawing set for a homeowner, Find a product while store products are paused) stays off: the flex above showed it */
.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[aria-expanded="true"] { background: #f5eef1; color: #1f2429; }
@media (hover: hover) { .kda-railmore:hover { 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; }
/* a card whose only content is a hint (hidden above) is not drawn as an empty box */
.kda-block:not(:has(> :not(.kda-hint))) { display: none; }
/* a group's hint is a sentence: sentence case in the normal hint style, not the small uppercase eyebrow */
.cd--app .cd__grphint { font: 500 .8rem/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #6b6468; margin: 2px 0 8px; }
/* Windows and doors: the panel title already says it; the group's own heading repeated it */
.kda-sec[data-sec="open"] .cd__grp > h4 { display: none; }
/* the generic pieces' chips (windows, rooms, appliances) in the size the other panels' chips use */
@media (min-width: 900px) { .kda-sec .cd__grp .cd__chip:not(.cd__chip--pic):not(.cd__chip--tpl) { font-size: .8rem; padding: 6px 12px; min-height: 34px; } }
/* 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(var(--os-hot-rgb,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__lamps { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; }
.k3__lamps input { flex: 1; min-width: 0; accent-color: rgb(var(--os-pink-rgb, 247, 118, 156)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); }
.k3__pop button.is-on { background: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border-color: rgb(var(--os-rose-rgb,201,59,106)) !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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); 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: #4a5650; 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: rgb(var(--os-rose-rgb,201,59,106)); }
.kda-under .cd__mini.is-on { background: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; border-color: rgb(var(--os-rose-rgb,201,59,106)); }
@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: rgb(var(--os-rose-rgb,201,59,106)); }

/* 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: rgb(var(--os-rose-rgb,201,59,106)); border-color: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; }
@media (max-width: 899px) { .kda-lib__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .kda-lib__tabs::-webkit-scrollbar { display: none; } .kda-lib__tabs button { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; } }
.kda-lib__grid[data-libgrid] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }   /* the placeholder library's grid only: My designs keeps its own wider cards */
.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: rgb(var(--os-rose-rgb,201,59,106)); 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 rgb(var(--os-rose-rgb,201,59,106)); 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); }
/* the floating 3D bar hides the Camera and Zoom groups, so Evening comes first there: no divider before it */
.cd--app .k3--float .k3__grp + .k3__mood { margin-left: 0; }
.cd--app .k3--float .k3__grp + .k3__mood::before { display: none; }
@media (max-width: 899px) {
  .cd--app .k3--float .k3__bar { bottom: 10px; max-width: calc(100% - 16px); overflow: visible !important; }
  /* the menu opens from the middle of the bar: pinned to the screen edges so it never runs off the left side */
  .cd--app .k3--float .k3__pop { position: absolute; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); max-width: 420px; bottom: calc(100% + 10px); max-height: 60vh; overflow-y: auto; z-index: 40; }   /* the bar is centered, so this centers it on the screen (the bar's blur makes fixed act like absolute) */
  .cd--app .k3--float .k3__more { position: static; }   /* placed against the bar, not the View options button */
  .cd--app .cd__stage:has(.k3__more[open]) .kda-tools { display: none; }
  .kda-fin { max-height: calc(100% - 150px); }
}
/* 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__cutc, .kda-sec #cdCutWrap .cd__cutsz { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kda-sec #cdCutWrap .cd__lbl { flex: 0 0 auto; min-width: 54px; color: #2b3137; }
.kda-sec #cdCutWrap select { flex: 1 1 140px; min-width: 0; }
.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: rgb(var(--os-pink-rgb,247,118,156)) !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: rgb(var(--os-rose-rgb,201,59,106)) !important; box-shadow: none !important; }
.kda-dfm__cta:hover { background: #b8305c !important; }
.kda-dfm__cta svg { color: #fff; }   /* the tan icon hardly showed on the pink card */
.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: rgb(var(--os-rose-rgb,201,59,106)) !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(var(--os-hot-rgb,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(var(--os-hot-rgb,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; }
.cd--app .k3__bar:has([data-wall]) { display: flex; max-width: calc(100% - 16px); overflow-x: auto !important; flex-wrap: nowrap; scrollbar-width: none; }   /* the elevation's wall picker: always shown, scrolls inside itself instead of pushing the stage sideways */
.cd--app .k3__bar:has([data-wall])::-webkit-scrollbar { display: none; }
.cd--app .k3__bar:has([data-wall]) > * { flex: 0 0 auto; white-space: nowrap; }
/* the wall tabs are one group: on a wide screen they sit in the bar as before; on a phone they scroll in their own row and the
   Dimensions, Labels and Item numbers toggles get the row under them (they were past the right edge) */
.k3__walls { display: contents; }
@media (max-width: 899px) {
  .cd--app .k3__bar:has([data-wall]) { flex-wrap: wrap; overflow: visible !important; row-gap: 4px; width: auto; margin-left: 8px; margin-right: 8px; max-width: none; }
  .cd--app .k3__bar .k3__walls { display: flex; flex: 1 1 100%; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .cd--app .k3__bar .k3__walls::-webkit-scrollbar { display: none; }
  .cd--app .k3__bar .k3__walls > * { flex: 0 0 auto; white-space: nowrap; }
  .cd--app .k3__bar:has([data-wall]) > .k3__elevopts { flex: 1 1 100%; display: flex; justify-content: center; gap: 6px; }
}
.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, rgb(var(--os-pink-rgb,247,118,156))); 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: 100%; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kda-fin__sw:hover i { box-shadow: inset 0 0 0 2px rgba(var(--os-hot-rgb,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 .btn--ember { background: var(--skin-accent); border-color: var(--skin-accent); color: #fff; }   /* the main button: the skin's accent with white text (--ember is the skin's grey, which left ink on grey unreadable) */
html.has-skin .btn--ember:hover { background: var(--skin-ink); border-color: var(--skin-ink); color: #fff; filter: brightness(1.12); }
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; } }
/* a dark chrome (skin.chrome 'dark', PoshHaus): the side rail, the phone tab bar and the frame around the work area in the skin's ink with
   white type, and the welcome card opens on an ink band with the logo in white, like the business's own site. The plan, the 3D view and
   the panels stay light. */
html.has-skin.skin-dark-chrome.kda-page, html.has-skin.skin-dark-chrome.kda-page body, html.has-skin.skin-dark-chrome .cd.cd--app { background: var(--skin-ink); }
html.has-skin.skin-dark-chrome .kda-rail { background: var(--skin-ink); border-color: rgba(255,255,255,.1); box-shadow: none; }
html.has-skin.skin-dark-chrome .kda-rail button, html.has-skin.skin-dark-chrome .kda-railmore { color: rgba(255,255,255,.76); }
html.has-skin.skin-dark-chrome .kda-railmore[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; }
@media (hover: hover) { html.has-skin.skin-dark-chrome .kda-rail button:hover, html.has-skin.skin-dark-chrome .kda-railmore:hover { background: rgba(255,255,255,.1); color: #fff; } }
html.has-skin.skin-dark-chrome .kda-rail button.is-on, html.has-skin.skin-dark-chrome .kda-rail button[data-open="price"].is-on, html.has-skin.skin-dark-chrome .kda-railmore.is-on { background: #fff; color: var(--skin-ink); box-shadow: none; }
html.has-skin.skin-dark-chrome .kda-rail button:focus-visible, html.has-skin.skin-dark-chrome .kda-railmore:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
html.has-skin.skin-dark-chrome .kda-rail::after { background: linear-gradient(90deg, transparent, var(--skin-ink)); }
html.has-skin.skin-dark-chrome .kda-hello__card { padding-top: 0; overflow: hidden; }
html.has-skin.skin-dark-chrome .kda-hello__kick { max-width: none; margin: 0 calc(-1 * clamp(20px, 3vw, 34px)) 22px; padding: 24px 16px 20px; background: var(--skin-ink); }
html.has-skin.skin-dark-chrome .kda-hello__kick span { color: #fff; }
html.skin-dark-chrome.skin-invert-logo .kda-hello__skin { filter: brightness(0) invert(1); }
@media (max-width: 899px) { html.has-skin.skin-dark-chrome .kda-hello__kick { order: -2; margin: 0 -14px 14px; padding: 16px 12px 14px; } }
@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; } }
/* on a narrow phone the quote button says Quote, so the close button stays on screen and a business's logo keeps its size in the bar */
.kda-pill__short { display: none; }
@media (max-width: 420px) { .kda-pill__long { display: none; } .kda-pill__short { display: inline; } .kda-top .kda-pill { padding-inline: 10px; } html.has-skin .kda-brand { min-width: min(84px, 20vw); } }
@media (max-width: 340px) { .kda-top .kda-brand .kda-beta { display: none !important; } html.has-skin .kda-brand { min-width: 0; } }
.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 rgb(var(--os-rose-rgb,201,59,106)) (4.9:1 with white text). The top bar keeps the brand pink rgb(var(--os-pink-rgb,247,118,156)), 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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 rgb(var(--os-rose-rgb,201,59,106)); background: #fff; color: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); border-color: rgb(var(--os-rose-rgb,201,59,106)); }
/* 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: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 6px 16px -12px rgba(36,28,32,.5); }
.cd--app .cq--browse .cq__sku code { grid-area: code; color: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); }
.cd--app .cq--browse .cq__sku i::before { content: "+ "; }

.k3p__seg--wrap { flex-wrap: wrap; }
.k3p__seg--wrap button { flex: 0 1 auto; }
/* knob and pull picker: the current shape, then every shape drawn small, pulls and knobs apart */
.k3p__hw { border: 1px solid rgba(36,28,32,.12); border-radius: 12px; background: #fff; }
.k3p__hw > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 12px 5px 5px; cursor: pointer; font: 600 .84rem Inter, system-ui, sans-serif; color: var(--ink); }
.k3p__hw > summary::-webkit-details-marker { display: none; }
.k3p__hw > summary svg { flex: 0 0 auto; width: 34px; height: 34px; padding: 3px; border-radius: 8px; background: var(--sky); }
.k3p__hw > summary b { flex: 1; min-width: 0; font-weight: 650; }
.k3p__hw > summary i { font: normal 700 .76rem Inter, system-ui, sans-serif; color: var(--blue); }
.k3p__hw[open] > summary { border-bottom: 1px solid rgba(36,28,32,.08); }
.k3p__hw[open] > summary i { font-size: 0; }
.k3p__hw[open] > summary i::after { content: "Done"; font-size: .76rem; }
.k3p__hwh { margin: 9px 10px 3px; font: 800 .64rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #716a6e; }
.k3p__hwg { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 3px; padding: 0 5px 6px; }
.k3p__hwt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 54px; padding: 5px 2px 4px; border: 1px solid transparent; border-radius: 9px; background: none; cursor: pointer; color: var(--ink); font: 600 .66rem/1.1 Inter, system-ui, sans-serif; text-align: center; }
.k3p__hwt svg { width: 28px; height: 28px; }
.k3p__hwt:hover { background: rgba(36,28,32,.05); }
.k3p__hwt.is-on { border-color: var(--ink); background: var(--sky); }
.k3p__hwt:focus-visible, .k3p__hw > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 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; } }
/* Phones: the card is a low bottom sheet over the 3D view, so most of the room stays in sight. One line of name, tools scroll sideways, Done clears the selection. */
.kda-pick__done { display: none; }
@media (max-width: 899px) {
  .kda-pick { left: 0 !important; right: 0; bottom: 0; border-radius: 18px 18px 0 0; padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); max-height: 36vh; overflow: hidden; box-shadow: 0 -10px 30px -16px rgba(36,28,32,.5); }
  .kda-pick::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: #d9d4cf; margin: 0 auto 8px; }
  .kda-pick__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .kda-pick__head > div { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .kda-pick__head img { width: 34px; height: 34px; }
  .kda-pick b { -webkit-line-clamp: 1; font-size: .92rem; }
  .kda-pick small { margin: 0; }
  .kda-pick__head .msrc { display: none; }
  .kda-pick__done { display: inline-block; order: 9; flex: 0 0 auto; border: 0; border-radius: 99px; background: var(--sky, #f2eef0); color: var(--blue); font: 700 .78rem var(--font-body); padding: 7px 12px; cursor: pointer; }
  .kda-pick__tools { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 8px 0 6px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .kda-pick__tools::-webkit-scrollbar { display: none; }
  .kda-pick__tools { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .kda-pick__tools button { flex: 0 0 auto; min-width: 66px; padding: 7px 8px; scroll-snap-align: start; }
  .kda-pick__tools button span { font-size: .64rem; white-space: nowrap; }
  .kda-pick__foot { font-size: .72rem; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .kda-pick__foot span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- 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: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); }

/* ---------- 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: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.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 .cq__door { width: 100%; height: 100%; }   /* J&K: the colored door, its pictures are all the same drawing */
.kda-cbx__sw.is-on { border-color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--os-rose-rgb,201,59,106)); }
.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 rgb(var(--os-rose-rgb,201,59,106)); }
.kda-cbx__pick b { font-size: .95rem; color: rgb(var(--os-rose-rgb,201,59,106)); } .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: rgb(var(--os-rose-rgb,201,59,106)); border-color: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 3px rgba(var(--os-rose-rgb,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: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border-color: rgb(var(--os-rose-rgb,201,59,106)) !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: rgb(var(--os-rose-rgb,201,59,106)); }
.kda-sw__steps li.is-on button i, .kda-sw__steps li.is-done button i { background: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 3px rgba(var(--os-rose-rgb,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); }
/* the finish step lists 25 finishes: smaller tiles, each with its name */
.kda-sw__opts--fin { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.kda-sw__opts--fin .kda-sw__opt { padding: 8px 4px 7px; gap: 5px; font-size: .7rem; line-height: 1.2; text-align: center; }
.kda-sw__opts--fin .kda-sw__chip { width: 36px; height: 36px; border-radius: 10px; }
.kda-sw__opts--pic { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.kda-sw__opts--pic .kda-sw__opt { padding: 6px 6px 9px; gap: 3px; font-size: .72rem; line-height: 1.2; }
.kda-sw__pic { width: 76px; height: 76px; object-fit: contain; }
@media (max-width: 520px) {
  .kda-sw__opts--pic { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kda-sw__pic { width: 64px; height: 64px; }
  /* six steps do not fit a phone: the other steps show their number only, the one you are on its name too */
  .kda-sw__steps { padding: 10px 14px 0; } .kda-sw__steps li { flex: 0 0 auto; } .kda-sw__steps li.is-on { flex: 1 1 auto; }
  .kda-sw__steps li:not(.is-on) button { font-size: 0; gap: 0; padding: 6px 7px; }
}
/* on a wide screen the wizard docks at the right with no veil: the sink stays in view beside it, each pick shows live and the view still turns */
@media (min-width: 900px) {
  .kda-sw { background: transparent; place-items: start end; padding: 78px 18px 18px; pointer-events: none; }
  .kda-sw .kda-sw__card { pointer-events: auto; width: min(520px, 100%); max-height: 100%; box-shadow: 0 24px 60px -22px rgba(0,0,0,.45); }
}
.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: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-rose-rgb,201,59,106)) !important; color: #fff !important; border-color: rgb(var(--os-rose-rgb,201,59,106)) !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: rgb(var(--os-rose-rgb,201,59,106)); 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: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.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: rgb(var(--os-pink-rgb,247,118,156)); color: #fff; font-weight: 700; }
.kda-rw__steps li.is-done { background: #fbe9ef; color: rgb(var(--os-rose-rgb,201,59,106)); }
.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; } }

/* the stone category chips wrap; the brand logo strips keep one row with a visible thin scrollbar, so nothing hides behind an invisible one */
.kda-pb__cats.kda-st__cats { flex-wrap: wrap; overflow: visible; }
.kda-pb__cats--logos { scrollbar-width: thin; padding-bottom: 6px; }
/* partner skins: an open fold shows a minus */
html.has-skin .kda-fold[open] > summary::after, html.has-skin .k3p__fold[open] > summary::after { content: "\2212"; }

/* phones: the share action shows inside the More menu (the top-bar rule hides it only in the bar) */
@media (max-width: 899px) { .kda-menu .kda-sharebtn { display: flex; } }

/* Versions: snapshots of the open design */
.kda-hmenu__ver { display: flex !important; align-items: center; gap: 8px; font: 700 .8rem var(--font-body) !important; color: var(--blue) !important; border-bottom: 1px solid var(--line-soft); }
.kda-hmenu__ver svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kda-ver__card { width: min(920px, 100%); }
.kda-ver__save { display: flex; gap: 8px; padding: 0 20px 14px; flex-wrap: wrap; }
.kda-ver__save input { flex: 1 1 240px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 500 .9rem var(--font-body); }
.kda-ver__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 0 20px 14px; }
.kda-ver__item { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.kda-ver__item.is-cur { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(58,102,140,.2); }
.kda-ver__item img, .kda-ver__item .kda-lib__blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper, #f6f4f1); }
.kda-ver__cmp { margin: 0 20px 16px; border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; background: #fbfaf8; }
.kda-ver__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kda-ver__pair figure { margin: 0; }
.kda-ver__pair img, .kda-ver__pair .kda-lib__blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px; border: 1px solid var(--line-soft); background: #fff; }
.kda-ver__pair figcaption { font: 700 .8rem var(--font-body); margin-top: 6px; }
.kda-ver__pair figcaption small { display: block; font-weight: 500; color: var(--ink-soft); }
.kda-ver__what b { font-size: .86rem; }
.kda-ver__diff { margin: 6px 0 4px; padding-left: 18px; font-size: .84rem; line-height: 1.45; }
.kda-ver__same { font-size: .86rem; margin: 6px 0; }
@media (max-width: 640px) { .kda-ver__cmp { grid-template-columns: 1fr; } }

/* Catalogs: the makers' spec books and catalogs */
.kda-cat { padding: 0 20px 14px; }
.kda-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 6px; }
.kda-cat__head h3 { margin: 0; font: 800 .95rem var(--font-display); }
.kda-cat__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.kda-cat__row:hover { background: var(--sky); }
.kda-cat__kind { display: inline-block; margin-right: 6px; font: 700 .58rem var(--font-body); letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: #efece8; color: #5c5450; vertical-align: 1px; }
.kda-cat__head .kda-link { font-size: .78rem; }
.kda-cat__kind--spec { background: #fde8ef; color: #b8305c; }
.kda-cat__t { flex: 1; min-width: 0; }
.kda-cat__t b { display: block; font-size: .86rem; }
.kda-cat__t small { color: var(--ink-soft); font-size: .72rem; }
.kda-cat__open { flex: 0 0 auto; font: 700 .72rem var(--font-body); color: var(--blue); border: 1px solid var(--sky-line, #d8e3ec); border-radius: 8px; padding: 4px 8px; }
.cq__spec { display: inline-block; justify-self: start; width: max-content; margin-left: 0; font: 700 .7rem var(--font-body); color: var(--blue); text-decoration: none; border: 1px solid var(--sky-line, #d8e3ec); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.cq__spec:hover { background: var(--sky); }
/* prices stay hidden until Settings > Show prices (or the host config) turns them on */
.kda--noprice .cq__sku-r b, .kda--noprice .cq__table th.r, .kda--noprice .cq__table td.r, .kda--noprice .cq__quote .r, .kda--noprice .cd__totlink, .kda--noprice [data-price] { display: none !important; }

/* the maker's credit, tiny, bottom right of the designer; out of the way of the phone bar */
.kda-credit { position: fixed; right: 14px; bottom: 6px; z-index: 5; font: 500 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #5f666c; pointer-events: none; user-select: none; }
@media (max-width: 899px) { .kda-credit { display: none; } }   /* the whole bottom tab bar range, where it sat on the tabs */
@media print { .kda-credit { display: none; } }

/* ---- Room wizard (October 2026 pass): padded card, numbered steps, choice cards with drawings, a footer that stays put ---- */
.kda-rw .kda-help__card { width: min(640px, 100%); padding: 0; display: flex; flex-direction: column; max-height: min(90%, 720px); }
.kda-rw .kda-sec__head { position: static; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 4px 24px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.kda-rw .kda-sec__head h2 { margin: 0; font: 700 1.12rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #2b3137; }
.kda-rw__body { padding: 8px 24px 0; overflow: auto; flex: 1 1 auto; }
.kda-rw .kda-rw__steps { display: flex; gap: 0; margin: 4px 0 22px; padding: 0; list-style: none; counter-reset: none; font-size: .78rem; }
.kda-rw .kda-rw__steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; background: none !important; color: #8a8f95; border-radius: 0; font-weight: 600; }
.kda-rw .kda-rw__steps li::before { content: ""; position: absolute; top: 13px; right: 50%; left: -50%; height: 2px; background: #e6e2e4; z-index: 0; }
.kda-rw .kda-rw__steps li:first-child::before { display: none; }
.kda-rw .kda-rw__steps li i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #e0dcde; color: #8a8f95; font: 700 .8rem/1 Inter, system-ui, sans-serif; font-style: normal; }
.kda-rw .kda-rw__steps li.is-done::before, .kda-rw .kda-rw__steps li.is-on::before { background: rgb(var(--os-pink-rgb,247,118,156)); }
.kda-rw .kda-rw__steps li.is-done i { background: rgb(var(--os-pink-rgb,247,118,156)); border-color: rgb(var(--os-pink-rgb,247,118,156)); color: #fff; }
.kda-rw .kda-rw__steps li.is-on i { border-color: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 4px rgba(var(--os-pink-rgb,247,118,156),.18); }
.kda-rw .kda-rw__steps li.is-on, .kda-rw .kda-rw__steps li.is-done { color: #2b3137; }
.kda-rw .kda-rw__q { margin: 0 0 14px; font: 700 1.3rem/1.25 Inter, system-ui, sans-serif; letter-spacing: -.015em; color: #1f2429; text-wrap: balance; }
.kda-dfm .kda-dfm__opts { gap: 12px; }
.kda-dfm .kda-dfm__opt { gap: 6px !important; padding: 18px 12px 16px; border: 1.5px solid #e3dfe1; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kda-dfm .kda-dfm__opt:hover { border-color: rgba(var(--os-pink-rgb,247,118,156),.6); transform: translateY(-1px); }
.kda-dfm .kda-dfm__opt:has(input:focus-visible) { outline: 2px solid rgb(var(--os-rose-rgb,201,59,106)); outline-offset: 2px; }
.kda-dfm .kda-dfm__opt:has(input:checked) { border-color: rgb(var(--os-rose-rgb,201,59,106)); background: rgba(var(--os-pink-rgb,247,118,156),.07); box-shadow: 0 0 0 3px rgba(var(--os-pink-rgb,247,118,156),.16); }
.kda-dfm .kda-dfm__opt:has(input:checked)::after { content: "\2713"; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; font: 700 11px/1 Inter, system-ui, sans-serif; }
.kda-dfm .kda-dfm__opt b { font-size: .95rem; color: #1f2429; }
.kda-dfm .kda-dfm__opt small { font-size: .78rem; }
.kda-rw__ic { width: 34px; height: 34px; fill: none; stroke: #5b636b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 2px; }
.kda-rw .kda-dfm__opt:has(input:checked) .kda-rw__ic { stroke: rgb(var(--os-rose-rgb,201,59,106)); }
.kda-rw .kda-rw__row { gap: 20px; align-items: stretch; }
.kda-rw .kda-rw__fields { gap: 12px; }
.kda-rw .kda-rw__fields label { display: flex; align-items: center; gap: 8px; font: 600 .9rem Inter, system-ui, sans-serif; color: #2b3137; }
.kda-rw .kda-rw__fields input, .kda-rw .kda-rw__fields select { height: 40px; border: 1.5px solid #e0dcde; border-radius: 10px; padding: 0 10px; font: 600 15px Inter, system-ui, sans-serif; background: #fff; }
.kda-rw .kda-rw__fields input { width: 4.4em; }
.kda-rw .kda-rw__fields input:focus, .kda-rw .kda-rw__fields select:focus { outline: none; border-color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 3px rgba(var(--os-pink-rgb,247,118,156),.18); }
.kda-rw [data-rwprev] { flex: 1 1 220px; display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #faf8f9; border: 1px solid #eee9ec; }
.kda-rw .kda-rw__sum { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #faf8f9; border: 1px solid #eee9ec; }
.kda-rw .kda-rw__nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px -24px 0; padding: 14px 24px 18px; border-top: 1px solid #eee9ec; background: inherit; }
.kda-rw .kda-rw__nav .btn { height: 44px; min-width: 120px; padding: 0 22px; border-radius: 12px; font: 700 .95rem/1 Inter, system-ui, sans-serif; box-shadow: none; }
.kda-rw .kda-rw__nav .btn--ember { margin-left: auto; }
.kda-rw .kda-rw__back { background: transparent; border: 1.5px solid #e0dcde; color: #2b3137; }
.kda-rw .kda-rw__back:hover { border-color: #2b3137; }
.kda-rw__count { font: 500 .82rem Inter, system-ui, sans-serif; color: #8a8f95; }
@media (max-width: 560px) {
  .kda-rw { padding: 0 !important; place-items: end stretch !important; }
  .kda-rw .kda-help__card { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0 !important; }
  .kda-rw__body { padding: 4px 18px 0; }
  .kda-rw .kda-sec__head { padding: 16px 14px 2px 18px; }
  .kda-rw .kda-rw__steps li span { font-size: .7rem; }
  .kda-dfm .kda-dfm__opts--3 { grid-template-columns: 1fr; }
  .kda-dfm .kda-dfm__opts--3 .kda-dfm__opt { flex-direction: row !important; justify-content: flex-start; text-align: left; padding: 14px 14px; gap: 12px !important; }
  .kda-dfm .kda-dfm__opts--3 .kda-dfm__opt b { min-width: 6.5em; }
  .kda-dfm .kda-dfm__opt { min-width: 0; }
  .kda-rw .kda-rw__q { font-size: 1.15rem; }
  .kda-rw .kda-rw__nav { margin: 18px -18px 0; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Room helper, in the same look as the wizard: one surface, roomy sections, a normal-size action ---- */
.kda-dfm:not(.kda-rw) .kda-help__card { width: min(660px, 100%); }
.kda-dfm:not(.kda-rw) .kda-sec__head { position: static; padding: 18px 20px 2px 24px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.kda-dfm:not(.kda-rw) .kda-sec__head h2 { margin: 0; font: 700 1.12rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #2b3137; }
.kda-dfm .kda-dfm__form { padding: 10px 24px 22px; gap: 22px; }
.kda-dfm .kda-dfm__form legend { font: 700 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: #6b7178; margin-bottom: 10px; }
.kda-dfm .kda-dfm__form fieldset > label { font: 600 .9rem Inter, system-ui, sans-serif; color: #2b3137; }
.kda-dfm .kda-dfm__form input[type=number], .kda-dfm .kda-dfm__form select { height: 42px; border: 1.5px solid #e0dcde; border-radius: 10px; padding: 0 10px; font: 600 15px Inter, system-ui, sans-serif; background: #fff; }
.kda-dfm .kda-dfm__form input[type=number]:focus, .kda-dfm .kda-dfm__form select:focus { outline: none; border-color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 3px rgba(var(--os-pink-rgb,247,118,156),.18); }
.kda-dfm .kda-dfm__opts:not(.kda-dfm__opts--2):not(.kda-dfm__opts--3) .kda-dfm__opt { padding: 14px 6px 12px; }
.kda-dfm .kda-dfm__form .kda-hint { margin: -8px 0 0; font-size: .82rem; line-height: 1.5; color: #6b7178; }
.kda-dfm .kda-dfm__form .btn--block { height: 48px; border-radius: 12px; font: 700 1rem/1 Inter, system-ui, sans-serif; box-shadow: none; }
@media (max-width: 560px) {
  .kda-dfm:not(.kda-rw) { padding: 0 !important; place-items: end stretch !important; }
  .kda-dfm:not(.kda-rw) .kda-help__card { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0 !important; }
  .kda-dfm .kda-dfm__form { padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
  .kda-dfm .kda-dfm__opts:not(.kda-dfm__opts--2):not(.kda-dfm__opts--3) { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 4px 2px 6px; width: 100%; scrollbar-width: none; }
  .kda-dfm .kda-dfm__opts:not(.kda-dfm__opts--2):not(.kda-dfm__opts--3) .kda-dfm__opt { flex: 0 0 112px; scroll-snap-align: start; }
}
.kda-dfm .kda-dfm__form > [data-kind] { display: grid; gap: 22px; }
.kda-dfm .kda-dfm__form > [data-kind][hidden] { display: none; }
@media (max-width: 560px) { .kda-dfm .kda-dfm__form > [data-kind] { gap: 18px; } }
.kda-dfm .kda-dfm__form fieldset, .kda-dfm .kda-dfm__form > [data-kind] > * { min-width: 0; max-width: 100%; }

/* an image with no address never shows the broken-picture icon */
img[src=""], img:not([src]):not([data-qsrc]) { visibility: hidden; }

/* Customize: the catalog's own sizes for this cabinet, each with its code and price */
.kda-cz__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.kda-cz__size { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px 8px; border: 1.5px solid #e3dfe1; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: #2b3137; transition: border-color .15s, box-shadow .15s; }
.kda-cz__size b { font: 700 1rem/1.1 Inter, system-ui, sans-serif; }
.kda-cz__size small { font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b7178; }
.kda-cz__size i { font: 600 .74rem/1.2 Inter, system-ui, sans-serif; font-style: normal; color: rgb(var(--os-rose-rgb,201,59,106)); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kda-cz__size:hover { border-color: rgba(var(--os-pink-rgb,247,118,156),.6); }
.kda-cz__size.is-on { border-color: rgb(var(--os-rose-rgb,201,59,106)); background: rgba(var(--os-pink-rgb,247,118,156),.08); box-shadow: 0 0 0 3px rgba(var(--os-pink-rgb,247,118,156),.16); }

/* Style: ready-made cabinet groups (all walls, all bases...) for a two-tone kitchen */
.kda-cbx__grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.kda-cbx__grp > span { font-size: .8rem; color: #6b7178; margin-right: 2px; }
.kda-cbx__gb { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1.5px solid #e3dfe1; border-radius: 999px; background: #fff; font: 600 .82rem Inter, system-ui, sans-serif; color: #2b3137; cursor: pointer; }
.kda-cbx__gb small { font-size: .72rem; font-weight: 700; color: #fff; background: #2b3137; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.kda-cbx__gb:hover { border-color: rgb(var(--os-rose-rgb,201,59,106)); }

/* Customize: the maker's modifications for this cabinet, as a checklist */
.kda-cz__mods { display: grid; gap: 6px; margin: 4px 0 6px; }
.kda-cz__mod { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1.5px solid #e3dfe1; border-radius: 12px; background: #fff; cursor: pointer; }
.kda-cz__mod input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: rgb(var(--os-rose-rgb,201,59,106)); }
.kda-cz__mod b { display: block; font: 600 .86rem/1.3 Inter, system-ui, sans-serif; color: #2b3137; }
.kda-cz__mod small { display: block; font: 500 .74rem/1.35 Inter, system-ui, sans-serif; color: #6b7178; margin-top: 2px; }
.kda-cz__mod:has(input:checked) { border-color: rgb(var(--os-rose-rgb,201,59,106)); background: rgba(var(--os-pink-rgb,247,118,156),.06); }

/* list price struck through before the business's price */
.kda-pill__list { font-weight: 500; opacity: .6; margin-right: 2px; font-size: .85em; }
.cq__list { color: #6b7580; font-weight: 400; margin-right: 4px; }
/* trim measured from the plan, under the cabinet total */
.cq__trim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(43, 49, 55, .12); border-radius: 10px; font-size: 13px; }
.cq__trim b { flex-basis: 100%; }
.cq__trim-p { color: #5d6670; flex: 1 1 220px; min-width: 0; }
.cq__trim em { font-style: normal; font-weight: 600; color: #2e7d4f; }

/* materials board (materials.js) */
.vm { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,20,15,.6); }
.vm__card-wrap { background: #f5f3ef; border-radius: 18px; width: min(1180px, 100%); max-height: 94vh; overflow: auto; padding: 20px 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.vm__hd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vm__hd p { margin: 0; font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6b7580; }
.vm__hd h2 { margin: 2px 0 0; font: 700 1.4rem Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #16212c; }
.vm__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.vm__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vm__room { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; }
.vm__room img { display: block; width: 100%; height: auto; }
.vm__room--wait { min-height: 220px; display: grid; place-items: center; background: #f5f3ef; }
.vm__wait { display: inline-flex; align-items: center; gap: 10px; font: 600 .9rem Inter, system-ui, sans-serif; color: #5b5459; }
.vm__wait i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(var(--os-rose-rgb,201,59,106),.25); border-top-color: rgb(var(--os-rose-rgb,201,59,106)); animation: vmspin .8s linear infinite; }
@keyframes vmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vm__wait i { animation: none; } }
.vm__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.vm__card { background: #fff; border-radius: 12px; overflow: hidden; cursor: grab; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.vm__card.is-drag { opacity: .45; }
.vm__sw { display: block; aspect-ratio: 4 / 3; max-width: 100%; position: relative; }
.vm__sw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm__sw--two img { width: 50%; }
.vm__sw--two img + img { left: 50%; }
.vm__card small { margin: 10px 12px 0; font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6b7580; }
.vm__card b { margin: 2px 12px 0; font: 600 13.5px/1.3 Inter, system-ui, sans-serif; color: #16212c; overflow-wrap: anywhere; }
.vm__card i { margin: 2px 12px 0; font: 400 12px Inter, system-ui, sans-serif; color: #6b7580; font-style: normal; }
.vm__card b:last-child, .vm__card i:last-child { margin-bottom: 12px; }
.vm__msg { margin: 14px 0 0; font-size: 12.5px; color: #6b7580; }
.vm__empty { margin: 0; color: #6b7580; }
@media (max-width: 760px) { .vm__body { grid-template-columns: 1fr; } .vm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the client brief: the portal project's questionnaire answers beside the plan */
.kda-brief { position: fixed; z-index: 55; top: 72px; right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); overflow: auto; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.35); font: 13px/1.45 Inter, system-ui, sans-serif; color: #16212c; }
.kda-brief header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.kda-brief header small { display: block; font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6b7580; }
.kda-brief header b { font-size: 15px; }
.kda-brief h3 { margin: 14px 0 6px; font: 650 13.5px Inter, system-ui, sans-serif; }
.kda-brief h3 em { font-style: normal; font-weight: 600; font-size: 11px; color: #2e7d4f; margin-left: 4px; }
.kda-brief dl { margin: 0; }
.kda-brief dt { color: #6b7580; font-size: 12px; margin-top: 8px; }
.kda-brief dd { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 760px) { .kda-brief { top: auto; left: 12px; width: auto; max-height: 70vh; bottom: 76px; } }
.kda-brief .kda-hint { margin-top: 16px; }
/* design notes on the plan: the count on the Note tool */
.kda-notebtn { position: relative; }
.kda-notebtn.is-on { background: var(--ember) !important; color: var(--navy) !important; }
.kda-notebtn__n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgb(var(--os-rose-rgb, 201, 59, 106)); color: #fff; font: 700 10px/16px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }

/* Show me around (guide.js): a ring around the part and a note beside it; nothing underneath is blocked */
.vg-ring { position: fixed; z-index: 80; pointer-events: none; border-radius: 14px; border: 2px solid rgb(var(--os-pink-rgb, 247, 118, 156)); box-shadow: 0 0 0 4px rgba(var(--os-pink-rgb, 247, 118, 156), .25), 0 0 0 9999px rgba(16, 22, 28, .28); transition: left .2s, top .2s, width .2s, height .2s; }
.vg { position: fixed; z-index: 81; background: #fff; color: #16212c; border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); font: 13.5px/1.45 Inter, system-ui, sans-serif; }
.vg h3 { margin: 2px 0 4px; font: 700 15px Inter, system-ui, sans-serif; }
.vg p { margin: 0; }
.vg .vg__n { font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6b7580; }
.vg__b { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.vg__b span { flex: 1; }
.vg__skip { border: 0; background: none; padding: 6px 2px; color: #6b7580; font: 600 12.5px Inter, system-ui, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .vg-ring { transition: none; } }

/* the cabinet list: facts under each row and a Details button beside it */
.cq__skuw { position: relative; padding: 0 !important; min-width: 0; }
.cq__skuw > .cq__sku { width: 100%; padding-right: 44px !important; }
.cq__infob { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(43,49,55,.18); background: #fff; color: #2b3137; font: italic 700 13px Georgia, serif; cursor: pointer; display: grid; place-items: center; }
.cq__infob:hover, .cq__infob:focus-visible { border-color: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.cq__fx { display: block; font-style: normal; font-size: .7rem; color: #5d6670; margin-top: 2px; }
.cd--app .cq--browse .cq__skuw > .cq__sku { padding-right: 44px !important; }
.cq-det__card { width: min(560px, 100%) !important; }
.cq-det__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cq-det__hd code { color: rgb(var(--os-rose-rgb,201,59,106)); font-size: 1rem; }
.cq-det__hd h2 { margin: 2px 0 10px !important; }
.cq-det__store { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; font-size: 13px; }
.cq-det__store img { width: 110px; height: 110px; object-fit: contain; background: #f6f4f1; border-radius: 10px; flex: none; }
.cq-det__store p { margin: 4px 0 0; color: #5d6670; }
.cq-det__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: 13px; }
.cq-det__facts dt { color: #6b7580; }
.cq-det__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.cq-det__card h3 { margin: 12px 0 6px; font: 650 13px Inter, system-ui, sans-serif; }
.cq-det__ws { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-det__mods { margin: 0; padding-left: 18px; font-size: 12.5px; }
.cq-det__mods span { color: #5d6670; }
@media (max-width: 520px) { .cq-det__store img { width: 80px; height: 80px; } }

/* the Cabinets panel reads as three steps: brand, door color, cabinets, each with arrows to step through */
.cq__step { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.cq__pk > .cq__step:first-child { margin-top: 2px; }
.cq__stepn { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; font: 700 12px/22px Inter, system-ui, sans-serif; text-align: center; }
.cq__stepl { flex: 1; min-width: 0; display: grid; font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b7580; }
.cq__stepl b { font: 650 13.5px Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #16212c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq__stepb { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(43,49,55,.16); background: #fff; color: #2b3137; font: 600 18px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.cq__stepb:hover, .cq__stepb:focus-visible { border-color: rgb(var(--os-rose-rgb,201,59,106)); color: rgb(var(--os-rose-rgb,201,59,106)); }
.cq__browse-head .cq__oldh { display: none; }
.cq__strip { scroll-snap-type: x mandatory; }
.cq__strip > * { scroll-snap-align: start; }
.cq__step .cq__stepl b { font: 650 13.5px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #16212c !important; }

/* placing a picked cabinet beside or instead of the selected one */
.cq__place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.cq__place:empty { display: none; }
.cq__place > span { width: 100%; font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b7580; }
.cq__place .cd__mini.is-on { background: rgb(var(--os-rose-rgb,201,59,106)); color: #fff; border-color: transparent; }

/* Items on the plan (My plan): numbered rows that match the numbers on the floor plan */
.kda-items summary small { margin-left: 6px; color: #6b7580; font-weight: 600; }
.kda-items__nums { display: flex !important; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; }
.kda-items__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kda-items__list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid rgba(43,49,55,.1); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; color: #16212c; }
.kda-items__list button.is-on { border-color: rgb(var(--os-rose-rgb,201,59,106)); box-shadow: 0 0 0 2px rgba(var(--os-rose-rgb,201,59,106),.15); }
.kda-items__list i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #16212c; color: #fff; font: 700 11px/22px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }
.kda-items__list span { flex: 1; min-width: 0; display: grid; }
.kda-items__list b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-items__list small { font-size: 11.5px; color: #5d6670; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kda-items__list em { flex: none; font-style: normal; font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kda-items__tot { margin: 8px 0 0; font-size: 12.5px; color: #5d6670; text-align: right; }

/* starter layout icons drawn from the layouts themselves */
.ri--plan { width: 78px; height: 66px; }
.ri .ri-tall { fill: #4a5058; stroke: #2b3137; stroke-width: .5; }
.ri .ri-range { fill: #2f3439; stroke: #1d2125; stroke-width: .5; }
.ri .ri-burner { fill: none; stroke: #d5d8db; stroke-width: .45; }
.ri .ri-dw { fill: #e4e7ea; stroke: #a8afb5; stroke-width: .5; }
.ri .ri-sink { fill: #dfeef7; stroke: #5d8fb0; stroke-width: .55; }
.ri .ri-win { stroke: #5d8fb0; stroke-width: 2.2; stroke-linecap: butt; }
.ri .ri-door { stroke: #faf8f4; stroke-width: 2.4; }
/* a pro's markup on the cabinet prices (studio edition, cabinet-quote.js) */
.cq__mk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 0;padding:10px 12px;border:1px dashed var(--line,#e2dde0);border-radius:12px;font-weight:600;font-size:.92rem}
.cq__mk input{width:76px;min-height:36px;padding:0 8px;border:1px solid var(--line,#e2dde0);border-radius:10px;font:inherit;text-align:right}
.cq__mk span{flex-basis:100%;font-weight:400;font-size:.82rem;color:var(--mut,#5b6962)}
/* floating cards are dragged by their header on a wide screen (kitchen-app.js dragCard) */
@media (min-width: 900px) { .kda-sw__card .kda-sec__head, .kda-pick__head { cursor: grab; } .kda-sw__card.is-dragging, .kda-pick.is-dragging { cursor: grabbing; user-select: none; animation: none; } }

/* ===== Phone and tablet audit, October 2026 ===== */
/* the top-bar More menu: its items are full-width rows, not 38px icons (.kda-top .kda-ico set the width) */
.kda-top .kda-menu > * { width: 100%; min-width: 0; }
/* Rename this design: only where the name field is hidden */
.kda-menu > .kda-renbtn { display: none !important; }
@media (max-width: 640px) { .kda-menu > .kda-renbtn { display: flex !important; } }
/* Help on a phone: the title and the Close X share the first row, the two buttons get their own finger-sized row */
@media (max-width: 640px) {
  .kda-help__head { flex-wrap: wrap; gap: 8px; }
  .kda-help__head h2 { flex: 1 1 calc(100% - 64px); min-width: 0; }
  .kda-help__head .kda-sec__x { order: 1; flex: 0 0 auto; }
  .kda-help__head .cd__mini { order: 2; flex: 1 1 0; min-height: 44px; margin: 0 !important; justify-content: center; }
}
/* Sink and faucet wizard on a phone: a bottom sheet with no veil, so the sink in 3D stays in view above it; Back and Next stay at the foot */
@media (max-width: 899px) {
  .kda-sw { background: transparent; place-items: end stretch; padding: 0; pointer-events: none; }
  .kda-sw .kda-sw__card { pointer-events: auto; width: 100%; max-height: 58vh; max-height: 58dvh; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px -20px rgba(36,28,32,.5); }
  .kda-sw__foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper, #fff); border-top: 1px solid var(--line-soft, rgba(36,28,32,.07)); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); margin-top: 10px; }
  .kda-sw__foot .cd__mini { min-height: 44px; }
}
/* the selection card's Done is a full finger target on a phone */
@media (max-width: 899px) { .kda-pick__done { min-height: 44px; min-width: 44px; padding: 0 14px; } }
/* a phone on its side: the sheets and the selection cards dock to the right half, so the plan or the room stays in view on the left */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .kda-panel, .kda--panel .kda-panel, .kda--wide .kda-panel { left: auto; right: 0; top: 0; width: 50%; max-height: none; border-radius: 18px 0 0 0; transform: translateX(105%); }
  .kda--panel .kda-panel { transform: none; }
  .kda-pick { left: auto !important; right: 0 !important; width: 50% !important; max-height: calc(100% - 8px); overflow-y: auto; border-radius: 18px 0 0 0; }
  .cd--app .cd__sel { left: auto; right: 8px; width: calc(50% - 8px); }
  .kda-sw { place-items: stretch end; }
  .kda-sw .kda-sw__card { width: 50%; max-height: 100vh; max-height: 100dvh; border-radius: 18px 0 0 18px; }
}
/* typing on a touch screen: the bottom tab bar steps aside for the keyboard (kitchen-app.js adds kda-typing) */
@media (max-width: 899px) and (pointer: coarse) {
  .kda-typing .kda-rail { display: none; }
  .kda-typing .kda-panel { bottom: 0; }
}
/* Import and export: Choose file reads centered when the button fills the row on a phone */
.kda-hub .kda-hcard .kda-file { display: flex; justify-content: center; }
/* the Finishes tabs are finger-sized on a phone */
@media (max-width: 899px) { .kda-fin__tabs button { min-height: 40px; padding: 8px 13px; } }
/* finger-sized targets on a touch screen (44px, WCAG 2.5.5) for the controls that were 26 to 40px */
@media (pointer: coarse) {
  .cd--app .cd__views button { min-height: 44px; }
  .cq__stepb { width: 44px; height: 44px; min-width: 44px; }
  .kda-cbx__b { min-height: 44px; padding: 8px 12px; }
  .cd--app .cd__sel .cd__mini { min-height: 44px; }
  .kda-lib__act button { min-height: 44px; padding: 6px 10px; }
  .kda-tabs button { min-height: 44px; }
  .kda-sec .cd__lbl input[type="checkbox"], .kda-check input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
}
/* a phone on its side: the top bar, the bottom tab bar and the floating tools keep clear of the notch and the rounded corners */
.kda-top { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
@media (max-width: 899px) {
  .kda-top { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .kda-rail { padding-left: max(2px, env(safe-area-inset-left)); padding-right: max(2px, env(safe-area-inset-right)); }
  .kda-tools { left: max(10px, env(safe-area-inset-left)); }
}
/* the welcome card on a phone puts this button above the heading, where "Or" reads oddly */
.kda-hello__short { display: none; }
@media (max-width: 899px) { .kda-hello__long { display: none; } .kda-hello__short { display: inline; } }
/* the plan's selection card moves to the top when the piece is low on the plan, so it never covers it */
.cd--app .cd__sel.cd__sel--top { bottom: auto; top: 72px; }
@media (max-width: 899px) { .cd--app .cd__sel.cd__sel--top { top: 60px; bottom: auto; } }
/* Design it for me: the submit button stays in view at the foot of the card on a short screen (1280 x 720) */
.kda-dfm__form [type="submit"] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 16px -6px #fff; }
/* the wizard on a wide screen starts below the view tabs and fits the window, Back and Next always in view (a 900px tall window cut them off) */
@media (min-width: 900px) {
  .kda-sw { padding-top: 140px; }
  .kda-sw .kda-sw__card { max-height: calc(100vh - 158px); max-height: calc(100dvh - 158px); overflow: auto; }
  .kda-sw__foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper, #fff); border-top: 1px solid var(--line-soft, rgba(36,28,32,.07)); margin-top: 10px; padding-top: 12px; padding-bottom: 12px; }
}
/* My plan: no empty Budget options fold when the dial has nothing to offer */
details.kda-fold:has(> .kda-dial:empty) { display: none; }
/* toasts sit under the view tabs on a wide screen, not over them */
@media (min-width: 900px) { .kda-toast { top: 134px; } }
/* My plan: the links in the finish checklist and the countertop card at the card's text size */
.kda-finish .kda-link, .kda-ctr .kda-link { font-size: .82rem; }
/* rows that scroll sideways (cabinet categories, brand logos, door colors) fade at the right edge, so it is clear there is more */
.cd--app .cq--browse .cq__tabs, .kda-pb__cats--logos, .cq__strip, .kda-cbx__strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 28px; }
/* the cabinet card's size stays on one line (also without the glass look) */
.cq__sku--pic .cq__sku-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* floor and tile picture tiles: a neutral plate behind the picture (it shows while loading and if the picture fails) */
.kda-sf__card > i { background-color: #ece8e3; }
/* Price panel door cards: every picture square and full width, cards aligned at the top; on a phone one even row that swipes
   (the 72px columns from above mixed with site.css's 34% sideways columns made cards of two widths) */
.cq__lines { align-items: start; }
.cq__lines > .cq__line > span { width: 100%; aspect-ratio: 1; height: auto; }
@media (max-width: 640px) { .cq__lines { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 112px; } }

/* ---- audit round 2: contrast, landmarks, skins ---- */
/* rose as text: a darker rose (#a82f5d, 6:1 on white and the pale tints) for words; fills keep the brand rose #c93b6a. A skin's ink takes its place */
html.kda-page { --rose-text: #a82f5d; }
html.has-skin { --rose-text: var(--skin-ink); }
.kda-link { color: var(--rose-text, var(--blue)); }
.kda-toast .kda-link { color: #ffcf96; }
.kda-rail button.is-on, .kda-rail button[data-open="price"].is-on { color: var(--rose-text, var(--blue)); }
.k3p__brandstone, .kda-pb__w button.is-on, .kda-pc__qty button, .kda-pc__qty span { color: var(--rose-text, var(--blue)); }
.k3p__brandstone { border-color: var(--rose-text, var(--blue)); }
.k3p__brandstone:hover { background: var(--blue); color: #fff; }
/* field hints: placeholders readable (4.5:1 on white) */
.cd ::placeholder { color: #6b6f73; opacity: 1; }
/* Skip to the design: hidden until it has the keyboard focus */
.kda-skip { position: fixed; left: 12px; top: -60px; z-index: 2147483001; padding: 10px 16px; border-radius: 10px; background: #fff; color: #2b3137; font: 700 .9rem Inter, system-ui, sans-serif; text-decoration: underline; box-shadow: 0 6px 20px -6px rgba(20,22,24,.45); }
.kda-skip:focus { top: 12px; outline: 2px solid #a82f5d; outline-offset: 2px; }
.cd__stage:focus { outline: none; }
.cd__stage:focus-visible { outline: 2px solid #a82f5d; outline-offset: -2px; }
/* a skin that says no Beta tag (skin.beta false, every white-label profile) */
html.skin-nobeta .kda-top .kda-brand .kda-beta, html.skin-nobeta .kda-beta { display: none !important; }
/* PoshHaus Stone and other dark-chrome skins: the side panel and the phone sheet are plain white, not a dimmed see-through sheet */
/* a save that failed: said out loud (role=alert), under the ordinary toast and in a warning red */
.kda-toast--alert { top: 124px; background: #8a1f2b; }
/* My plan: the parts list groups are h4 under the panel's h3 (they were h5, a skipped level); same look as before */
.cd__lgrp h4 { margin: 0 0 4px; font: 800 0.77rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.cd__lgrp h4 span { color: var(--ink-soft); font-weight: 600; }
/* a very short window (400% zoom, a phone on its side): the top bar and the tab bar shrink so the plan keeps most of the height */
@media (max-height: 420px) {
  .kda-top { min-height: 40px !important; padding-top: calc(3px + env(safe-area-inset-top)); padding-bottom: 3px; gap: 6px; }
  .kda-top .kda-brand__logo, html.has-skin .kda-brand__logo--skin { height: 26px !important; }
  .kda-top .kda-ico, .kda-top .kda-pill { min-height: 34px; height: 34px; }
  .kda-rail button span, .kda-railmore span { display: none; }
  .kda-rail button, .kda-railmore { padding-block: 5px; min-height: 36px; }
  .cd--app .cd__views { top: 4px; }
}
/* the narrowest phones (320 px): the three view buttons fit without being cut */
@media (max-width: 340px) { .cd--app .cd__views { max-width: calc(100vw - 16px); } .cd--app .cd__views button { padding-inline: 7px; font-size: .72rem; letter-spacing: 0; } }
/* a client's View in 3D (?view=1, read only): the note sits at the bottom, clear of the view switch, and can be closed; nothing to edit shows */
.crm-bar.is-view { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { .crm-bar.is-view { bottom: calc(74px + env(safe-area-inset-bottom)); } }
.crm-bar__x { padding: 4px 10px !important; font-size: 1.1rem !important; line-height: 1 !important; background: rgba(255,255,255,.16) !important; color: #fff !important; }
html.kda-viewonly .kda-top .kda-pill, html.kda-viewonly .kda-top__hist, html.kda-viewonly .kda-hwrap, html.kda-viewonly #cdUndo, html.kda-viewonly #cdRedo { display: none !important; }
/* the Sink & faucet sheet is open: the plan's selection card steps aside (the sheet has the same piece's settings) */
.cd--app:has(.kda-sw:not([hidden])) .cd__sel { display: none !important; }
/* 3D View options on a desktop: a side sheet off the bar's right edge, so the middle of the scene stays in sight (a phone keeps its sheet) */
@media (min-width: 900px) {
  .cd--app .k3--float .k3__bar:has(.k3__more[open]) { overflow: visible; }
  .cd--app .k3--float .k3__more { position: static; }
  .cd--app .k3--float .k3__pop { top: auto; bottom: 0; left: calc(100% + 12px); right: auto; max-height: 60vh; overflow-y: auto; z-index: 40; }
}
@media (min-width: 900px) { .cd--app .k3--float .k3__pop.k3__pop--up { left: auto; right: 0; bottom: calc(100% + 10px); } }
/* a dark scene (Evening, Night): the maker's credit in light type so it still reads */
html.k3-dark .kda-credit { color: #fff; background: rgba(20,24,28,.6); padding: 1px 6px; border-radius: 6px; }   /* on the dark scene or the light frame under it, it reads either way */
/* a wide screen with room beside the view tabs: the toast sits in that top row (placed by toast() in kitchen-app.js), so it covers
   neither the tabs nor the plan's top dimensions; without the room it keeps the 134 px place under the tabs */
.kda-toast.kda-toast--side { transform: translate(0, -12px); text-align: left; }
.kda-toast.kda-toast--side.is-on { transform: translate(0, 0); }
/* a phone with the welcome card up: the card scrolls in its own box below the view tabs (it ran up over them), and the floating plan
   toolbar, inert behind it anyway, steps out of the way */
@media (max-width: 899px) {
  .cd--app .kda-hello { top: 60px; padding-top: 8px; }
  .cd--app .cd__stage:has(> .kda-hello:not([hidden])) .kda-tools { display: none; }
}
/* door colors: every color at once, the real door photo with its name, no sideways scrolling */
.cq__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 9px 7px; padding: 2px 2px 4px; }
.cq__chips .cq__sw { display: grid; gap: 4px; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; cursor: pointer; text-align: center; min-width: 0; }
.cq__sw-pic { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #f4f1f2; box-shadow: 0 0 0 1px rgba(36,28,32,.14); transition: transform .12s, box-shadow .12s; }
.cq__sw-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cq__sw-pic .cq__door { width: 100%; height: 100%; }
.cq__sw-n { font: 600 10.5px/1.2 Inter, system-ui, sans-serif; color: #5b5558; overflow-wrap: anywhere; }
.cq__chips .cq__sw:hover .cq__sw-pic { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(36,28,32,.2), 0 4px 10px rgba(36,28,32,.14); }
.cq__chips .cq__sw.is-on { box-shadow: none; border: 0; }
.cq__chips .cq__sw.is-on .cq__sw-pic { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--os-rose-rgb,201,59,106)); }
.cq__chips .cq__sw.is-on .cq__sw-n { color: rgb(var(--os-rose-rgb,201,59,106)); font-weight: 750; }
.cq__chips .cq__sw:focus-visible { outline: none; } .cq__chips .cq__sw:focus-visible .cq__sw-pic { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2b3137; }
/* Export in the free designer: shown, with a lock */
.kda-hbtn.is-locked { opacity: .8; }
.kda-hbtn.is-locked svg:last-child { width: 14px; height: 14px; margin-left: 2px; }
/* Products in the free designer: the tab carries a small lock and the panel says what unlocking gives */
[data-open="app"].is-locked { position: relative; }
.kda-lockmark { position: absolute; top: 4px; right: 6px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(36,28,32,.15); }
.kda-lockmark svg { width: 10px; height: 10px; }
.kda-locked { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 22px; color: #5b5558; }
.kda-locked > svg { width: 34px; height: 34px; color: #2b3137; }
.kda-locked h3 { margin: 0; font: 750 1.05rem Inter, system-ui, sans-serif; color: #2b3137; }
.kda-locked p { margin: 0; max-width: 34ch; line-height: 1.45; font-size: .9rem; }
/* a business's skin: its logo with "3D Designer" set small under it, the way its own site would sign a tool */
html.has-skin .kda-skin__stack { display: inline-grid; justify-items: center; align-content: center; gap: 3px; line-height: 1; }
html.has-skin .kda-skin__stack .kda-brand__logo--skin { height: calc(var(--skin-logo-h) * .78) !important; margin-block: 0; }
html.has-skin .kda-skin__stack .kda-skin__tag { display: block; margin: 0; font-size: .6rem; font-weight: 600; letter-spacing: .28em; padding-left: .28em; }
@media (max-width: 640px) { html.has-skin .kda-skin__stack .kda-skin__tag { display: block; font-size: .5rem; letter-spacing: .2em; } }
/* a phone with a panel open: the sheet takes the lower half and the plan or 3D fits the half above it, so a color or a cabinet picked
   in the sheet is seen at once (the stage is resized, not covered; the app redraws on open) */
@media (max-width: 899px) and (orientation: portrait) {
  .cd--app.kda--panel:not(.kda--wide) .kda-panel { height: 50vh; max-height: 50vh; }
  .cd--app.kda--panel:not(.kda--wide) .cd__stage { height: calc(100% - 50vh + 8px); align-self: start; }
}