/* 3D-блоки 3d-b: каркасы мебели, лифтовой портал, деталь по DXF, сцены услуг.
   Основа блока (постер, холст, метки, подсказка, панель .k3s) в k3d.css движка, здесь только то, что нужно этим блокам сверх неё. */
.k3d-off .k3b-ctl, .k3d-off [data-k3b-note] { display: none; }
.k3s .k3d-st.bgp { background: radial-gradient(120% 95% at 50% 35%, #FFFFFF 0%, #FCF4F2 55%, #F6E6E2 100%); }
.k3b-frame .k3s-grid { align-items: start; }
.k3b-frame .k3s-side { padding-top: 6px; }
.k3s-chips i[style] { background: var(--c); }

/* места сварки и метки на каркасе: метка движка, акцентная для «Разобрать» */
.k3b-frame .k3d-lbl, .k3b-fam .k3d-lbl { font-size: 12px; }

/* главная: карточка внутри «Двух фабрик» */
.k3b-fam { margin: 0 0 24px; }
.k3b-fam .k3s-grid { background: var(--white); column-gap: 0; align-items: stretch; }
.k3b-fam .k3s-side { justify-content: center; gap: 22px; padding: 40px 44px; }
.k3b-fam h3.disp { font-size: 32px; line-height: 1; letter-spacing: -.02em; }
.k3b-step { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.k3b-step li { display: contents; }
.k3b-step b { font-weight: 600; color: var(--corten); font-size: 12px; letter-spacing: .1em; padding-top: 3px; }
.k3b-step span { font-size: 15px; line-height: 1.5; color: var(--muted); padding-bottom: 8px; }

/* страницы изделий: блок под таблицей «Что учесть в чертеже» */
.k3b-iz { margin-top: 56px; }
.k3b-iz > .lbl { display: block; margin-bottom: 18px; color: var(--muted); }

/* услуги: сюжет процесса */
.k3b-svc h3.disp { font-size: 30px; line-height: 1; letter-spacing: -.02em; margin: 0; }
.k3b-svc .k3s-grid { align-items: center; }
.k3b-range { width: 100%; margin: 6px 0 4px; accent-color: var(--red); }
.k3b-svc .lbl b { color: var(--ink); font-weight: 600; }

/* лифтовые порталы: 3D-вид в окне чертежа, чертёж уходит в уголок */
.cfg-stage .k3b-lift { position: absolute; inset: 0; z-index: 0; }
.cfg-stage .k3b-lift .k3d-st { position: absolute; inset: 0; background: #EEE9E5; }
.cfg-stage > svg { z-index: 1; transform-origin: 0 100%; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.cfg-stage .cfg-tag { z-index: 3; }
.cfg-stage:has(.k3b-view) .cfg-tag { max-width: calc(100% - 170px); }
.cfg-stage.k3b-3d .k3b-lift { z-index: 1; }
.cfg-stage.k3b-3d > svg { z-index: 2; transform: translate(14px, -14px) scale(.3); outline: 8px solid var(--white); box-shadow: 0 24px 60px rgba(11, 35, 45, .28); cursor: pointer; }
.k3b-view { position: absolute; right: 14px; top: 14px; z-index: 3; display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 18px rgba(11, 35, 45, .08); }
.k3b-view button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); transition: background .2s, color .2s; }
.k3b-view button.on { background: var(--steel); color: var(--white); }
.cfg-stage.k3b-no3d .k3b-view, .cfg-stage.k3b-no3d .k3b-lift { display: none; }
.cfg-stage .k3b-lift .k3d-hint { left: 64%; }
.cfg-stage .k3b-lift svg { position: static; inset: auto; width: 16px; height: 16px; }
.cfg-stage:not(.k3b-3d) .k3b-lift .k3d-ov { visibility: hidden; }

/* работы по чертежу: деталь в 3D в окне расчёта по DXF, переключатель «Контур / 3D» */
.pv .k3b-pv { position: absolute; inset: 0; z-index: 1; display: none; }
.pv.k3b-on .k3b-pv { display: block; }
.kw .pv.k3b-on > svg[data-pv-svg] { visibility: hidden; }
.pv .k3b-pv .k3d-st { position: absolute; inset: 0; }
.pv .k3b-pv .k3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pv.k3b-file .k3b-pv .k3d-poster { opacity: 0; }
.kw .pv .k3b-pv svg { position: static; left: auto; top: auto; width: 16px; height: 16px; overflow: hidden; }
.pv .k3b-pv path { fill: none; stroke: currentColor; stroke-width: 1.6; animation: none; stroke-dasharray: none; stroke-dashoffset: 0; vector-effect: none; }
.k3b-pvsw { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .94); }
.k3b-pvsw button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); transition: background .2s, color .2s; }
.k3b-pvsw button.on { background: var(--steel); color: var(--white); }
.pv.k3b-no3d .k3b-pvsw { display: none; }
.pv:has(.k3b-pvsw) .pv-tag { max-width: calc(100% - 170px); }
.pv .k3b-pv .k3d-hint { bottom: 10px; }

/* контрактное производство: 3D поверх схемы слоёв, схема держит место и остаётся, если 3D нет */
.stack > .k3b-lay { position: absolute; inset: -8px 0 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; visibility: hidden; opacity: 0; transition: opacity .5s; }
.stack:has(.k3d-ready) > .k3b-lay { visibility: visible; opacity: 1; }
.stack:has(.k3d-ready) > .slab { opacity: 0; pointer-events: none; transition: opacity .4s; }
.k3b-lay .k3d { position: relative; flex: 1; min-height: 0; }
.k3b-lay .k3d-st { position: absolute; inset: 0; }
.k3b-lay .k3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.k3b-laych { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.k3b-laych button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.k3b-laych button:hover { border-color: var(--ink); }
.k3b-laych button.on { background: var(--steel); border-color: var(--steel); color: var(--white); }

@container k (max-width: 820px) {
  .k3b-fam .k3s-grid { row-gap: 0; }
  .k3b-fam .k3s-side { padding: 22px 18px 24px; gap: 18px; }
  .k3b-fam h3.disp { font-size: 26px; }
  .k3b-iz { margin-top: 40px; }
  .k3b-frame .k3d-lbl, .k3b-svc .k3d-lbl { font-size: 11px; padding: 5px 9px; }
  .cfg-stage.k3b-3d > svg { transform: translate(10px, -10px) scale(.32); outline-width: 7px; }
  .k3b-view { right: 10px; top: 10px; }
  .k3b-view button { min-height: 34px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cfg-stage > svg { transition: none; }
}