.mini-cart {
  width: 100%;
  max-width: 34.0625rem;
  height: 100%;
  max-height: 100dvh;
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  visibility: hidden;
  display: none;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 1.2500rem 0;
  margin: 0 auto;
  z-index: 101;
  background-color: var(--hh-color-reverse);
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
  transition: visibility var(--hh-duration-long) var(--hh-duration-long),
    transform var(--hh-duration-long);
}

.mini-cart-is-visible .mini-cart {
  display: block;
}

.mini-cart-is-active .mini-cart {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--hh-duration-long) 1ms, visibility 1ms;
}

.mini-cart[loading='true'] * {
  opacity: 0.9;
  pointer-events: none;
}

.mini-cart__close {
  background-color: var(--hh-color-brand-tertiary);
  border-radius: 35px;
  color: var(--hh-color-night, #000);
  position: absolute;
  right: 13px;
  top: 1.2500rem;
  cursor: pointer;
  border: none;
  padding: 0.2500rem 0.6250rem;
  transition: transform 0.7s ease;
}

.mini-cart__close:focus, .mini-cart__close:focus-visible,
.mini-cart-is-active .mini-cart:focus, .mini-cart-is-active .mini-cart:focus-visible{
  outline: 0.1250rem solid var(--hh-color-focus);
  outline-offset: var(--hh-focus-outline-offset);
}
.mini-cart__close:hover {
  transform: scale(1.2);
}

@media screen and (min-width: 750px) {
  .mini-cart__close {
    right: 1.5625rem;
  }
}

.mini-cart__close svg {
  height: 1.0625rem;
  width: 1.0625rem;
  color: var(--hh-color-night);
}

.mini-cart__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mini-cart__form {
  border-top: 1px solid var(--hh-color-brand-tertiary, #e7e7e7);
  display: flex;
  flex-direction: column;
  flex: 1 0 100%;
  max-height: 100%;
  padding: 1.2500rem 0.5000rem 0;
}

.mini-cart .cart-title,
.mini-cart .cart-shipping {
  padding: 0 0.5000rem;
}

@media screen and (min-width: 750px) {
  .mini-cart .cart-title,
  .mini-cart .cart-shipping {
    padding: 0 2.1875rem;
  }

  .mini-cart__form {
    flex: auto;
    height: 100%;
    padding: 1.2500rem 2.1875rem 0;
  }
}

.cart-title {
  margin: 0 0 0.5000rem;
}

.cart-shipping {
  align-items: center;
  display: flex;
  gap: 0.3750rem;
  margin-top: 0;
  margin-bottom: 1.1250rem;
}

.cart-shipping--complete {
  color: var(--hh-color-text);
}

.cart-items {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  gap: 1.2500rem;
}

@media screen and (max-width: 749px) {
  .cart-items.hidden--sm {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .cart-items {
    /* max-height: calc(95vh - 410px); */
    /* overflow-y: auto; */
    /* width: 100%; */
  }

  .cart-items__header {
    border-bottom: 1px solid var(--hh-color-brand-tertiary, #e7e7e7);
    color: var(--hh-color-subdued-secondary);
    display: grid;
    gap: 1.2500rem;
    grid-template-columns: 1fr 16% 20% 8% 2%;
    margin-bottom: 0.6250rem;
    padding-bottom: 0.6250rem;
    text-align: left;
  }
}

.mini-cart-checkout {
  background-color: var(--hh-background, #000);
  border: none;
  box-sizing: border-box;
  color: var(--hh-color, #fff);
  cursor: pointer;
  font: var(--hh-font);
  letter-spacing: var(--hh-letter-spacing);
  padding: var(--hh-padding, 1em 2em);
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: all var(--hh-duration-default, 300ms);
  width: 100%;
}

.mini-cart-checkout span {
  display: block;
  position: relative;
  transition: transform var(--hh-duration-long);
  --hh-slide-distance: var(--hh-custom-slide-distance, 17px);
  --hh-slide-offset: var(--hh-custom-slide-offset, 0px);
}

.mini-cart-checkout .slide-in {
  position: absolute;
  transform: translate3d(0, var(--hh-slide-distance), 0);
}

.mini-cart-checkout::after {
  content: '';
  display: inline-block;
  margin-left: 0.6250rem;
  font-size: 0.7500rem;
  height: 0.6250rem;
  width: 0.6250rem;
  border: 1px solid currentcolor;
  border-radius: 50%;
  transition: var(--hh-duration-default);
  flex: 0 0 0.6250rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.2500rem;
}

@media (prefers-reduced-motion: no-preference) {
  .mini-cart-checkout:hover span:first-child {
    transform: translate3d(
      0,
      calc(var(--hh-slide-distance) - calc(54px - var(--hh-slide-offset))),
      0
    );
  }

  .mini-cart-checkout:hover .slide-in {
    transform: translate3d(
      0,
      calc(var(--hh-slide-distance) - calc(36px - var(--hh-slide-offset))),
      0
    );
  }

  .mini-cart-checkout:hover:after {
    background-color: currentColor;
  }
}

.mini-cart__footer {
  border-top: 1px solid var(--hh-color-brand-tertiary, #e7e7e7);
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 1.2500rem;
  padding-top: 1.2500rem;
  position: relative;
  margin-top: 1.2500rem;
}

@media screen and (min-width: 750px) {
  .mini-cart__footer {
    flex-direction: row;
    padding-top: 0;
  }

  .mini-cart__checkout-container {
    flex: 1;
    max-width: 500px;
    padding-top: 1.2500rem;
  }
}

.mini-cart__checkout-container .body {
  font-size: 1.0000rem;
}

.mini-cart__recommended {
  border-top: 1px solid var(--hh-color-brand-tertiary, #e7e7e7);
  padding-top: 1.2500rem;
  position: relative;
}

@media screen and (min-width: 750px) {
  .mini-cart__recommended {
    border-top: none;
    border-left: 1px solid var(--hh-color-brand-tertiary, #e7e7e7);
    flex: 1 0 100%;
    max-width: 57.5vw;
    padding-left: 1.2500rem;
  }

  .mini-cart__recommended:after {
    display: none;
  }

  .mini-cart__recommended:before {
    height: 100%;
    left: -1px;
    top: 100%;
    width: 1px;
  }
}

.mini-cart__payments {
  color: var(--hh-color-subdued);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5000rem;
  justify-content: center;
}

.mini-cart__payment svg {
  width: 2.0000rem;
}