#mg-floating-cart {
  position: fixed;
  z-index: 2;
  bottom: 10px;
  right: 10px;
  background-color: white;
  height: 100%;
  width: 95%;
  border-radius: 15px;
  box-shadow: 0px 0px 5px 0px #4b4b4b;
  transition: max-height 300ms ease 150ms, max-width 300ms ease 150ms;
}
#mg-floating-cart.close {
  max-width: 75px;
  max-height: 75px;
}
#mg-floating-cart.close .cart-content {
  opacity: 0;
  transition: opacity 300ms ease;
}
#mg-floating-cart.close #mg-cart-button {
  box-shadow: 0px 0px 5px 0px #4b4b4b;
  border-radius: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' viewBox='0 0 72 72' enable-background='new 0 0 72 72' xml:space='preserve'%3E%3Cg transform='translate(20, 20)'%3E%3Cline fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='7' y1='11' x2='13' y2='2'/%3E%3Cline fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='25' y1='11' x2='19' y2='2'/%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points=' 28,15 26,29 6,29 4,15 '/%3E%3Cline fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='1' y1='11' x2='31' y2='11'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#mg-floating-cart.close #mg-cart-button .total-quantity {
  transition: transform 300ms ease 400ms;
}
#mg-floating-cart.open {
  max-width: 500px;
  max-height: 450px;
  overflow: hidden;
}
#mg-floating-cart.open .cart-content {
  opacity: 1;
  transition: opacity 500ms ease 300ms;
}
#mg-floating-cart.open #mg-cart-button {
  transition: transform 300ms ease 50ms;
  transform: rotate(-180deg);
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' viewBox='0 0 72 72' enable-background='new 0 0 72 72' xml:space='preserve'%3E%3Cg transform='translate(20, 20)'%3E%3Cline fill='none' stroke='%23343434' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='27' y1='5' x2='5' y2='27'/%3E%3Cline fill='none' stroke='%23343434' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='27' y1='27' x2='5' y2='5'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#mg-floating-cart.open #mg-cart-button .total-quantity {
  transform: scale(0);
  transition: transform 0;
}

#mg-cart-button {
  z-index: 601;
  width: 76px;
  height: 76px;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  background-position: center;
  transition: background 300ms ease 150ms, border-radius 300ms ease;
}
#mg-cart-button .total-quantity {
  position: absolute;
  background: red;
  width: 28px;
  height: 28px;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  border-radius: 25px;
  padding: 3px 2px 0 0;
  color: white;
  margin-left: -10px;
  margin-top: -10px;
}

#mg-floating-cart .cart-content {
  height: 375px;
  display: flex;
  flex-direction: column;
}
#mg-floating-cart .cart-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 18px;
  border-bottom: 1px solid lightgray;
  width: auto;
  padding: 8px 20px;
  margin: 0;
}
#mg-floating-cart .cart-title a {
  text-decoration: none;
  color: inherit;
  transition: color 300ms ease;
}
#mg-floating-cart .cart-title a.shop-link {
  font-size: 0.9em;
  font-weight: 400;
}
#mg-floating-cart .cart-title a.cart-link {
  font-weight: 600;
}
#mg-floating-cart .cart-list {
  margin: 0;
  padding: 0 15px 10px 15px;
  list-style: none;
  max-height: 325px;
  overflow-y: scroll;
}
#mg-floating-cart .cart-list::-webkit-scrollbar {
  width: 8px;
}
#mg-floating-cart .cart-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#mg-floating-cart .cart-list::-webkit-scrollbar-thumb {
  background: #32b7d3;
  border-radius: 8px;
}
#mg-floating-cart .cart-list::-webkit-scrollbar-thumb:hover {
  background: #228a9f;
}
#mg-floating-cart .cart-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}
#mg-floating-cart .cart-list li:first-child {
  padding-top: 10px;
}
#mg-floating-cart .cart-list li:last-child {
  border-bottom: 0;
}
#mg-floating-cart .cart-list li img {
  max-width: 75px;
  height: auto;
}
#mg-floating-cart .cart-list li h3 {
  padding-left: 15px;
  font-size: 18px;
  font-weight: regular;
  margin: 0;
}
#mg-floating-cart .cart-list li h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 300ms ease;
}
#mg-floating-cart .cart-list li .flex-wrap {
  display: flex;
  flex-direction: column;
  margin-right: 0;
  margin-left: auto;
}
#mg-floating-cart .cart-list li .flex-wrap span {
  font-size: 22px;
  font-weight: bold;
  text-align: end;
}
#mg-floating-cart .cart-list li .flex-wrap button.remove {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  transition: color 300ms ease;
}
#mg-floating-cart .cart-list li .flex-wrap button.remove:hover {
  color: red;
}
#mg-floating-cart .cart-checkout {
  position: relative;
  height: 75px;
  background: #32b7d3;
  display: flex;
  flex-direction: center;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  margin-right: 50px;
  border-bottom-left-radius: 15px;
  transition: font-size 300ms ease;
}
#mg-floating-cart .cart-checkout:hover {
  font-size: 22px;
}
#mg-floating-cart .update-message {
  font-size: 14px;
  letter-spacing: 0;
  color: green;
  font-weight: 400;
  position: absolute;
  top: -25px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  transition: opacity 300ms ease;
  opacity: 1;
}
#mg-floating-cart .update-message.hidden {
  opacity: 0;
}