.cart-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap) var(--gap-l);
  padding-top: var(--gap-l);
  padding-bottom: var(--gap-xl);

  back-button {
    grid-column: 1 / -1;
  }

  .cart-details {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    h1 {
      font-size: var(--font-40);
    }

    cart-items {
      display: flex;
      flex-direction: column;
      gap: var(--gap);

      & > .text-impact {
        color: var(--ink);
      }

      form {
        border-top: var(--border--light);
        padding-top: var(--gap);

        .cart-items {
          display: flex;
          flex-direction: column;
          gap: var(--gap);

          .cart-item {
            padding-bottom: var(--gap);

            &:not(:last-of-type) {
              border-bottom: var(--border--light);
            }
  
            .cart-item__quantity {
              justify-content: flex-start;
            }
          }
        }
      }

      .cart__mixed-types-notice {
        width: 100%;
        display: flex;
        gap: var(--gap-xs);
        border-top: var(--border--light);
        padding-top: var(--gap);

        & > span {
          flex-shrink: 0;
          width: 1rem;
          height: 1rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: var(--border);
          border-color: var(--blue);
          border-radius: 50%;
          font-family: var(--font-heading--family);
          font-size: var(--font-11);
          text-transform: none;
          color: var(--blue);
          transform: translateY(.1875rem);
        }

        p {
          display: flex;
          flex-direction: column;
          gap: var(--gap-xxs);
          font-size: var(--font-14);
          line-height: var(--line-height--tall);

          span {
            font-family: var(--font-heading--family);
            font-weight: var(--font-heading--bold);
            color: var(--blue);
          }
        }
      }
    }
  }

  .cart-summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    .cart-summary__wrapper {
      position: sticky;
      top: calc(var(--header-height) + var(--gap));

      cart-summary {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        background-color: var(--cloud);
        padding: var(--gap);
  
        .cart-summary__totals {
          display: flex;
          flex-direction: column;
          gap: var(--gap);
  
          .subtotal,
          .discount {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--gap);
            border-bottom: var(--border);
            padding-bottom: var(--gap);
      
            .subtotal-amount,
            .discount-amount {
              font-family: var(--font-heading--family);
              font-size: var(--font-24);
              font-weight: var(--font-heading--bold);
            }
          }
        }

        .cart-summary__notes {
          width: 100%;

          cart-note {
            width: 100%;

            details {
              summary {
                display: flex;
                align-items: center;
                gap: var(--gap-xs);
  
                span {
                  font-size: var(--font-14);
                }
  
                svg {
                  width: .625rem;
                  height: .625rem;
                  opacity: .64;
                  transition: var(--transition-opacity);

                  rect:last-of-type {
                    transition: var(--transition-transform);
                  }
                }
  
                &:hover {
                  svg {
                    opacity: 1;
                  }
                }
              }
  
              textarea {
                width: 100%;
                margin-top: var(--gap-xs);
                padding: var(--gap-xs);
                font-size: var(--font-14);
              }

              &[open] {
                summary {
                  svg {
                    rect:last-of-type {
                      transform: scaleY(0);
                      transform-origin: center;
                    }
                  }
                }
              }
            }
          }
        }

        cart-checkout {
          display: flex;
          flex-direction: column;
          gap: var(--gap);

          div {
            display: flex;
            align-items: center;
            gap: var(--gap-xs);
            font-size: var(--font-14);

            .policy-link {
              color: var(--ink);
              transition: var(--transition-color);
              text-decoration: underline;
              text-underline-offset: .125rem;
              cursor: pointer;

              &:hover {
                color: var(--color-primary);
              }
            }
          }

          button {
            width: 100%;

            &:disabled {
              opacity: .48;
              cursor: not-allowed;
            }
          }

          & > span {
            font-size: var(--font-14);
            color: var(--red);
          }
        }
  
        .cart-summary__unlogged {
          display: flex;
          flex-direction: column;
          gap: var(--gap);
  
          p {
            color: var(--red);
          }
  
          a {
            width: 100%;
          }
        }
  
        .cart-summary__usps {
          display: flex;
          flex-direction: column;
          gap: var(--gap-xs);
          border-top: var(--border);
          padding-top: var(--gap);
  
          .usp-item {
            display: flex;
            align-items: center;
            gap: var(--gap-xs);
            color: var(--ink);
  
            svg {
              width: .9rem;
              height: .9rem;
            }
  
            h3 {
              font-size: var(--font-12);
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 989px) {
  .cart-wrapper {
    grid-template-columns: 1fr;
  }
}