/* Product page layout builder (static HTML) */
@import url("fonts-conthrax.css");

/* Content must be visible below fixed header */
.product-builder-page {
  position: relative;
  z-index: 1; /* above bg-video */
  padding: 500px 78px 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bg-video,
#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
  pointer-events: none;
}

.product-builder-page__title {
  width: 100%;
  max-width: 2000px;
  /* override sticky from table-simple.css */
  position: relative !important;
  top: auto !important;
  margin: 0 auto -1px;
  z-index: 2;
}

.product-builder-page__title .fzmt-table__title-text {
  height: 100px;
  font-size: 45px;
  padding-left: 77px;
}

.product-builder-page__title .fzmt-table__title-icon {
  width: 100px;
  height: 100px;
  background: #24A4FF url("../images/icons/close.svg") center no-repeat !important;
  background-size: 34px 34px;
}

.product-builder-frame {
  width: 100%;
  max-width: 2000px;
  border-radius: 15px;
  border: 3px solid #42C9FF;
  background: rgba(0, 49, 153, 0.06);
  backdrop-filter: blur(10px);
  padding: 70px 90px;
}

.product-builder-description {
  background: rgba(17, 74, 161, 0.50);
  border: none;
  border-radius: 0;
  padding: 38px 60px 48px;
  margin-bottom: 68px;
  font-family: var(--font-family), system-ui, sans-serif;
}

.product-builder-upper {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.product-builder-left {
  flex: 0 0 920px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-builder-right {
  flex: 1 1 auto;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* 3D sequence block wrapper */
.product-builder-sequence-shell {
  width: 100%;
  aspect-ratio: 920 / 750;
  background: radial-gradient(79% 79% at 50% 50%, rgba(1, 34, 84, 0.00) 0%, rgba(1, 34, 84, 0.00) 42.49%, #012254 100%);
  border: none;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  min-height: 0;
}

/* Drawing */
.product-builder-drawing {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: block;
  min-height: 0;
  padding: 55px 162px 60px 81px;
}

.product-builder-drawing img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0;
}

/* Инлайн-SVG (см. ProductView): шрифты из страницы, тот же масштаб что у img */
.product-builder-drawing__inline,
.product-builder-drawing__inline svg {
  width: 100%;
  height: auto;
  display: block;
  padding: 0;
}

.product-builder-bottom {
  margin-top: 22px;
}

.product-builder-bottom-title {
  height: 86px;
  border-radius: 0;
  background: #114AA180;
  border: none;
  display: flex;
  align-items: center;
  padding-left: 44px;
  color: #FFFFFF;
  font-family: "Conthrax SemiBold", "Conthrax", system-ui, sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 34px;
}
.product-builder-bottom-title .product_name {
  margin-left:40px;
  color: #60D1FF;
}

/* --- mini tables --- */
.product-mini-table {
  width: 100%;
}

.product-mini-table__grid {
  width: 100%;
  /* uses table-simple.css .table-grid layout */
}

/* override 13-col grid from table-simple.css */
.product-grid-2 {
  grid-template-columns: minmax(190px, 1.3fr) minmax(120px, 0.7fr) !important;
}

.product-grid-4 {
  grid-template-columns: minmax(220px, 1.4fr) minmax(120px, 0.6fr) minmax(220px, 1.4fr) minmax(120px, 0.6fr) !important;
}

.product-builder-description__line1 {
  font-family: Conthrax SemiBold, var(--font-family), system-ui, sans-serif;
  font-weight: 600;
  font-size: 35px;
  line-height: 1.3880000523158482em;
  text-transform: uppercase;
  color: #60D1FF;
}

.product-builder-description__line2 {
  font-family: Conthrax Regular, var(--font-family), system-ui, sans-serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.3869999694824218em;
  color: #FFFFFF;
  margin-top: 29px;
}

/* Табличные ячейки: без границ/скруглений и нужное выравнивание */
.product-builder-page .table-grid .cell {
  border: none !important;
  border-radius: 0 !important;
  background: rgba(0, 61, 153, 0.30);
  font-family: Gubia, Verdana;
  font-size: 50px;
  font-weight: 700;
  padding: 10px 40px;
  line-height: 1.32em;
  justify-content: flex-start;
  text-align: left;
}


.product-builder-page .table-grid .cell .sub {
  font-size: 31px;
  position: relative;
  bottom: -16px;

}

.product-builder-page .table-grid .cell.product-cell--value {
  justify-content: flex-end;
  text-align: right;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: #60D1FF;
  min-height: 90px;
}

.product-builder-page .table-grid .cell.product-mini-table__title {
  font-family: Conthrax Regular;
  font-size: 28px;
  margin-top: -0.3em;
  margin-bottom: 1.4em;
  line-height: 1.4em;
  padding:0;
  text-transform: uppercase;
  font-weight: normal;
  justify-content: flex-start;
  text-align: left;
  background: none;
}

.product-builder-page .product-builder-bottom .table-grid .cell {
  font-size: 35px;
}

/* Make header cell that spans full width rounded on both top corners */
.product-header-span {
  border-right: 3px solid #42C9FF;
  border-radius: 15px 15px 0 0 !important;
}

/* When grid is used without its table-section sticky rules */
.product-builder-page .table-grid {
  margin-top: 0;
}

.page-bottom-spacer {
  width: 100%;
  height: var(--page-bottom-spacer-height, 50vh);
}

@media (max-width: 1100px) {
  .product-builder-page {
    padding-left: 78px;
    padding-right: 78px;
  }
  .product-builder-upper {
    flex-direction: column;
  }
  .product-builder-left,
  .product-builder-right {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* --- override for static 3D block --- */
.product-builder-sequence-shell .sequence-section {
  height: 100%;
}

.product-builder-sequence-shell .sequence-section .layout {
  height: 100%;
}

.product-builder-sequence-shell .canvas-wrap {
  inset: 0;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  height: 100%;
}
.product-builder-sequence-shell #canvas {
  width: auto;
  height: 100%;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}
.product-builder-sequence-shell .preloader {
  height: 750px;
  width: 750px;
  margin: 0 auto
}