.cart {
  height: 100%;
}

.cart-container {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
}

.cart-header {
  margin-block-start: 30px;
  margin-inline: 20px;
}
.cart-header .icon-panel {
  margin-block-end: 0;
}

.cart-lines {
  overscroll-behavior: contain;
  overflow: auto;
  padding-inline: 23px;
  padding-block: 3px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 20px;
}

.cart-line-image {
  aspect-ratio: var(--aspect);
  object-fit: cover;
  border-radius: 3px;
  overflow: hidden;
}

.cart-line-details {
  padding-block: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-line-header {
  display: flex;
  justify-content: space-between;
}

.cart-line-title {
  text-transform: uppercase;
  transition: color 500ms ease-out;
}
.cart-line-title:hover {
  color: var(--grey-02);
}

.cart-line-stepper {
  margin-block: 5px;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

.cart-footer {
  margin-inline: 20px;
  margin-block-end: 15px;
  border-top: var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-footer p {
  padding-inline: 3px;
}

.cart-footer-heading {
  padding-block: 5px 2px;
  display: flex;
  justify-content: space-between;
}