.full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}

.cart-column {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px; /* optional padding for content inside the cart */
}

.cart-items {
  display: block;
}

.cart-items__header {
  display: none;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px auto 60px 120px;
  grid-template-rows: 1fr auto;
  gap: 0 8px;
  padding: 12px 0;
  align-items: center;
}

.cart-item__total .cart-item__discounted-prices {
  justify-content: flex-end;
}

.cart-item__error {
  grid-column: 1 / -1;
  background-color: var(--error);
  color: #fff;
  border-radius: 4px;
  padding: 8px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  margin-top: 12px;
}

.cart-item__title {
  display: block;
}

#cart-footer,
#cart-note {
  width: 100%;
}

#cart-footer {
  margin-left: auto;
}

.cart__subtotal {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart__tax {
  margin-top: 12px;
}

.shipping-notification {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.shipping-notification .checkmark {
  display: none;
}

.shipping-notification.threshold-reached .checkmark {
  display: block;
  min-width: 26px;
  min-height: 26px;
  stroke-width: 4px;
  background: none;
  border-radius: 50%;
}

.main-cart:not(.drawer) .shipping-notification.threshold-reached .checkmark {
  animation: fill .4s ease-in-out 1.4s forwards, scale .3s ease-in-out 1.9s both;
}

.shipping-notification .checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.main-cart:not(.drawer) .shipping-notification .checkmark__check {
  animation: stroke .3s cubic-bezier(.65, 0, .45, 1) 1.8s forwards;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-miterlimit: 10;
  fill: none;
}

.main-cart:not(.drawer) .checkmark__circle {
  animation: stroke .6s cubic-bezier(.65, 0, .45, 1) 1s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    background: var(--success);
  }
}

.template-cart .empty-cart-notice {
  margin-top: 40px;
}

.template-cart cart-items {
  margin-top: 40px;
  border-bottom: 1px solid var(--border-color);
}

.template-cart .cart-items__header {
  grid-template-columns: 2fr 1fr;
}

.template-cart .cart-item {
  display: grid;
  gap: 8px;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas: "a b c" "a b d" "e e e";
  align-items: start;
}

.template-cart .cart-item {
  border-top: 1px solid var(--border-color);
}

.template-cart .shipping-notification {
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
}

.template-cart .view-cart {
  display: none !important;
}

.template-cart .cart-item__image-container {
  grid-area: a;
}

.template-cart .cart-item__details {
  grid-area: b;
}

.template-cart .cart-item__total {
  grid-area: c;
}

.template-cart .cart-item__actions {
  grid-area: d;
  justify-self: end;
}

.template-cart .cart-item__error {
  grid-area: e;
}

@media only screen and (min-width: 768px) {
  .template-cart .cart-items__header {
    grid-template-columns: auto 96px 160px;
  }
  .template-cart .cart-item {
    align-items: center;
    grid-template-columns: 120px auto 96px 160px;
    grid-template-areas: "a b c d" "e e e e";
  }
  .template-cart .cart-item__total {
    grid-area: d;
  }
  .template-cart .cart-item__actions {
    grid-area: c;
  }
  .template-cart .cart__subtotal {
    margin-top: 0;
  }
  .template-cart #cart-footer,
  .template-cart #cart-note {
    width: max(40%, 260px);
  }
}

.drawer cart-items {
  margin-bottom: 40px;
}

.drawer .empty-cart-haiku,
.drawer .empty-cart-notice {
  text-align: center;
}

.drawer .shipping-notification {
  padding: 12px var(--drawer-padding);
  font-size: 1.6rem;
  background-color: #222;
  color: #fff;
}

.drawer .shipping-notification.threshold-reached {
  background-color: var(--success);
}

.drawer .cart-item {
  grid-template-columns: 72px 1fr auto;
  grid-template-areas: "a b c" "a b d" "e e e";
  align-items: start;
}

.drawer .cart-item__image-container {
  grid-area: a;
}

.drawer .cart-item__details {
  grid-area: b;
}

.drawer .cart-item__total {
  grid-area: c;
}

.drawer .cart-item__actions {
  grid-area: d;
  justify-self: end;
}

.drawer .quantity__input {
  padding: 2px 0;
}

.drawer cart-remove-button {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .drawer quantity-input.small {
    --width: 60px;
  }
  .drawer .quantity__button {
    display: none;
  }
}

.drawer.is-open .shipping-notification.threshold-reached .checkmark {
  animation: fill .4s ease-in-out .9s forwards, scale .3s ease-in-out 1.4s both;
}

.drawer.is-open .shipping-notification .checkmark__check {
  animation: stroke .3s cubic-bezier(.65, 0, .45, 1) 1.3s forwards;
}

.drawer.is-open .checkmark__circle {
  animation: stroke .6s cubic-bezier(.65, 0, .45, 1) .5s forwards;
}

drawer-cart [data-contents] {
  height: 100%;
}