main {
  .top-bar {
    &__nav {
      font-size: 80%;
    }

    a.top-bar__countdown {
      background-image: linear-gradient(rgba-color($primary, 0.5), rgba-color($primary, 0.7)), url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/bg.webp");
      font-weight: var(--font-bold);
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .info-bar {
    display: flex;
    flex-direction: column;
  }

  .header {
    border-bottom: none;

    &__nav {
      color: $secondary;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__nav a:hover {
      border-radius: unset;
      background-color: transparent;
      border-bottom: solid 2px;
    }
  }

  #search-input {
    border: solid 1px;
  }

  .cart {
    &__btn-checkout {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  #cart-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/cart.svg") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/cart.svg") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
      }
    }
  }

  #user-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/login.svg") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/login.svg") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
      }
    }
  }

  .footer {
    background: linear-gradient(rgba-color($gray-100, 1), rgba-color($white, 0.8)), url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/bg.webp");
  }
}

.menu__social {
  background-image: linear-gradient(rgba-color($gray-100, 1), rgba-color($white, 0.4)), url("https://ecom.nyc3.digitaloceanspaces.com/storefront/baby/bg.webp");
}

.card-header {
  font-weight: var(--font-bold);
}