/** wrapper blocks **/
.set-constructor__container [data-area="product"] {
  grid-area: product;
}
.set-constructor__container [data-area="plus"] {
  grid-area: plus;
}
.set-constructor__container [data-area="kit"] {
  grid-area: kit;
}
.set-constructor__container [data-area="equal"] {
  grid-area: equal;
}
.set-constructor__container [data-area="result"] {
  background-color: var(--darkerblack_bg_black);
  grid-area: result;
}
.set-constructor__container {
  display: grid;
  gap: 8px;
  grid-template-areas: "product" "plus" "kit" "equal" "result";
  grid-template-columns: 1fr;
}
.set-constructor__cell-container {
  padding: 20px;
}
.set-constructor__cell.line-block--gap {
  --gap: 20px;
}
/**/

/** main product **/
.set-constructor__product-image {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}
/**/

/** items **/
.set-constructor__items {
  max-height: calc(73px * 5);
  width: 100%;
}
.set-constructor__item-inner.bordered {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.set-constructor__item:last-child .set-constructor__item-inner.bordered {
  border-bottom: 0;
}
.set-constructor__item[data-active="false"] .set-constructor__item-block {
  opacity: 0.35;
}
.set-constructor__item-inner {
  padding: 12px 27px 11px 20px;
}
.set-constructor__item-image {
  height: 48px;
  text-align: center;
  width: 48px;
}
.set-constructor__item-block--price {
  flex-basis: 100%;
  order: -1;
}
/**/

@media screen and (min-width: 600px) {
  .set-constructor__item-block--name {
    flex-basis: 50%;
  }
  .set-constructor__item-block--price {
    flex-basis: 50%;
    order: initial;
    display: flex;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 768px) {
  .set-constructor__container {
    gap: 12px;
    grid-template-areas: "product plus kit" "equal equal equal" "result result result";
    grid-template-columns: 230px 12px auto;
  }
  .set-constructor__cell.line-block--gap {
    --gap: 10px;
    flex-direction: column;
  }
  .set-constructor__product-image {
    height: auto;
    width: auto;
  }
}
@media screen and (min-width: 1000px) {
  .set-constructor__container {
    grid-template-areas: "product plus kit equal result";
    grid-template-columns: 230px 12px auto 12px 230px;
  }
  .set-constructor__cell-container {
    text-align: center;
  }
  .set-constructor__result-items {
    flex-direction: column;
  }
}