@import url("variables.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

.cart-container {
  background-color: var(--color-backround);
  padding: var(--spacing-0) var(--spacing-0) var(--spacing-80) var(--spacing-0);

}
.cart-hero{
  background-image: url("../images/hero-background.png");
  background-size: cover;
  padding: var(--spacing-0) var(--spacing-70) var(--spacing-64) var(--spacing-70);
  margin-bottom: var(--spacing-48);
}

.cart-hero h2{
  text-align: center;
  margin-top: 5px;
  margin-bottom: var(--spacing-16);
}

.cart-content{
  padding: var(--spacing-0) var(--spacing-70);
}

.cart-box {
  display: flex;
  max-width: 1100px;
  gap: var(--spacing-80);
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin: var(--spacing-0) auto;
  align-items: stretch;
}

.cart-list {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  align-items: center;
  background: var(--color-backround);
  border: var(--border);
  border-radius: var(--card-border-radius);
  justify-content: center;
  height: auto;
  padding: var(--spacing-32);
}

.cart-list, .cart-summary {
  width: 100%;
  box-sizing: border-box;
}

.cart-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}

.cart-item-image {
  width: 100px;
  height: 100px;
  border-radius: var(--card-border-radius);
  object-fit: cover;
  display: block;
}

.cart-item-title {
  margin: var(--spacing-0);
  font-size: var(--font-size-mobile-h4);
  flex: 1;
}

.cart-item-price {
  color: var(--color-button-cta);
  font-size: var(--font-price-2-mobile);
  font-weight: var(--font-weight-bold);
}

.cart-remove {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
}

.cart-summary {
  flex: 1;
  background: var(--color-secondary);
  padding: var(--spacing-16);
  border-radius: var(--border-radius);
  border: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  align-items: flex-start; 
  border-radius: var(--image-border-radius);
  padding: var(--spacing-32);
  margin: var(--spacing-0);
  max-height: 224px;
}

.cart-total {
  font-size: var(--font-price-2-mobile);
  font-weight: var(--font-weight-bold);
}

#cart-total{
  color: var(--color-button-cta);
}

.cart-empty-inside {
  color: var(--color-primary);
  text-align: center;
}

.cart-empty-inside .cta-button{
  margin-top: var(--spacing-24) ;
}