/* ======================================
RESET
====================================== */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{

  background: #f5f5f5;

  font-family:
  system-ui,
  -apple-system,
  sans-serif;

  color: #222;

}

/* ======================================
HEADER
====================================== */

.cart-header{

  width: 100%;

  height: 80px;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 40px;

  border-bottom:
  1px solid #eee;

}

.back-link{

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: #222;

  font-weight: 600;

}

.cart-logo{

  width: 170px;

  object-fit: contain;

}

/* ======================================
CONTAINER
====================================== */

.cart-container{

  width: 100%;

  max-width: 1450px;

  margin: 40px auto;

  padding: 0 30px;

  display: grid;

  grid-template-columns:
  1fr 380px;

  gap: 30px;

  align-items: start;

}

/* ======================================
PRODUTOS
====================================== */

.cart-products{

  background: #fff;

  border-radius: 24px;

  padding: 30px;

  box-shadow:
  0 5px 20px rgba(0,0,0,.05);

}

.cart-title{

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 30px;

}

.cart-title h1{

  font-size: 30px;

  font-weight: 800;

}

.cart-title span{

  font-size: 14px;

  color: #777;

}

/* ======================================
ITEM
====================================== */

.cart-item{

  display: grid;

  grid-template-columns:
  120px
  1fr
  auto;

  gap: 20px;

  padding: 20px 0;

  border-bottom:
  1px solid #eee;

  align-items: center;

}

.cart-item-image{

  width: 120px;
  height: 120px;

  background: #f5f5f5;

  border-radius: 18px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

}

.cart-item-image img{

  width: 100%;
  height: 100%;

  object-fit: contain;

}

.cart-item-info h3{

  font-size: 18px;

  margin-bottom: 10px;

}

.cart-item-price{

  color: #00a650;

  font-size: 26px;

  font-weight: bold;

  margin-bottom: 15px;

}

/* ======================================
QUANTIDADE
====================================== */

.quantity-box{

  display: flex;

  align-items: center;

  gap: 10px;

}

.quantity-btn{

  width: 36px;
  height: 36px;

  border: none;

  border-radius: 10px;

  background: #f3f3f3;

  cursor: pointer;

  font-size: 18px;

  font-weight: bold;

}

.quantity-box span{

  min-width: 25px;

  text-align: center;

  font-weight: bold;

}

/* ======================================
REMOVE
====================================== */

.remove-btn{

  background: none;

  border: none;

  color: #d62828;

  cursor: pointer;

  font-size: 15px;

  font-weight: 600;

  margin-top: 15px;

}

/* ======================================
TOTAL ITEM
====================================== */

.cart-item-total{

  font-size: 24px;

  font-weight: 800;

}

/* ======================================
RESUMO
====================================== */

.cart-summary{

  background: #fff;

  border-radius: 24px;

  padding: 30px;

  position: sticky;

  top: 20px;

  box-shadow:
  0 5px 20px rgba(0,0,0,.05);

}

.cart-summary h2{

  font-size: 24px;

  margin-bottom: 30px;

}

.summary-row{

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

  font-size: 16px;

}

.summary-total{

  margin-top: 25px;

  padding-top: 25px;

  border-top:
  1px solid #eee;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.summary-total h3{

  font-size: 32px;

  color: #00a650;

}

/* ======================================
BOTÃO
====================================== */

#finishOrderBtn{

  width: 100%;

  height: 58px;

  border: none;

  border-radius: 18px;

  margin-top: 30px;

  background: #0086ff;

  color: #fff;

  font-size: 18px;

  font-weight: bold;

  cursor: pointer;

  transition: .3s;

}

#finishOrderBtn:hover{

  transform: translateY(-2px);

  background: #0073db;

}

/* ======================================
CARRINHO VAZIO
====================================== */

.empty-cart{

  width: 100%;

  min-height: 70vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 40px;

}

.empty-cart i{

  font-size: 90px;

  color: #ccc;

  margin-bottom: 25px;

}

.empty-cart h2{

  font-size: 36px;

  margin-bottom: 10px;

}

.empty-cart p{

  color: #777;

  margin-bottom: 30px;

}

.empty-cart a{

  padding: 15px 30px;

  border-radius: 14px;

  background: #0086ff;

  color: #fff;

  text-decoration: none;

  font-weight: bold;

}

/* ======================================
RESPONSIVO
====================================== */

@media(max-width:1000px){

  .cart-container{

    grid-template-columns:
    1fr;

  }

  .cart-summary{

    position: relative;

    top: 0;

  }

}

@media(max-width:700px){

  .cart-header{

    padding: 0 20px;

  }

  .cart-logo{

    width: 130px;

  }

  .cart-container{

    padding: 0 15px;

  }

  .cart-products,
  .cart-summary{

    padding: 20px;

  }

  .cart-item{

    grid-template-columns:
    1fr;

  }

  .cart-item-image{

    width: 100%;
    height: 220px;

  }

  .cart-item-total{

    margin-top: 10px;

  }

}