.cart {
  max-width: 85.69479vw;
  margin: 2.08333vw auto;
  font-family: var(--font-family-primary);
  color: var(--color-black);

  @media (max-width: 1024px) {
    margin: 5rem auto;
  }

  *:not(svg, path, circle, ellipse, rect, g, polygon, polyline, line) {
    margin: 0;
    padding: 0;
    line-height: 1;
  }

  .cart__header {
    margin-bottom: clamp(1.6rem, 1.25vw, 2.4rem);

    .cart__header-title {
      margin: 0;
      font-size: clamp(1.8rem, 1.35416vw, 2.6rem);
      font-weight: 600;
      font-family: var(--font-family-tertiary);
    }
  }

  .cart__content {
    display: grid;
    grid-template-columns: 58fr 42fr;
    column-gap: 5vw;
    align-items: center;
    place-content: center;

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      row-gap: 2rem;
    }
  }

  .cart-page__section,
  .cart-page__aside {
    width: 100%;
    height: 100%;

    @media (max-width: 1024px) {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }

  .cart-page__section__list {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray) var(--color-off-white);
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.6rem, 1.25vw, 2.4rem);
    padding-right: 2.65625vw;
    max-height: 63.3rem;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;

    .cart-page__section__list__product {
      display: flex;
      align-items: start;
      position: relative;
      padding-right: 2.76041vw;
      padding-bottom: 0.625vw;
      gap: 1.09375vw;

      .cart-page__section__list__product__img {
        aspect-ratio: 1/1;
        min-width: 7.5vw;
        width: 7.5vw;
        overflow: hidden;
        border-radius: 0.2rem;
        display: block;

        :is(img) {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
        }
      }

      .cart-page__section__list__product__info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        
        .cart-page__section__list__product__info__name {
          font-size: clamp(1.6rem, 1.04166vw, 2rem);
          font-weight: 700;
          margin-bottom: 0.20833vw;
        }
        .cart-page__section__list__product__info__category {
          font-size: clamp(1.2rem, 0.72916vw, 1.4rem);
          font-weight: 400;
          color: var(--color-gray);
        }
        .cart-page__section__list__product__info__price {
          font-size: clamp(1.8rem, 1.25vw, 2.4rem);
          font-weight: 500;
          margin-top: 0.625vw;
        }
        .cart-page__section__list__product__info__installment {
          font-size: clamp(1.2rem, 0.83333vw, 1.6rem);
          font-weight: 400;
          margin-bottom: 0.625vw;
        }
      }

      .cart-page__section__list__product__info__button__remove {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.66666vw;
        height: 1.66666vw;
        cursor: pointer;

        @media (max-width: 1024px) {
          min-width: 2.5rem;
          min-height: 2.5rem;
          max-width: 2.5rem;
          max-height: 2.5rem;
          width: 100%;
          height: 100%;
          position: relative;
        }
      }

      :is(cart-item-quantity-input) {
        display: flex;
        padding: 0.39062vw 0.83333vw;
        border: 0.1rem solid var(--color-gray);
        color: var(--color-black);
        width: fit-content;
        border-radius: 10rem;
        align-items: center;

        :is(input) {
          color: var(--color-black);
          font-size: clamp(1.2rem, 0.72916vw, 1.4rem);
          font-weight: 400;
          text-align: center;
          background-color: transparent;
          border: 0;
          margin: 0 0.2rem;
          width: 2.2rem;
        }

        :is(button, cart-item-remove-button) {
          color: var(--color-gray);
          width: fit-content;
          height: fit-content;
          display: flex;
          flex-shrink: 0;
          border: 0;
          height: auto;
          background-color: transparent;
          cursor: pointer;
          align-items: center;
          justify-content: center;

          :is(svg) {
            width: 0.78125vw;
            height: auto;
          }
        }

        :is(button[name="minus"].disabled) {
          display: none;
        }

        :is(button[name="minus"]:not(.disabled) + cart-item-remove-button) {
          display: none;
        }
      }
    }

    &::-webkit-scrollbar {
      width: 0.8rem;
      border-radius: 0.2rem;
    }
  
    &::-webkit-scrollbar-track {
      background: var(--color-off-white);
    }
  
    &::-webkit-scrollbar-thumb {
      background: var(--color-gray);
      transition: background-color 0.3s ease;
    }
  }

  .cart-page__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .cart-page__aside__section__button {
      margin-top: 1.66666vw;
      width: 100%;

      :is(a) {
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        font-size: clamp(1.8rem, 1.25vw, 2.4rem);
        font-family: var(--font-family-secondary);
        padding: 0.9375vw;
        text-transform: uppercase;
        font-weight: 700;
        transition: all 0.3s ease;

        &:hover {
          filter: brightness(1.1);
          transform: translateY(-0.2rem);
        }
      }
    }

    .cart-page__aside__section__continue {
      margin-top: 1.09375vw;
      text-align: center;

      :is(a) {
        font-size: clamp(1.4rem, 1.14583vw, 2.2rem);
        font-family: var(--font-family-primary);
        text-decoration: underline;
        font-weight: 500;
        color: inherit;
      }
    }

    .cart-page__aside__header__title {
      font-size: clamp(1.8rem, 1.35416vw, 2.6rem);
      font-weight: 600;
      font-family: var(--font-family-tertiary);
      margin: 2.08333vw 0 1.09375vw;
    }

    .free-shipping-bar__content {
      padding: 0.83333vw;
      
      .free-shipping-bar__text {
        font-size: clamp(1.4rem, 1.04166vw, 2rem);
      }
    }

    .cart-page__aside__section__subtotal-main {
      background-color: var(--color-off-white);
      padding: 0.83333vw;
      border-radius: 0.2rem;
      border: 0.1rem solid var(--color-light-gray);

      .cart-page__aside__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.09375vw;
        font-size: clamp(1.4rem, 0.9375vw, 1.8rem);
  
        :is(strong) {
          font-weight: 600;
        }
      }
  
      .cart-page__aside__section__subtotal {
        margin-bottom: 0.625vw;
      }
  
      .cart-page__aside__section__subtotal__title {
        font-size: clamp(1.8rem, 1.35416vw, 2.6rem);
        font-family: var(--font-family-tertiary);
      }
  
      .cart-page__aside__section__subtotal__price {
        font-size: clamp(1.8rem, 1.35416vw, 2.6rem);
      }

      .cart-page__aside__section__coupon {
        color: var(--color-intermediate-gray-2);
        margin-bottom: 0.41666vw;

        &:is(:has([data-current-progress]:not([data-current-progress="100"])) .cart-page__aside__section__coupon) {
          margin-bottom: 0.625vw;
        }
      }

      .cart-page__aside__section__installment {
        margin-bottom: 0.625vw;
      }

      &:not(:has(.cart-page__aside__section__coupon)) .cart-page__aside__section__installment {
        margin-top: 1.25vw;
      }
  
      .cart-page__aside__section__divider {
        margin: 0 0 0.625vw 0;
        height: 0.2rem;
        background-color: var(--color-white);
        width: 100%;
      }
  
      .cart-page__aside__section__freight {
        color: var(--color-intermediate-gray-2);
        margin-bottom: 0.625vw;

        &:is(:has([data-current-progress]:not([data-current-progress="100"])) .cart-page__aside__section__freight) {
          display: none;
        }
      }
    }
  }
}

cart-page-controller + hr {
  margin: 0;
  height: 0.4rem;
  background-color: var(--color-medium-gray);
  width: 89.27083vw;
}