.cart_image{
    width: 100px;
    height: auto;
  }
  ol.stepper {
      --default-b: lightgrey;
      --default-c: black;
      --active-b: rgb(0, 0, 0);
      --active-c: white;
      --circle: 3em; /* size of circle */
      --b: 1px; /* line thickness */
    
      display: flex;
      list-style: none;
      justify-content: space-between;
      background: linear-gradient(var(--default-b) 0 0) no-repeat 50%
        calc((var(--circle) - var(--b)) / 2) / 100% var(--b);
      counter-reset: step;
      margin: 20px;
      padding: 0;
      font-size: 18px;
      font-weight: bold;
      counter-reset: step;
      overflow: hidden;
    }
    ol.stepper li {
      display: grid;
      place-items: center;
      gap: 5px;
      font-family: sans-serif;
      position: relative;
    }
    ol.stepper li span{
      font-size: 14px;
    }
    ol.stepper li::before {
      content: counter(step) " ";
      counter-increment: step;
      display: grid;
      place-content: center;
      aspect-ratio: 1;
      height: var(--circle);
      border: 5px solid #fff;
      box-sizing: border-box;
      background: var(--active-b);
      color: var(--active-c);
      border-radius: 0;
      font-family: monospace;
      z-index: 1;
    }
    ol.stepper li.active ~ li::before {
      background: var(--default-b);
      color: var(--default-c);
    }
    ol.stepper li.active::after {
      content: "";
      position: absolute;
      height: var(--b);
      right: 100%;
      top: calc((var(--circle) - var(--b)) / 2);
      width: 100vw;
      background: var(--active-b);
    }
    
    .payment_method .method_item{
      border: 1px solid #ddd;
      margin-bottom: 10px;
      padding: 15px;
      cursor: pointer;
    }
    .payment_method .method_item.active{
      border: 1px solid #202020;
    }