.calculators .step_1,
.calculators .step_2,
.calculators .step_3 {
  margin-bottom: 144px; }

.calculators .step_1__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 32px; }

.calculators .step_1__variant {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 144px;
  cursor: pointer; }
  .calculators .step_1__variant > .img {
    box-shadow: 0 5px 10px 2px rgba(34, 60, 80, 0.2); }
    .calculators .step_1__variant > .img.active {
      border: 2px solid black; }
  .calculators .step_1__variant > .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 140%; }

.calculators .step_2 .input-items--title {
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  margin-bottom: 40px; }

.calculators .step_2 .input-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px; }
  .calculators .step_2 .input-item label {
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%; }
  .calculators .step_2 .input-item input {
    width: 282px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding-left: 12px; }
  .calculators .step_2 .input-item.hook-size {
    user-select: none;
    justify-content: flex-start;
    gap: 134px; }
    .calculators .step_2 .input-item.hook-size input[type='checkbox'] {
      cursor: pointer;
      width: 20px;
      height: 20px; }

.calculators .step_3 .type__system--wrapper {
  display: flex;
  gap: 50px;
  margin-bottom: 40px; }

.calculators .step_3 .type__system.active {
  background-color: #ffe86d; }

.calculators .step_3 .type__system input[type='radio'] {
  display: none; }

.calculators .step_3 .type__system:hover {
  background-color: #f0f0f0; }

.calculators .step_3 .type__system input[type='radio']:checked + .radio-label {
  background-color: #ffe86d;
  border-color: #ffe86d;
  color: #000; }

.calculators .step_3 .type__system .radio-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 140%;
  cursor: pointer;
  width: 302px;
  height: 104px;
  border-radius: 4px;
  box-shadow: 2px 4px 12px 1px #222e5426;
  user-select: none; }

.calculators .step_3 .type__variants {
  display: flex;
  flex-direction: column;
  gap: 16px; }
  .calculators .step_3 .type__variants .variant {
    position: relative;
    cursor: pointer; }
  .calculators .step_3 .type__variants input[type='radio'] {
    display: none; }
  .calculators .step_3 .type__variants input[type='radio'] + label {
    position: relative;
    cursor: pointer;
    padding-left: 32px; }
  .calculators .step_3 .type__variants input[type='radio'] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #222222;
    border-radius: 4px;
    background: #fff; }
  .calculators .step_3 .type__variants input[type='radio']:checked + label:before {
    background: #ffe86d; }

.calculators .step_4 {
  margin-bottom: 100px; }
  .calculators .step_4__wrapper {
    display: flex; }
  .calculators .step_4 .colors {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 541px;
    width: 100%; }
    .calculators .step_4 .colors__wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px; }
    .calculators .step_4 .colors__title {
      font-weight: 600;
      font-size: 16px;
      line-height: 140%;
      width: 60px; }
    .calculators .step_4 .colors .color {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center; }
      .calculators .step_4 .colors .color__wrapper {
        display: flex;
        gap: 24px; }
      .calculators .step_4 .colors .color input[type='radio'] {
        display: none; }
        .calculators .step_4 .colors .color input[type='radio'] + label {
          position: relative;
          cursor: pointer;
          padding-top: 55px;
          width: 72px; }
        .calculators .step_4 .colors .color input[type='radio'] + label:before {
          content: '';
          position: absolute;
          left: 0;
          top: 30%;
          transform: translateY(-50%);
          width: 72px;
          height: 48px;
          border: 2px solid #222222;
          border-radius: 4px;
          background: #fff; }
        .calculators .step_4 .colors .color input[type='radio']:checked + label:before {
          border-color: #ffe86d; }
      .calculators .step_4 .colors .color #RAL_8017_Matt + label:before,
      .calculators .step_4 .colors .color #RAL_8017_PE + label:before {
        background: #442219; }
      .calculators .step_4 .colors .color #RAL_8019_Matt + label:before {
        background: #3b2a18; }
      .calculators .step_4 .colors .color #RAL_9005_Matt + label:before {
        background: #020001; }
      .calculators .step_4 .colors .color #RAL_7024_Matt + label:before {
        background: #454140; }
      .calculators .step_4 .colors .color #RAL_7016_Matt + label:before {
        background: #2a2a2a; }
      .calculators .step_4 .colors .color #RAL_7024_PE + label:before {
        background: #454140; }
      .calculators .step_4 .colors .color #RAL_9003_PE + label:before {
        background: #fafafa; }
      .calculators .step_4 .colors .color #RAL_3005_PE + label:before {
        background: #820f30; }
      .calculators .step_4 .colors .color #RAL_6005_PE + label:before {
        background: #022715; }
      .calculators .step_4 .colors .color #Zn + label:before {
        background-image: url("data:image/svg+xml,%3Csvg width='72' height='48' viewBox='0 0 72 48' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='72' height='48' rx='4' fill='url(%23pattern0_58_4122)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_58_4122' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_58_4122' transform='matrix(0.0104167 0 0 0.015625 -0.0833333 0)'/%3E%3C/pattern%3E%3Cimage id='image0_58_4122' width='112' height='64' preserveAspectRatio='none' xlink:href='data:image/png;base64,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'/%3E%3C/defs%3E%3C/svg%3E%0A"); }
  .calculators .step_4 #calculateBtn {
    margin-top: 64px; }

.calculators__result_table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse; }
  .calculators__result_table table thead tr {
    background-color: #ffe86d; }
  .calculators__result_table table thead tr,
  .calculators__result_table table tbody tr {
    width: 588px;
    height: 48px;
    border-width: 1px; }
    .calculators__result_table table thead tr th,
    .calculators__result_table table thead tr td,
    .calculators__result_table table tbody tr th,
    .calculators__result_table table tbody tr td {
      padding: 10px;
      text-align: start;
      font-weight: 500;
      font-size: 20px;
      line-height: 140%;
      border-width: 0, 1px, 1px;
      border-style: solid;
      border-color: #d9d9d9; }
      .calculators__result_table table thead tr th:last-child,
      .calculators__result_table table thead tr td:last-child,
      .calculators__result_table table tbody tr th:last-child,
      .calculators__result_table table tbody tr td:last-child {
        text-align: center; }
  .calculators__result_table table tbody tr td {
    font-size: 16px;
    line-height: 140%; }

.calculators__result_table .btn {
  margin-top: 64px; }

@media (max-width: 768px) {
  .calculators .step__title {
    font-size: 16px;
    line-height: 140%;
    margin-bottom: 24px; }
  .calculators .step_1,
  .calculators .step_2,
  .calculators .step_3 {
    margin-bottom: 40px; }
  .calculators .step_2 .input-items--title {
    font-size: 16px;
    line-height: 140%;
    margin-bottom: 24px; }
  .calculators .step_2 .input-item {
    flex-direction: column; }
    .calculators .step_2 .input-item label {
      font-size: 14px;
      line-height: 140%;
      margin-bottom: 8px; }
    .calculators .step_2 .input-item input {
      width: 100%; }
    .calculators .step_2 .input-item.hook-size {
      flex-direction: row;
      gap: 20px; }
  .calculators .step_2 #calculateBtn {
    width: 100%; }
  .calculators .step_3 .type__system--wrapper {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 24px; }
  .calculators .step_3 .type__system .radio-label {
    padding: 24px;
    width: 100%;
    height: 72px; }
  .calculators .step_4 {
    margin-bottom: 20px; }
    .calculators .step_4 .colors__title {
      display: none; }
    .calculators .step_4 .colors .color__wrapper {
      gap: 16px; }
    .calculators .step_4 .colors .color label > span {
      display: none; }
    .calculators .step_4 .colors .color input[type='radio'] + label {
      padding-top: 40px;
      width: 50px; }
    .calculators .step_4 .colors .color input[type='radio'] + label:before {
      width: 48px;
      height: 32px; }
    .calculators .step_4 #calculateBtn {
      margin-top: 40px;
      width: 100%; } }