/* Vilka · цвета продукта и оформление результата (развёртка + вилка цены + замер). */
:root {
  --brand: #7a4a2e; --brand-2: #8f5a38; --brand-ink: #5c3620; --brand-soft: #f6eee8; --brand-line: #e8d6c8;
  --accent: #a3c39a; --accent-soft: #eef5ec; --accent-ink: #3e6236;
}
.vk { display: flex; flex-direction: column; gap: 14px; }
.vk-nt, .vk-nt * { transition: none !important; }
.vk-head { display: flex; flex-direction: column; gap: 8px; }
.vk-no { font-size: 13px; color: var(--muted); font-weight: 500; }
.vk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 31px; }
.vk-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 14px; font-weight: 600; border: 1px solid var(--brand-line); white-space: nowrap; }
.vk-chip.c2 { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.vk-body { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* лист с развёрткой */
.vk-sheet { border: 1px solid var(--brand-line); border-radius: 14px; padding: 10px 12px 6px; }
.vk-sheet-h { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.vk-sheet-h > span:last-child { color: var(--muted); white-space: nowrap; }
.vk-cnt { color: var(--brand); font-variant-numeric: tabular-nums; }
.vk-svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.vk-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* цвета фасадов: меняются вместе с переключателем */
.vk-dev { --fac: #fdfbf7; --fac-e: #8f7e6b; --hdl: #7a6c60; }
.vk-dev[data-f="wood"], .vk-dev[data-f="oak"] { --fac: #c9945c; --fac-e: #8a5d35; --hdl: #4a3220; }
.vk-dev[data-f="graph"] { --fac: #474a4f; --fac-e: #25272a; --hdl: #d5d8dc; }
.vk-f { fill: var(--fac); stroke: var(--fac-e); stroke-width: .8; transition: fill .8s var(--ease), stroke .8s var(--ease); }
.vk-fg { opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.vk-dev[data-f="wood"] .vk-fg, .vk-dev[data-f="oak"] .vk-fg { opacity: 1; }
.vk-hd { fill: none; stroke: var(--hdl); stroke-width: 1.6; stroke-linecap: round; transition: stroke .8s var(--ease); }

/* стены, размеры, техника */
.vk-wall { fill: #ece5dc; }
.vk-wl { fill: none; stroke: #3b302a; stroke-width: 1.6; }
.vk-floor { fill: none; stroke: #3b302a; stroke-width: 2.2; }
.vk-hatch { fill: none; stroke: #a99a89; stroke-width: .8; }
.vk-fold { fill: none; stroke: #8d7f72; stroke-width: 1; stroke-dasharray: 9 3 2 3; }
.vk-dim path { fill: none; stroke: #74685e; stroke-width: .9; }
.vk-dim text { font-size: 14px; font-weight: 700; fill: #3b302a; paint-order: stroke; stroke: #fbfaf7; stroke-width: 4px; stroke-linejoin: round; }
.vk-pl { fill: #b3a99e; }
.vk-top { fill: #8a7d71; stroke: #5b4f45; stroke-width: .8; }
.vk-hob { stroke: #1f2123; stroke-width: 1.8; stroke-linecap: round; }
.vk-fct { fill: none; stroke: #6c737a; stroke-width: 1.8; stroke-linecap: round; }
.vk-ov rect { fill: #3a3e43; }
.vk-ov .gl { fill: #1e2124; }
.vk-ov .hb { stroke: #c9cdd1; stroke-width: 1.3; stroke-linecap: round; }
.vk-ov .kn { fill: #9aa1a8; }
.vk-hood rect { fill: #d3d7db; stroke: #8b9197; stroke-width: .8; }
.vk-hood path { fill: none; stroke: #5e646a; stroke-width: 1.2; }
.vk-hood .rod { stroke: #9aa0a6; stroke-width: 1; }
.vk-in { fill: #e6dfd5; }
.vk-pot { fill: var(--accent); stroke: #6f8f66; stroke-width: .6; }
.vk-lbl text { font-size: 14px; font-weight: 650; fill: #3b302a; paint-order: stroke; stroke: #ece5dc; stroke-width: 4.5px; stroke-linejoin: round; }
.vk-cap { font-size: 13.5px; font-weight: 600; fill: #7d7065; letter-spacing: .02em; }
.vk-tag { font-size: 13.5px; font-weight: 750; fill: var(--hdl); letter-spacing: .03em; transition: fill .8s var(--ease); }
.vk-cap.r { text-anchor: end; }

/* план прямой кухни */
.vk-pfl { fill: #fbf9f6; }
.vk-pw { fill: none; stroke: #3b302a; stroke-width: 2.6; stroke-linecap: square; }
.vk-pwin { fill: none; stroke: #5d9cc0; stroke-width: 1.2; }
.vk-pdoor { fill: none; stroke: #8d7f72; stroke-width: .9; }
.vk-prun { fill: var(--fac); stroke: var(--fac-e); stroke-width: .8; transition: fill .8s var(--ease), stroke .8s var(--ease); }
.vk-pdiv, .vk-pcol { fill: none; stroke: var(--fac-e); stroke-width: .7; transition: stroke .8s var(--ease); }
.vk-psink { fill: #dfe7ec; stroke: #7d8a93; stroke-width: .7; }
.vk-phob { fill: none; stroke: #2a2c2e; stroke-width: .9; }

/* шкафы: корпус, наполнение, двери-купе */
.vk-c { fill: #efe8de; stroke: #a5957f; stroke-width: .7; }
.vk-cbox { fill: none; stroke: #a5957f; stroke-width: 1.6; }
.vk-hdc { stroke: #8a7d70; stroke-width: 1.4; stroke-linecap: round; }
.vk-rod { stroke: #8f969c; stroke-width: 1.8; stroke-linecap: round; }
.vk-hg { stroke: #8f969c; stroke-width: .8; }
.vk-cl { stroke: rgba(60, 45, 35, .25); stroke-width: .6; }
.vk-it { stroke: rgba(60, 45, 35, .2); stroke-width: .5; }
.vk-shoe { stroke: rgba(60, 45, 35, .3); stroke-width: .5; }
.vk-trk { fill: #9a9086; }
.vk-prf { fill: none; stroke: #b7aa98; stroke-width: 2.4; }
.vk-dl { fill: #cf9f69; }
.vk-dm { opacity: 0; transition: opacity .8s var(--ease); }
.vk-dev[data-f="mirror"] .vk-dm.p-f, .vk-dev[data-f="combo"] .vk-dm.p-m { opacity: 1; }
.vk-sh { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.vk-dv { fill: none; stroke: #b7aa98; stroke-width: 2; opacity: 0; transition: opacity .6s var(--ease); }
.vk-dev[data-f="combo"] .vk-dv { opacity: 1; }
.vk-mir { stroke: #9fb1bd; stroke-width: .8; }
.vk-hook { fill: none; stroke: #8f969c; stroke-width: 1.6; stroke-linecap: round; }
.vk-cush { fill: #cdbfae; stroke: #a8977f; stroke-width: .6; }

/* модули встают по одному, двери купе заезжают */
.vk-m.w-h { transform: translateY(-7px); }
.vk-m.door.w-h { transform: translateX(-26px); }
.vk-m.w-h.in { transform: none; }

/* вилка, переключатель, смета, замер */
.vk-calc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vk-k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.vk-fork { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.vk-sum { font-size: 42px; line-height: 1.04; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 780; }
.vk-sum i { font-style: normal; font-size: 24px; letter-spacing: -.01em; font-weight: 700; }
.vk-fs { font-size: 13px; color: var(--ink-2); }
.vk-fs b { font-weight: 650; font-variant-numeric: tabular-nums; }
.vk-sw { display: flex; align-items: center; gap: 10px; }
.vk-seg { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: var(--page);
  border: 1px solid var(--line); min-width: 0; }
.vk-th { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 9px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1.5px var(--brand); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .55s var(--ease); }
.vk-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; font-size: 14px; font-weight: 600;
  color: var(--muted); white-space: nowrap; transition: color .4s; }
.vk-opt.on { color: var(--brand-ink); }
.vk-swc { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .18); }
.s-light, .s-white { background: #f6f1ea; }
.s-wood, .s-oak, .s-ldsp { background: repeating-linear-gradient(100deg, #c9945c 0 3px, #b78250 3px 4px); }
.s-graph { background: #474a4f; }
.s-mirror { background: linear-gradient(135deg, #f4f8fa, #c3d3dd 55%, #eef3f6); }
.s-combo { background: linear-gradient(180deg, #c9945c 0 30%, #d3e0e8 30% 70%, #c9945c 70%); }
.vk-lines { display: flex; flex-direction: column; gap: 5px; }
.vk-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 11px; border-radius: 10px; background: var(--page);
  font-size: 14px; line-height: 1.35; }
.vk-line b { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.vk-line.x { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.vk-line.vk-hit { animation: vk-row 1.3s var(--ease); }
.vk-sum { transform-origin: 0 60%; }
.vk-sum.vk-hit { animation: vk-pop .9s var(--ease); }
@keyframes vk-row { 0% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 0 transparent; }
  30% { background-color: #fff3df; box-shadow: inset 3px 0 0 var(--brand), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
  100% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 0 transparent; } }
@keyframes vk-pop { 0%, 100% { transform: none; } 35% { transform: scale(1.06); } }
.vk-bk { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.vk-slot { display: flex; align-items: flex-start; gap: 9px; padding: 9px 13px 10px 11px; border: 1px dashed var(--brand-line); border-radius: 12px; background: #fff; min-width: 0; }
.vk-slot .w-ic { margin-top: 1px; color: var(--brand); }
.vk-slot > div { display: flex; flex-direction: column; gap: 1px; }
.vk-slot b { font-size: 15.5px; font-weight: 700; }
.vk-slot small { font-size: 13px; color: var(--muted); }
.vk-stamp { --rot: -7deg; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 13px 6px; margin-right: 12px;
  border: 3px solid #15803d; border-radius: 10px; color: #15803d; background: rgba(255, 255, 255, .92); text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .22); }
.vk-stamp b { font-size: 18px; letter-spacing: .09em; font-weight: 850; line-height: 1.1; }
.vk-stamp span { font-size: 12.5px; font-weight: 750; letter-spacing: .07em; }

/* карточка вилки в переписке */
.vk-cc { min-width: 262px; }
.vk-cc-h { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.vk-cc-r { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.vk-cc-r + .vk-cc-r { border-top: 1px dashed var(--line); }
.vk-cc-r span { flex: 1; color: var(--ink-2); }
.vk-cc-r b { font-size: 16.5px; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vk-cc-s { font-size: 13px; color: var(--muted); margin-top: 3px; }

@container (max-width: 700px) {
  .vk-body { grid-template-columns: minmax(0, 1fr); }
  .vk-sum { font-size: 36px; }
  .vk-bk { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .vk-slot { flex: 1 1 210px; }
  .vk-stamp { margin: 2px 0 4px; }
}