#CartDrawer {

  .cart-drawer__overlay {}

  .drawer__inner {
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /*width: min(40rem, 100vw);*/
    width: min(34rem, 100vw);
    max-width: 100vw;

    .drawer__header {

      .drawer__close {
        background-color: transparent;
        color: rgb(var(--color-foreground));
        box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0);
        cursor: pointer;
      }
    }

    cart-drawer-items {
      overflow: visible;

      .drawer__contents {
        overflow: visible;

        .drawer__cart-items-wrapper {
          .ajp-cart-item {
            border-bottom: .1rem solid rgba(var(--color-foreground), .08);

            .ajp-cart-item__media {
              .ajp-cart-item__link {}
              .ajp-cart-item__image {}
            }

            .ajp-cart-item__content {
              min-height: 100px;

              .ajp-cart-item__name {
                align-items: flex-start;
              }
              .ajp-cart-item__options {
                dt {}
                dd {
                  .link {font-size: inherit;}
                  a {text-decoration: underline;}
                }
              }
              .ajp-cart-item__controls {
                margin-top: auto;

                quantity-popover {
                  position: relative;
                  width: min(18rem, 100%);

                  .cart-item__quantity-wrapper {
                    width: fit-content;
                  }

                }
              }
              
              .ajp-cart-item__price {}
            }

            cart-remove-button {
              button {
                color: #dc2626;
                transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
              }

              &:hover {
                background: #dc2626;
                /*background-color: rgba(220, 38, 38, 0.08);*/
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;

                button {color: #ffffff;}
              }
            }

            &:last-child {
              border-bottom: 0;
            }

            &.ajp-cart-item--apo-child {
              background: rgba(var(--color-foreground), 0.03);

              .ajp-cart-item__media {
                opacity: 0.5;
                .ajp-cart-item__image--placeholder {
                  opacity: 0.45;
                }
              }

              .ajp-cart-item__controls {
                opacity: 0.7;
                .quantity__button, .quantity__input {pointer-events: none; cursor: not-allowed;}
                .quantity__button {opacity: 0.4;}
                .quantity__input {background: transparent; opacity: 0.6;}
              }

              .ajp-cart-item__remove {flex: 0 0 38px; width: 38px; display: block;}
            }

            /* Updating cart line item */
            &.is-updating {
              pointer-events: none;

              &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(255, 255, 255, 0.6);
                backdrop-filter: blur(1px);
                z-index: 2;
              }

              .ajp-cart-item__loading {
                opacity: 1;
                visibility: visible;
              }
            }

            .ajp-cart-item__loading {
              position: absolute;
              inset: 0;
              z-index: 3;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              visibility: hidden;
              pointer-events: none;
            }

            .ajp-cart-item__loading .loading__spinner {
              width: 2rem;
              height: 2rem;
            }
          }

          .ajp-cart-item__error {
            display: none;
            margin-top: 0.5rem;
            color: #bc305c;
            width: 14rem;
          }

          .ajp-cart-item__error:not(:empty),
          .ajp-cart-item__error:has(.cart-item__error-text:not(:empty)) {
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
          }

          .ajp-cart-item__error .cart-item__error-text {
            font-size: 0.75rem;
            line-height: 1.35;
          }

          .ajp-cart-item__error .icon-error {
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
            margin-top: 0.05rem;
          }
        }
      }
    }

    .cart-drawer-upsells {
      /*border-top: 1px solid rgba(var(--color-foreground), 0.08);
      background: linear-gradient(to bottom, rgba(var(--color-foreground), 0.04) 0%, rgba(var(--color-background), 1) 40%);*/
      background: rgb(226 156 171);
      padding-top: 1rem;

      .cart-drawer-upsells__header {
        min-height: 2.75rem;

        .cart-drawer-upsells__title {}
        .cart-drawer-upsells__promo {}

      }

      /* Splide */
      .cart-drawer-upsells__slider {
        &.splide {
          visibility: hidden;

          &.is-initialized,
          &[style*="visibility: visible"] {
            visibility: visible;
          }

          &:not(.is-initialized) {
            .splide__slide {
              flex: 0 0 100%;
              max-width: 100%;
            }
          }          
        
          .splide__arrows {
            position: absolute;
            top: -3.2rem;
            right: 0;
            display: flex;
            gap: 0.4rem;
            z-index: 2;

            .splide__arrow {
              position: static;
              transform: none;
              width: 2.4rem;
              height: 2.4rem;
              min-width: 2.4rem;
              background: rgba(var(--color-foreground), 0.06);
              opacity: 1;

              svg {width: 1.2rem; height: 1.2rem;}

              &.splide__arrow--prev {
                svg {transform: rotate(180deg);}
              }
              &.splide__arrow--next {}

              &:hover {background: rgba(var(--color-foreground), 0.12);}
              &:disabled {opacity: 0.35; cursor: not-allowed;}
              &:focus-visible {outline: 2px solid rgba(var(--color-foreground), 0.45); outline-offset: 2px;}
            }
          }

          .splide__track {
            overflow: hidden;
          }          

          .splide__splide {
            height: auto;

            > * {
              height: 100%;
            }            
          }

          .splide__pagination {
            position: static;
            margin-top: 0.8rem;
            padding: 0;

            .splide__pagination__page {
              width: 0.6rem;
              height: 0.6rem;
              margin: 0 0.25rem;
              background: rgba(var(--color-foreground), 0.25);
              opacity: 1;

              &.is-active {transform: none; background: rgba(var(--color-foreground), 0.75);}
            }
          }
        }
      }
      
      .cart-drawer-upsells__card {
        border: 1px solid rgba(var(--color-foreground), 0.08);

        a {}
        img {}
        .cart-drawer-upsells__details {

          .cart-drawer-upsells__price {}

        }

        .cart-drawer-upsells__add {
          background-color: rgb(51, 128, 56);
          color: rgb(255, 255, 255);
        }
      }

      /* Upsells Loading Overlay */
      &.is-loading {

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(2px);
          z-index: 2;
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 24px;
          height: 24px;
          transform: translate(-50%, -50%);
          border: 2px solid rgba(0, 0, 0, 0.2);
          border-top-color: rgba(0, 0, 0, 0.7);
          border-radius: 50%;
          animation: ajp-spin 0.6s linear infinite;
          z-index: 3;
        }
      }
    }

    .drawer__footer {
      padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); /* Push above any bottom page bars */
      background: rgb(239, 239, 239);

      .ajp-details-cart-drawer {
        margin-top: 0;

        summary {
          padding-top: .75rem;
          padding-bottom: .75rem;
        }

        .ajp-cart-note__content {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.25s ease;
        }

        .ajp-cart-note__content-inner {
          min-height: 0;
          overflow: hidden;

          cart-note {
            top: 0;
          }
        }

        &[open]:not(.is-closing) .ajp-cart-note__content {grid-template-rows: 1fr;}
        &[open].is-closing .ajp-cart-note__content {grid-template-rows: 0fr;}

        &[open] .ajp-cart-note__icon-plus {display: none;}
        &[open] .ajp-cart-note__icon-minus {display: inline;}
        &.is-closing .ajp-cart-note__icon-plus {display: inline;}
        &.is-closing .ajp-cart-note__icon-minus {display: none;}
      }

      .ajp-cart-footer-summary {
        padding: 0;

        .ajp-cart-footer-summary__rows {
          border-top: 1px solid rgba(var(--color-foreground), 0.08);

          .ajp-cart-footer-summary__row {
            border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
          }

          .ajp-cart-footer-summary__row > span:first-child,
          .ajp-cart-footer-summary__label {

          }

          .ajp-cart-footer-summary__row > span:last-child {
            text-align: right;
          }

          .ajp-cart-footer-summary__section {
            border-bottom: 1px solid rgba(var(--color-foreground), 0.08);

            .ajp-cart-footer-summary__label {}

            .ajp-cart-footer-summary__row--discount {
              /*padding: 0;*/
              border-bottom: 0;

              .ajp-cart-footer-summary__discount-code {
                width: fit-content;
                max-width: 100%;
                border-radius: 0.3rem;
                background: rgba(var(--color-foreground), 0.06);
                word-break: break-word;

                svg {width: 20px; height: auto;}
              }
            }
          }

          .ajp-cart-footer-summary__row--saving {
            position: relative;
            isolation: isolate;

            > span {
              position: relative;
              z-index: 1;
            }

            .ajp-saving-highlight {
              position: absolute;
              inset: 0 -0.35rem;
              z-index: 0;
              width: calc(100% + 0.7rem);
              height: 100%;
              fill: none;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-dasharray: 430;
              stroke-dashoffset: 430;
              pointer-events: none;
              animation: none;

              cart-drawer.active & {
                animation: ajp-saving-highlight-draw 4.5s ease-in-out 3s infinite;
              }

              cart-drawer:not(.active) & {
                stroke-dashoffset: 430;
              }

              &.ajp-saving-highlight--main {
                stroke: rgba(255, 235, 59, 0.72);
                stroke-width: 45;
                transform: rotate(-0.7deg);
              }

              &.ajp-saving-highlight--edge {
                stroke: rgba(214, 185, 20, 0.32);
                stroke-width: 32;
                transform: rotate(-1deg) translateY(1px);
                filter: blur(0.5px);
              }
            }

            .ajp-saving-emoji {
              display: inline-block;
              font-size: 1.2em;
              line-height: 1;
              transform-origin: 50% 70%;
              animation: none;

              cart-drawer.active & {
                animation: ajp-saving-emoji-wiggle 1.8s ease-in-out 3.8s infinite;
              }
            }
          }

          .ajp-cart-footer-summary__row--total {
            border-bottom: 0;
          }
        }

        .ajp-cart-footer-summary__note {
          display: block;
          margin: 1rem 0;
          text-align: left;
        }
      }
    }
  }
}

@keyframes ajp-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*
@media screen and (min-height: 900px) {
  #CartDrawer {
    .drawer__inner {
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .drawer__header,
      .cart-drawer-upsells,
      .drawer__footer {
        flex: 0 0 auto;
      }

      cart-drawer-items {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;

        .cart-drawer__form,
        #CartDrawer-CartItems {
          height: 100%;
          min-height: 0;
        }

        .drawer__contents {
          height: 100%;
          min-height: 0;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }
      }
    }
  }
}
*/

/* Hide the upsells carousel initially and then fade in once cart drawer is active */
#CartDrawer .cart-drawer-upsells .splide {
  opacity: 0;
  transition: opacity 0.12s ease 0.2s;
}

cart-drawer.active #CartDrawer .cart-drawer-upsells .splide {
  opacity: 1;
}

@keyframes ajp-saving-highlight-draw {
  0% {
    stroke-dashoffset: 430;
  }

  24%,
  82% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 430;
  }
}

@keyframes ajp-saving-emoji-wiggle {
  0%,
  65%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  75% {
    transform: translateY(-2px) rotate(-10deg) scale(1.08);
  }

  85% {
    transform: translateY(0) rotate(8deg) scale(1.04);
  }

  92% {
    transform: translateY(-1px) rotate(-5deg) scale(1.02);
  }
}