.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: Minecraft, monospace;
  font-size: var(--fs-sm);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
  cursor: pointer;
}

.nav-cart:hover,
.nav-cart:focus-visible {
  color: var(--c-yellow);
  --sh: var(--c-yellow-sh);
}

.cart-count {
  min-width: 26px;
  padding: 2px 6px;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--c-white);
  --sh: var(--c-pink-sh);
  background: var(--c-pink);
  box-shadow:
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.22),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.4);
}

.cart-count.is-empty {
  color: var(--c-gray);
  --sh: transparent;
  background: #2b1b3a;
}

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 3, 10, 0.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms steps(3);
}

.cart-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100%;
  padding: 0;
  background: var(--bg-panel);
  transform: translateX(102%);
  transition: transform 180ms steps(4);
}

.cart.is-open {
  transform: translateX(0);
}

.cart-banner {
  flex-shrink: 0;
  overflow: hidden;
}

.cart-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 880 / 320;
  object-fit: cover;
  image-rendering: auto;
}

.cart-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-4) var(--gap-4) var(--gap-3);
  box-shadow: inset 0 -2px 0 0 #2b1b3a;
}

.cart-title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-white);
  --sh: var(--c-white-sh);
}

.cart-close {
  padding: 4px 12px;
  border: 0;
  background: none;
  font-family: Minecraft, monospace;
  font-size: var(--fs-md);
  color: var(--c-gray);
  --sh: var(--c-gray-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
  cursor: pointer;
}

.cart-close:hover,
.cart-close:focus-visible {
  color: var(--c-red);
  --sh: var(--c-red-sh);
}

.cart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
  padding-top: var(--gap-5);
}

.cart-empty p {
  margin: 0;
  font-size: var(--fs-sm);
}

.cart-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  padding: var(--gap-3);
  background: rgba(11, 7, 16, 0.5);
  box-shadow:
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.06),
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.45);
}

.cart-slot {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.cart-slot img {
  width: 32px;
  height: 32px;
}

.cart-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.cart-name {
  font-size: var(--fs-sm);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.cart-sub {
  font-size: var(--fs-sm);
  color: var(--c-lilac);
  --sh: var(--c-lilac-sh);
}

.cart-unit {
  font-size: var(--fs-sm);
  color: var(--c-dgray);
  --sh: transparent;
}

.cart-stepper {
  margin-top: var(--gap-2);
}

.cart-stepper .mcbtn {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 0;
}

.cart-stepper .stepper-value {
  min-width: 48px;
}

.cart-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-2);
}

.cart-line-total {
  font-size: var(--fs-sm);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.cart-x {
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: Minecraft, monospace;
  font-size: var(--fs-sm);
  color: var(--c-dgray);
  --sh: transparent;
  cursor: pointer;
}

.cart-x:hover,
.cart-x:focus-visible {
  color: var(--c-red);
  --sh: var(--c-red-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.cart-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  padding: var(--gap-4);
  background: rgba(11, 7, 16, 0.5);
  box-shadow: inset 0 2px 0 0 #2b1b3a;
}

.cart-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.cart-label {
  font-size: var(--fs-sm);
  color: var(--c-gray);
  --sh: var(--c-gray-sh);
}

.cart-hint {
  font-size: var(--fs-sm);
  color: var(--c-dgray);
  --sh: transparent;
}

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  padding-top: var(--gap-2);
}

.cart-total-label {
  font-size: var(--fs-sm);
  color: var(--c-gray);
  --sh: var(--c-gray-sh);
}

.cart-total-value {
  font-size: var(--fs-lg);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.cart-note,
.cart-says {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-dgray);
  --sh: transparent;
}

.cart-says {
  color: var(--c-red);
  --sh: var(--c-red-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

/* html carries overflow-x: hidden in base.css, so body overflow never reaches the
   viewport. the lock has to go on the root or the page keeps scrolling behind the cart. */
html.cart-locked {
  overflow: hidden;
}

.cart-code-row {
  display: flex;
  align-items: stretch;
  gap: var(--gap-2);
}

.cart-code-row .field {
  flex: 1;
  min-width: 0;
}

.cart-code-row .mcbtn {
  flex-shrink: 0;
}

.cart-code-on {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--c-green);
  --sh: var(--c-green-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
  background: #0b0710;
  box-shadow:
    inset 2px 2px 0 0 #150d1e,
    inset -2px -2px 0 0 #3a2450;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variants {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.variants-label {
  font-size: var(--fs-sm);
  color: var(--c-gray);
  --sh: var(--c-gray-sh);
}

.variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
}

.variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-1);
  min-width: 148px;
  padding: 10px 16px;
  font-family: Minecraft, monospace;
  text-align: left;
  border-style: solid;
  border-width: 6px;
  border-image-source: url("../img/ui/btn.png");
  border-image-slice: 3 fill;
  border-image-width: 6px;
  border-image-repeat: repeat;
  cursor: pointer;
}

.variant:hover {
  border-image-source: url("../img/ui/btn-hover.png");
}

.variant.is-on {
  border-image-source: url("../img/ui/btn-primary.png");
}

.variant-label {
  font-size: var(--fs-sm);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.variant-price {
  font-size: var(--fs-md);
  color: var(--c-white);
  --sh: var(--c-white-sh);
  text-shadow: calc(1em / 9) calc(1em / 9) 0 var(--sh);
}

.variant-rate {
  font-size: var(--fs-sm);
  color: var(--c-dgray);
  --sh: transparent;
}

.variant.is-on .variant-rate {
  color: var(--c-lilac);
  --sh: var(--c-lilac-sh);
}

@media (prefers-reduced-motion: reduce) {
  .cart,
  .cart-scrim {
    transition: none;
  }
}

@media (max-width: 620px) {
  .cart {
    width: 100%;
  }

  .variant {
    flex: 1;
    min-width: 0;
  }
}