/*
 * pk-forge.css — холст движка «Кузня» (design/pk-forge.js). Общий для карточки семейства и
 * будущих главной/страницы размера — только размер/курсор канвы, без разметки конкретной страницы.
 */
.pk-forge-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  border-radius: var(--pk-radius-md, 12px);
  /* ревью 22.10, раунд 3 п.2: было 2 несогласованных стопа не по центру ("горизонт" между тёплым
     и тёмным пятном) — один центрированный радиальный градиент, бесшовный на любом размере канвы. */
  background: radial-gradient(ellipse at center, #1c140e 0%, #15191c 70%);
  overflow: hidden;
}
.pk-forge-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.pk-forge-canvas:active {
  cursor: grabbing;
}
/* заглушка LCP: силуэт pk-draw.js виден сразу, пока three.js не загружен — скрывается, когда
   canvas получает первый кадр (design/tpl-product.js ставит класс pk-forge-ready). */
.pk-forge-wrap .pk-forge-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.pk-forge-wrap.pk-forge-ready .pk-forge-fallback {
  opacity: 0;
  pointer-events: none;
}
.pk-forge-fallback svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .pk-forge-wrap {
    aspect-ratio: auto;
    height: 300px;
  }
}