:root {
  --cart-mini-size: 14px;
  --cart-mini-padding: 2rem;
  --cart-mini-font: 0.6rem;
  --cart-mini-weight: 800;
  --cart-mini-background: var(--color-turqoise-500);
  --cart-mini-color: var(--color-green-500);
}

  @media (min-width: 1024px) {:root {
    --cart-mini-color: var(--body-color)
}
  }

/**
 * Mini cart
 */

.mini-cart-number {
  transition: var(--transition-fast);
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 14px;
  width: var(--cart-mini-size);
  height: 14px;
  height: var(--cart-mini-size);
  background: var(--color-turqoise-500);
  background: var(--cart-mini-background);
  color: var(--color-green-500);
  color: var(--cart-mini-color);
  font-size: 0.6rem;
  font-size: var(--cart-mini-font);
  font-weight: 800;
  font-weight: var(--cart-mini-weight);
  border-radius: 14px;
  border-radius: var(--cart-mini-size);
  line-height: 1;
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  opacity: 0;
}

@media (min-width: 475px) {

.mini-cart-number {
    top: 2.75rem;
    right: 1rem
}
  }

@media (min-width: 1024px) {

.mini-cart-number {
    top: 0.75rem;
    right: 0.15rem
}
  }

@media (min-width: 1440px) {

.mini-cart-number {
    right: 0.5rem
}
  }

.mini-cart-number.active {
    opacity: 1;
  }

.woocommerce-mini-cart-item {
  display: grid;
  align-items: center;
  grid-template-areas:
    "title title remove"
    ". quantity ."
  ;
  grid-template-columns: 2rem 1fr 1rem;
  grid-gap: 0.5rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.woocommerce-mini-cart-item a.remove {
    grid-area: remove;
  }

.woocommerce-mini-cart-item a:not([class]) {
    grid-area: title;
    display: flex;
    grid-gap: 0.5rem;
    gap: 0.5rem;
  }

.woocommerce-mini-cart-item img {
    max-width: 5rem;
  }

.woocommerce-mini-cart-item span.quantity {
    grid-area: quantity;
  }

.woocommerce-mini-cart__buttons .button {
    width: 100%;
    text-align: center;
  }

.woocommerce-mini-cart__total {
  text-align: right;
}