@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the list while printing so it never covers anything up. */
@media print {
  #wishlist-total {
    display: none;
  }
}

/* Used when the total is loading to prevent a jarring "pop" when it appears. */
.animation-fade-in {
  animation: fade-in 150ms;
}

#wishlist-total {
  position: fixed;
  bottom: 36px;
  left: 36px;

  float: left;

  /* Make sure it's above most things, but _below_ the backdrops. */
  z-index: 1000;

  padding: 18px 27px;

  font-size: 14px;
  background-color: white;
  border: 1px solid #dddddd;
}

#wishlist-total .total-text {
  font-style: italic;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the list while printing so it never covers anything up. */
@media print {
  #wishlist-total {
    display: none;
  }
}

/* Used when the total is loading to prevent a jarring "pop" when it appears. */
.animation-fade-in {
  animation: fade-in 150ms;
}

#wishlist-total {
  position: fixed;
  bottom: 36px;
  left: 36px;

  float: left;

  /* Make sure it's above most things, but _below_ the backdrops. */
  z-index: 1000;

  padding: 18px 27px;

  font-size: 14px;
  background-color: white;
  border: 1px solid #dddddd;
}

/* Reduce padding when somewhat narrow. */
@media (max-width: 1024px) {
  #wishlist-total {
    bottom: 10px;
    left: 10px;
  }
}

/* Take up the entire bottom of the screen when very narrow. */
@media (max-width: 400px) {
  #wishlist-total {
    right: 0;
    bottom: 0;
    left: 0;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}

#wishlist-total .total-text {
  font-style: italic;
}

Add media queries for smaller devices
Add media queries for smaller devices

These help take up less space on smaller screens, and will be helpful
both on desktop and mobile.
