.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;

  background-color: #FFFFFF;

  .footer-wrapper {
    height: var(--footer--h);
    padding-block: .75rem;
    padding-inline: .5rem;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
  }

  .button {
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .375rem;

    border: none;

    text-decoration: none;
    background-color: transparent;

    .icon {
      flex-grow: 1;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    [data-cart-number]::after {
      content: attr(data-cart-number);
      position: absolute;
      top: -2px;
      left: 22px;
      transform: translateX(-50%);
      z-index: 1;

      min-width: .875rem;
      padding-inline: .25rem;

      display: block;
      border-radius: 99999px;
      box-shadow: 0 .125rem .25rem 0 rgba(0, 0, 0, .25);

      font-weight: 400;
      font-size: .5rem;
      line-height: .875rem;
      text-align: center;
      color: #FFFFFF;
      background-color: #E81331;
    }

    .title {
      font-weight: 400;
      font-size: .5rem;
      line-height: .75rem;
      text-align: center;
      color: #373635;
    }
  }
}