.nav-actions {
  display: flex;
  align-items: center;
  gap: 38px;
}

.nav-store {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: #02f8a6;
  border-radius: 6px;
  color: #07130f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.65;
  text-transform: uppercase;
  transition: background-color .25s, color .25s, transform .25s;
}

.home-diagnostic,
.home-next-step {
  background: #02f8a6;
}

.home-diagnostic {
  border-radius: 6px;
}

.home-next-step .next-step-button {
  align-self: center;
  background: #0066ff;
  border-radius: 6px;
  color: #fff;
}

.home-next-step .next-step-button:hover {
  background: #0057d9;
}

.work-process {
  margin-top: 42px;
}

.work-process h3 {
  margin: 0 0 18px;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: work-step;
}

.work-process li {
  min-height: 118px;
  padding: 18px;
  background: rgba(7, 19, 15, .08);
  border: 1px solid rgba(7, 19, 15, .14);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  counter-increment: work-step;
}

.work-process li::before {
  content: '0' counter(work-step);
  display: block;
  margin-bottom: 12px;
  color: #07553f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.nav-store:hover {
  background: #fff;
  color: #07130f;
  transform: translateY(-2px);
}

.store-bag-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-bag-icon .bag-body {
  fill: currentColor;
  stroke: none;
}

.store-bag-icon .bag-handle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.store-bag-icon .bag-mark {
  fill: none;
  stroke: #02f8a6;
  stroke-width: 1.6;
}

@media (max-width: 900px) {
  .nav-actions {
    gap: 10px;
  }

  .work-process ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .nav-store {
    padding: 9px 12px;
    font-size: 10px;
  }

  .store-bag-icon {
    width: 19px;
    height: 19px;
  }

  .work-process {
    margin-top: 34px;
  }

  .work-process ol {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .work-process li {
    min-height: auto;
    padding: 16px;
  }
}