/* A5 CRM — css/kp-cart.css   «КП и каталог» variant «Одна страница» (screens/kp-cart.js)
   The Library with the current КП as a right column, like a cart. Every rule under html[data-cd-look="c"], .kp-cart- classes;
   colours are the tokens of base.css (both themes) plus the library's --cdc-matte (the packshot matte).
   No blue fills or frames: a pinned («сюда») room is a neutral filled dot + a grey tag; the column's one blue is «В чат клиента»
   (or «+ КП для сделки» while no КП is chosen), and it goes grey while a sheet's «В КП» holds the screen's blue. */

html[data-cd-look="c"]{--kp-cart-w:clamp(344px,26vw,400px)}

/* ── the page: the list on the left, the column on the right, on every tab (Шаблоны · Документы too: the tabs never jump) ── */
html[data-cd-look="c"] .cdc-lib[data-link="cart"]{grid-template-columns:minmax(0,1fr) var(--kp-cart-w)}
html[data-cd-look="c"] .cdc-lib[data-link="cart"] > .cdc-tb{grid-column:1;grid-row:1;padding-right:28px}
html[data-cd-look="c"] .cdc-lib[data-link="cart"] > .cdc-body{grid-column:1;grid-row:2}
html[data-cd-look="c"] .cdc-lib[data-link="cart"] .cdc-main{padding-right:28px}
/* the column replaces the tray, and carries «+ КП для сделки» (the header's «+ КП» goes while it is on) */
html[data-cd-look="c"] .cdc-lib[data-link="cart"] > .cdc-tray{display:none}
html[data-cd-look="c"] body.kp-cart-on #page-actions [data-cd-act="new-kp"]{display:none}
/* a product / set sheet docks left of the column, under the page header (its top = the column's top, set by the script), and
   fades in rather than sliding over the column. Below 1440 px the list would keep only its photos: the sheet covers the column. */
html[data-cd-look="c"] body.kp-cart-on .cdc-sheet > .drawer{top:var(--kp-cart-top,0px);right:var(--kp-cart-w);bottom:0;opacity:0;transform:translateX(16px);transition:transform var(--dur-4) var(--ease-out),opacity var(--dur-3) var(--ease-out)}
html[data-cd-look="c"] body.kp-cart-on .cdc-sheet.is-open > .drawer{opacity:1;transform:none}
html[data-cd-look="c"] body.kp-cart-on .cdc-sheet.is-closing > .drawer{opacity:0;transform:translateX(16px);transition:transform var(--dur-3) var(--ease-in),opacity var(--dur-3) var(--ease-in)}
@media (max-width:1439px){
  html[data-cd-look="c"] body.kp-cart-on .cdc-sheet > .drawer{right:0}
}
/* the sheet's «В КП · <room>»: a long room name ends in «…», the button never pushes «В WhatsApp» out */
html[data-cd-look="c"] body.kp-cart-on .cdc-sheet .cdc-sh-f [data-cd-act="sheet-add"]{min-width:0;max-width:100%}
html[data-cd-look="c"] .kp-cart-bl{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* while a sheet is open, the toasts rise above its footer («Вернуть» never covers «В WhatsApp» / «В КП») */
html[data-cd-look="c"] body.kp-cart-on.kp-cart-sheet #toasts{transform:translate(-50%,calc(-1 * var(--kp-cart-lift,64px)))}

/* ── the column ── */
html[data-cd-look="c"] .kp-cart{grid-column:2;grid-row:1 / -1;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;background:var(--bg);box-shadow:inset 1px 0 0 var(--border);container:kpcart / inline-size}
html[data-cd-look="c"] .kp-cart .tnum{font-variant-numeric:tabular-nums}
html[data-cd-look="c"] .kp-cart button:not(.btn){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html[data-cd-look="c"] .kp-cart button:not(.btn):focus-visible,html[data-cd-look="c"] .kp-cart [role="button"]:focus-visible{outline:0;box-shadow:var(--focus-ring)}

/* head: one 36 px line level with the Library's tabs, its hairline continues theirs */
html[data-cd-look="c"] .kp-cart-hd{display:flex;align-items:center;gap:8px;min-width:0;height:36px;padding:0 12px 0 20px;box-shadow:inset 0 -1px 0 var(--border),inset 1px 0 0 var(--border)}
html[data-cd-look="c"] .kp-cart-hl{font:var(--t-body-strong);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-sw{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;height:28px;margin:0 0 4px -8px;padding:0 8px;border-radius:var(--radius-s);text-align:left;transition:background var(--dur-1)}
html[data-cd-look="c"] .kp-cart-sw:hover,html[data-cd-look="c"] .kp-cart-sw[aria-expanded="true"]{background:var(--surface-hover)}
html[data-cd-look="c"] .kp-cart-who{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-strong);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-no{flex:none;font:var(--t-mono);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-sw .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
html[data-cd-look="c"] .kp-cart-hd .badge{flex:none;margin:0 0 4px auto}

/* the rooms */
html[data-cd-look="c"] .kp-cart-sc{min-height:0;overflow:auto;padding:10px 12px 20px;overscroll-behavior:contain;scrollbar-width:thin}
html[data-cd-look="c"] .kp-cart-room{padding:0 0 6px}
html[data-cd-look="c"] .kp-cart-room + .kp-cart-room{margin-top:6px;padding-top:6px;box-shadow:inset 0 1px 0 var(--border-soft)}
html[data-cd-look="c"] .kp-cart-rh{display:flex;align-items:center;gap:8px;min-width:0;height:36px;padding:0 8px;border-radius:var(--radius-s);cursor:pointer;outline:0;transition:background var(--dur-1)}
html[data-cd-look="c"] .kp-cart-rh:hover{background:var(--surface-hover)}
html[data-cd-look="c"] .kp-cart-rh b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-strong);color:var(--text-strong)}
/* the room name keeps its width: the meta never shrinks it below its own size first */
html[data-cd-look="c"] .kp-cart-rh b{flex:0 1 auto}
/* a neutral radio: shown on hover (the way to pin), filled on the pinned room; at rest every piece goes to its own room and
   the headers stay quiet */
html[data-cd-look="c"] .kp-cart-dot{flex:none;width:14px;height:14px;border-radius:50%;opacity:0;box-shadow:inset 0 0 0 1.5px var(--control-border);transition:box-shadow var(--dur-2) var(--ease-out),opacity var(--dur-1)}
html[data-cd-look="c"] .kp-cart-rh:is(:hover,:focus-visible) .kp-cart-dot{opacity:1}
html[data-cd-look="c"] .kp-cart-rh:hover .kp-cart-dot{box-shadow:inset 0 0 0 1.5px var(--control-border-hover)}
html[data-cd-look="c"] .kp-cart-room.on .kp-cart-dot{opacity:1;box-shadow:inset 0 0 0 4.5px var(--text-strong)}
html[data-cd-look="c"] .kp-cart-here{flex:none}
html[data-cd-look="c"] .kp-cart-rs{flex:none;margin-left:auto;padding-left:8px;font:var(--t-caption);color:var(--text-3);white-space:nowrap}
html[data-cd-look="c"] .kp-cart-re{display:flex;align-items:center;gap:8px;margin:0;padding:2px 8px 8px 30px;font:var(--t-caption);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart .kp-cart-lk{flex:none;margin-left:auto;padding:0;font:var(--t-caption-strong);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart .kp-cart-lk:hover{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
/* a narrow column (≈1280 screens): the filled dot alone says «сюда», the name keeps the room */
@container kpcart (max-width:379px){
  html[data-cd-look="c"] .kp-cart-here{display:none}
}

/* a line: photo · name ×, then «2 шт · по 600» … sum; − / + show on hover or focus (the rows stay as calm as the rest of the CRM) */
html[data-cd-look="c"] .kp-cart-ls{list-style:none;margin:0;padding:0}
html[data-cd-look="c"] .kp-cart-l{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ph t t" "ph q s";column-gap:12px;row-gap:4px;align-items:center;padding:8px;border-radius:var(--radius-m);transition:background var(--dur-1)}
html[data-cd-look="c"] .kp-cart-l:hover,html[data-cd-look="c"] .kp-cart-l:focus-within{background:var(--surface-hover)}
html[data-cd-look="c"] .kp-cart-ph{grid-area:ph;align-self:start;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-s);background:var(--cdc-matte);overflow:hidden}
html[data-cd-look="c"] .kp-cart-ph img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;filter:brightness(1.04)}
html[data-cd-look="c"] .kp-cart-ph.g{background:var(--surface-offset);color:var(--icon)}
html[data-cd-look="c"] .kp-cart-ph.g .ic{width:16px;height:16px}
html[data-cd-look="c"] .kp-cart-ph img.broken{visibility:hidden}
html[data-cd-look="c"] .kp-cart-t{grid-area:t;display:flex;align-items:baseline;gap:6px;min-width:0}
html[data-cd-look="c"] .kp-cart .kp-cart-nm{min-width:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-medium);color:var(--text-strong);text-align:left}
html[data-cd-look="c"] .kp-cart button.kp-cart-nm:hover{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
html[data-cd-look="c"] .kp-cart-t small{flex:none;font:var(--t-caption);color:var(--text-3)}
/* × sits at the end of the name's line: the name keeps the whole width at rest and makes room for it on hover */
html[data-cd-look="c"] .kp-cart .kp-cart-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-s);color:var(--icon);opacity:0;transition:opacity var(--dur-1),background var(--dur-1)}
html[data-cd-look="c"] .kp-cart-l:is(:hover,:focus-within) .kp-cart-t{padding-right:24px}
html[data-cd-look="c"] .kp-cart-l:hover .kp-cart-x,html[data-cd-look="c"] .kp-cart-l:focus-within .kp-cart-x{opacity:1}
html[data-cd-look="c"] .kp-cart .kp-cart-x:hover{background:var(--surface-pressed);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-x .ic{width:14px;height:14px}
html[data-cd-look="c"] .kp-cart-qr{grid-area:q;display:flex;align-items:center;gap:4px;min-width:0;height:24px}
html[data-cd-look="c"] .kp-cart-q{flex:none;display:inline-flex;align-items:center;height:24px;border-radius:var(--radius-s)}
html[data-cd-look="c"] .kp-cart .kp-cart-q button{display:none;place-items:center;width:24px;height:24px;border-radius:var(--radius-s);color:var(--icon-strong);transition:background var(--dur-1),color var(--dur-1)}
html[data-cd-look="c"] .kp-cart .kp-cart-q button:hover:not(:disabled){background:var(--surface-pressed);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart .kp-cart-q button:disabled{color:var(--text-disabled);cursor:default}
html[data-cd-look="c"] .kp-cart-q .ic{width:12px;height:12px;stroke-width:2.4}
/* the field hugs its number (1200 м², 125,5 пог. м fit) */
html[data-cd-look="c"] .kp-cart-q input{width:calc(var(--n,1) * 1ch + 4px);max-width:72px;height:22px;margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;text-align:left;font:var(--t-body-medium);font-variant-numeric:tabular-nums;color:var(--text-strong);outline:0}
html[data-cd-look="c"] .kp-cart-l:is(:hover,:focus-within) .kp-cart-qr{gap:8px}
html[data-cd-look="c"] .kp-cart-l:is(:hover,:focus-within) .kp-cart-q{box-shadow:inset 0 0 0 1px var(--border)}
html[data-cd-look="c"] .kp-cart-l:is(:hover,:focus-within) .kp-cart-q button{display:grid}
html[data-cd-look="c"] .kp-cart-l:is(:hover,:focus-within) .kp-cart-q input{width:clamp(34px,calc(var(--n,1) * 1ch + 14px),72px);text-align:center}
html[data-cd-look="c"] .kp-cart-q input:focus{background:var(--surface);box-shadow:var(--focus-ring)}
html[data-cd-look="c"] .kp-cart-u{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-s{grid-area:s;justify-self:end;font:var(--t-body-medium);color:var(--text);white-space:nowrap}
html[data-cd-look="c"] .kp-cart-l.off :is(.kp-cart-ph,.kp-cart-nm,.kp-cart-qr){opacity:.55}
html[data-cd-look="c"] .kp-cart-l.off .kp-cart-s{color:var(--text-3);text-decoration:line-through}

/* «+ Комната» and its one-line field */
html[data-cd-look="c"] .kp-cart .kp-cart-nr{display:inline-flex;align-items:center;gap:6px;height:32px;margin-top:6px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-body);color:var(--text-3);transition:background var(--dur-1),color var(--dur-1)}
html[data-cd-look="c"] .kp-cart .kp-cart-nr:hover{background:var(--surface-hover);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-nr .ic{width:12px;height:12px;stroke-width:2.4}
html[data-cd-look="c"] .kp-cart-nri{display:flex;align-items:center;gap:8px;margin-top:6px;padding:0 0 0 8px}
html[data-cd-look="c"] .kp-cart-nri .input{flex:1;min-width:0;height:30px}

/* an empty КП */
html[data-cd-look="c"] .kp-cart-empty{display:grid;gap:6px;padding:20px 8px 8px}
html[data-cd-look="c"] .kp-cart-empty b{font:var(--t-body-strong);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-empty span{font:var(--t-body);color:var(--text-3)}

/* the foot: the sums with VAT, «Открыть КП» · «В чат клиента» (an empty КП: «Открыть КП» alone) */
html[data-cd-look="c"] .kp-cart-ft{padding:14px 20px 20px;background:var(--bg);box-shadow:inset 0 1px 0 var(--border),inset 1px 0 0 var(--border)}
html[data-cd-look="c"] .kp-cart-ft.e{padding-top:16px}
html[data-cd-look="c"] .kp-cart-tot{display:grid;gap:4px;margin:0 0 16px}
html[data-cd-look="c"] .kp-cart-tot > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
html[data-cd-look="c"] .kp-cart-tot dt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-tot dd{margin:0;font:var(--t-body);color:var(--text);white-space:nowrap}
html[data-cd-look="c"] .kp-cart-tot .tt{margin-top:6px}
html[data-cd-look="c"] .kp-cart-tot .tt dt{font:var(--t-body-strong);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-tot .tt dd{font:600 18px/24px var(--font-sans);letter-spacing:-.01em;color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-cd-look="c"] .kp-cart-acts.one{grid-template-columns:1fr}
html[data-cd-look="c"] .kp-cart-acts .btn{height:32px;min-width:0;padding:0 10px}
html[data-cd-look="c"] .kp-cart-acts .btn .ic{width:14px;height:14px}

/* no КП chosen: «+ КП для сделки» and the latest drafts (past five: «Все черновики · n ›») */
html[data-cd-look="c"] .kp-cart[data-state="none"]{grid-template-rows:auto minmax(0,1fr)}
html[data-cd-look="c"] .kp-cart-none{display:grid;justify-items:start;gap:8px;padding:28px 8px 8px}
html[data-cd-look="c"] .kp-cart-gl{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-m);background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border-soft);font:var(--t-caption-strong);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-none > b{margin-top:6px;font:var(--t-heading-s);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-none > p{margin:0;font:var(--t-body);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-na{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
html[data-cd-look="c"] .kp-cart-na .btn{height:32px;padding:0 12px}
html[data-cd-look="c"] .kp-cart-none > h4{margin:28px 0 2px;font:var(--t-caption-strong);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-dl{display:grid;gap:2px;width:calc(100% + 16px);margin:0 -8px}
html[data-cd-look="c"] .kp-cart .kp-cart-dr{display:grid;gap:2px;width:100%;min-width:0;padding:8px;border-radius:var(--radius-s);text-align:left;transition:background var(--dur-1)}
html[data-cd-look="c"] .kp-cart .kp-cart-dr:hover{background:var(--surface-hover)}
html[data-cd-look="c"] .kp-cart-dr .a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
html[data-cd-look="c"] .kp-cart-dr b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-medium);color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-dr .no{flex:none;font:var(--t-mono);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-dr small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption);color:var(--text-3)}
html[data-cd-look="c"] .kp-cart-all .a{align-items:center;justify-content:flex-start;gap:4px}
html[data-cd-look="c"] .kp-cart-all b{color:var(--text-2)}
html[data-cd-look="c"] .kp-cart-all:hover b{color:var(--text-strong)}
html[data-cd-look="c"] .kp-cart-all .ic{flex:none;width:12px;height:12px;color:var(--icon)}

/* ── motion: the flight, the pop (warm wash + the photo settling), the bump of a changed number ── */
html[data-cd-look="c"] .kp-cart-fly{position:fixed;z-index:65;pointer-events:none;border-radius:var(--radius-m);background:var(--cdc-matte);overflow:hidden;box-shadow:var(--shadow-2);will-change:transform,opacity}
html[data-cd-look="c"] .kp-cart-fly img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;filter:brightness(1.04)}
html[data-cd-look="c"] .kp-cart-fly.cover{background:var(--surface-offset)}
html[data-cd-look="c"] .kp-cart-fly.cover img{object-fit:cover;mix-blend-mode:normal;filter:none}
html[data-cd-look="c"] .kp-cart-l.wait .kp-cart-ph > *{opacity:0}
html[data-cd-look="c"] .kp-cart-l.pop{animation:kp-cart-wash 1.2s var(--ease-out)}
html[data-cd-look="c"] .kp-cart-l.pop .kp-cart-ph{animation:kp-cart-pop 380ms var(--ease-spring)}
html[data-cd-look="c"] .kp-cart-rh.pop{animation:kp-cart-wash 1.2s var(--ease-out)}
html[data-cd-look="c"] .kp-cart-rh.just :is(.kp-cart-here,.kp-cart-dot){animation:kp-cart-pop 320ms var(--ease-spring)}
html[data-cd-look="c"] .kp-cart-l.bump :is(.kp-cart-q input,.kp-cart-s),html[data-cd-look="c"] .kp-cart-tot dd.bump{animation:kp-cart-bump var(--dur-4) var(--ease-out)}
html[data-cd-look="c"] .kp-cart-sc.in{animation:kp-cart-in var(--dur-4) var(--ease-out)}
@keyframes kp-cart-wash{from{background-color:var(--flash-bg)}}
@keyframes kp-cart-pop{0%{transform:scale(.7);opacity:.4}55%{transform:scale(1.08);opacity:1}100%{transform:none}}
@keyframes kp-cart-bump{from{transform:translateY(-3px);opacity:.35}}
@keyframes kp-cart-in{from{opacity:0;transform:translateY(4px)}}

/* ── the КП page: «Библиотека /» first in the crumb ── */
html[data-cd-look="c"] #title .kp-cart-lib{flex:none}

/* reduced motion: no flight, no scale, no slide; the wash (a colour, not a movement) stays */
@media (prefers-reduced-motion: reduce){
  html[data-cd-look="c"] .kp-cart-l.pop,html[data-cd-look="c"] .kp-cart-rh.pop{animation:kp-cart-wash 1.2s linear!important}
  html[data-cd-look="c"] :is(.kp-cart-l.pop .kp-cart-ph,.kp-cart-rh.just .kp-cart-here,.kp-cart-rh.just .kp-cart-dot,.kp-cart-l.bump .kp-cart-q input,.kp-cart-l.bump .kp-cart-s,.kp-cart-tot dd.bump,.kp-cart-sc.in){animation:none!important}
  html[data-cd-look="c"] body.kp-cart-on .cdc-sheet > .drawer{transform:none!important}
  html[data-cd-look="c"] .kp-cart-dot{transition:none}
}

/* the Library's toolbar beside the column is a container (library.css keeps its own name cdctb on it for the filter pills) */
html[data-cd-look="c"] .cdc-lib[data-link="cart"]:is([data-tab="products"],[data-tab="sets"],[data-tab="services"],[data-tab="docs"]) > .cdc-tb{container:kpcartf cdctb / inline-size}
/* Документы beside the column on a ≈1280 screen: a shorter search, no «20 документов» (the «Все 20» view says it); anything still
   too wide wraps instead of being cut */
@container kpcartf (max-width: 760px){
  html[data-cd-look="c"] .cdc-lib[data-link="cart"][data-tab="docs"] .cdc-r2{flex-wrap:wrap;row-gap:8px}
  html[data-cd-look="c"] .cdc-lib[data-link="cart"][data-tab="docs"] .cdc-search{width:180px}
  html[data-cd-look="c"] .cdc-lib[data-link="cart"][data-tab="docs"] .cdc-search:focus-within{width:260px}
  html[data-cd-look="c"] .cdc-lib[data-link="cart"][data-tab="docs"] .cdc-count{display:none}
}