.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: 35px 0px 25px 0px;
    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;
  }