/* Misfit cart drawer: the design's "Your Shaker" panel.

   Paints the platform's own cart drawer (components/cart/cart-drawer.html)
   when Theme settings > Misfit cart drawer > Misfit style is on. The drawer's
   markup, quantity controls, coupon, taxes and checkout are the platform's;
   only the surfaces change, so every cart feature keeps working. Values are
   the design's .shop-cart, .cart-head, .cart-line, .qty-controls,
   .cart-foot-shop and .shipping-note, read through the same brand tokens as
   the rest of the site. */

.misfit-drawer.cart-drawer__body {
  width: min(440px, 100%);
  color: var(--mm-cream, #f3ead5);
  background: var(--mm-ink, #17142f);
  box-shadow: -20px 0 50px #0006;
  font-family: var(--mm-font-body, Garamond, Georgia, serif);
}

/* The game pages zoom the design by 125% on desktop; the drawer did too. */
@media (min-width: 901px) {
  .misfit-drawer.cart-drawer__body.misfit-zoom {
    zoom: var(--mm-zoom, 1.25);
  }
}

/* Head */
.misfit-drawer .cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
  border-bottom: 1px solid #fff2;
}

.misfit-drawer .cart-drawer__header::after {
  display: none;
}

.misfit-drawer .cart-drawer__header h2 {
  margin: 0;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(1.2rem * var(--mm-fs-head, 1));
  font-weight: 700;
  color: var(--mm-cream-light, #f4e5c4);
}

.misfit-drawer .cart-drawer__close {
  position: static;
  padding: 4px;
  color: #fff;
}

.misfit-drawer .cart-drawer__close svg {
  width: 18px;
  height: 18px;
}

/* Body: the ladder spans the panel, the lines scroll under it. */
.misfit-drawer .cart-drawer__inner {
  padding-inline: 0;
  background: transparent;
  overflow-y: auto;
}

.misfit-drawer .misfit-cart-ladder {
  display: block;
  margin: 0;
  border-bottom: 1px solid #fff2;
}

.misfit-drawer .misfit-cart-ladder .cart-ladder {
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.misfit-drawer .cart-drawer__items {
  padding: 18px 22px;
}

.misfit-drawer .cart-drawer__loading {
  background: var(--mm-ink, #17142f);
}

/* Lines */
.misfit-drawer .cart-item {
  padding-block: 14px;
  border-bottom: 1px solid #fff2;
}

.misfit-drawer .cart-item__product {
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 13px;
  align-items: center;
}

.misfit-drawer .cart-item__picture {
  width: 68px;
  height: 68px;
  background: #f4ead8;
}

.misfit-drawer .cart-item__picture img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.misfit-drawer .cart-item__title,
.misfit-drawer .cart-item__title a {
  margin: 0;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(0.9rem * var(--mm-fs-head, 1));
  font-weight: 700;
  color: var(--mm-cream, #f3ead5);
}

.misfit-drawer .cart-item__option,
.misfit-drawer .cart-item__property,
.misfit-drawer .cart-item__total,
.misfit-drawer .cart-item__total-final {
  margin-block: 3px 0;
  font-size: calc(0.78rem * var(--mm-fs-body, 1));
  color: #c5bbc2;
}

.misfit-drawer .cart-item__total-original {
  color: #c5bbc280;
}

.misfit-drawer .cart-item__amount {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 7px;
}

/* .qty-controls */
.misfit-drawer .cart-item__amount-operator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.misfit-drawer theme-input-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.misfit-drawer theme-input-number button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: 1px solid #fff4;
}

.misfit-drawer theme-input-number button svg {
  width: 10px;
  height: 10px;
}

.misfit-drawer theme-input-number input {
  width: 26px;
  height: 25px;
  padding: 0;
  color: #fff;
  text-align: center;
  background: transparent;
  border: 0;
}

.misfit-drawer .cart-item__remove {
  color: #c5bbc2;
}

/* Empty */
.misfit-drawer .cart-empty__body {
  padding: 45px 10px;
}

.misfit-drawer .cart-empty__tips {
  margin: 0 0 22px;
  font-size: calc(1.2rem * var(--mm-fs-body, 1));
  color: var(--mm-cream, #f3ead5);
}

.misfit-drawer .cart-empty__button,
.misfit-drawer .cart-checkout .button,
.misfit-drawer .misfit-drawer__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(0.78rem * var(--mm-fs-head, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--mm-pink, #d63e72);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 6px 0 var(--mm-pink-shadow, #772342);
  transition: transform 0.2s, box-shadow 0.2s;
}

.misfit-drawer .cart-empty__button:hover,
.misfit-drawer .cart-checkout .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--mm-pink-shadow, #772342);
}

/* Foot: .cart-foot-shop */
.misfit-drawer .cart-drawer__payment {
  padding: 14px 22px 0;
}

.misfit-drawer .cart-drawer__payment::before {
  display: none;
}

.misfit-drawer .cart-fixed-checkout,
.misfit-drawer .misfit-drawer__foot {
  padding: 20px 22px;
  color: var(--mm-cream, #f3ead5);
  background: transparent;
  border-top: 1px solid #fff2;
}

.misfit-drawer .cart-fixed-checkout__container {
  padding: 0;
}

.misfit-drawer .cart-fixed-checkout__main-info {
  display: block;
}

.misfit-drawer .cart-fixed-checkout__total,
.misfit-drawer .misfit-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 13px;
  font-family: var(--mm-font-display, Cinzel, Georgia, serif);
  font-size: calc(1rem * var(--mm-fs-head, 1));
  color: var(--mm-cream, #f3ead5);
}

.misfit-drawer .cart-fixed-checkout__total-text,
.misfit-drawer .cart-fixed-checkout__total-price span {
  font: inherit;
  color: inherit;
}

.misfit-drawer .cart-fixed-checkout__buttons,
.misfit-drawer .cart-checkout,
.misfit-drawer .cart-checkout .button,
.misfit-drawer .misfit-drawer__checkout {
  width: 100%;
}

.misfit-drawer .misfit-drawer__checkout[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.misfit-drawer .misfit-drawer__note {
  margin: 13px 0 0;
  font-size: calc(0.76rem * var(--mm-fs-body, 1));
  text-align: center;
  color: #bfb6bd;
}

.misfit-drawer .cart-taxes {
  color: #bfb6bd;
}