/* ===========================
   CART SECTION
=========================== */

.cart {
  padding:    60px 0;
  background: var(--bg);
}

.cart-container {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   30px;
  align-items:           start;
}

/* ===========================
   CART ITEMS LIST
=========================== */

.cart-items {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.cart-item {
  display:       flex;
  align-items:   center;
  gap:           18px;
  background:    var(--bg-card);
  padding:       20px;
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  transition:    box-shadow 0.25s;
}

.cart-item:hover {
  box-shadow: var(--shadow-hover);
}

.cart-item img {
  width:         110px;
  height:        110px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

.cart-info {
  flex: 1;
}

.cart-info h3 {
  font-size:     17px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 6px;
}

.cart-info p {
  color:         var(--text-muted);
  font-size:     13px;
  margin-bottom: 6px;
}

.cart-info h4 {
  color:       var(--primary);
  font-size:   20px;
  font-weight: 700;
  margin-top:  6px;
}

.unit-price {
  color:     var(--text-muted);
  font-size: 12px;
  display:   block;
  margin-top: 2px;
}

/* ===========================
   QUANTITY BOX (Cart)
=========================== */

.quantity-box {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.quantity-box button {
  width:           36px;
  height:          36px;
  border:          none;
  background:      var(--primary);
  color:           #fff;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  font-size:       20px;
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.2s, transform 0.2s;
}

.quantity-box button:hover {
  background:  var(--primary-hover);
  transform:   scale(1.08);
}

.quantity-box input {
  width:         52px;
  height:        36px;
  text-align:    center;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     15px;
  font-weight:   600;
  background:    var(--bg);
  color:         var(--text);
}

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

.remove-btn {
  border:        none;
  background:    rgba(239, 68, 68, 0.1);
  color:         #ef4444;
  padding:       9px 14px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-size:     13px;
  font-weight:   600;
  flex-shrink:   0;
  transition:    background 0.2s, color 0.2s;
}

.remove-btn:hover {
  background: #ef4444;
  color:      #fff;
}

/* ===========================
   ORDER SUMMARY
=========================== */

.cart-summary {
  background:    var(--bg-card);
  padding:       28px;
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  position:      sticky;
  top:           90px;
}

.cart-summary h2 {
  font-size:     1.3rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   16px;
  font-size:       15px;
  color:           var(--text);
}

.summary-row span:last-child {
  font-weight: 600;
}

.summary-row.total {
  border-top:     2px solid var(--border);
  padding-top:    18px;
  margin-top:     4px;
  font-size:      19px;
  font-weight:    700;
  color:          var(--primary);
}

.cart-summary .btn {
  width:         100%;
  margin-top:    10px;
  padding:       14px;
  font-size:     15px;
}

/* ===========================
   EMPTY CART
=========================== */

.empty-cart {
  display:    none;
  padding:    100px 0;
  text-align: center;
}

.empty-cart-icon {
  font-size:     80px;
  margin-bottom: 20px;
  opacity:       0.5;
}

.empty-cart h2 {
  font-size:     2rem;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 14px;
}

.empty-cart p {
  color:         var(--text-muted);
  margin-bottom: 28px;
  font-size:     16px;
}

/* ===========================
   RESPONSIVE — 992px
=========================== */

@media (max-width: 992px) {

  .cart-container {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

}

/* ===========================
   RESPONSIVE — 768px
=========================== */

@media (max-width: 768px) {

  .cart-item {
    flex-wrap:   wrap;
    text-align:  center;
    justify-content: center;
  }

  .cart-item img {
    width:  150px;
    height: 150px;
  }

  .cart-info {
    width:   100%;
    flex:    none;
  }

  .quantity-box {
    justify-content: center;
  }

  .remove-btn {
    width: 100%;
  }

}

/* ===========================
   RESPONSIVE — 480px
=========================== */

@media (max-width: 480px) {

  .cart { padding: 40px 0; }

  .cart-item { padding: 16px; }

  .cart-item img {
    width:  120px;
    height: 120px;
  }

  .cart-info h3  { font-size: 15px; }
  .cart-info h4  { font-size: 18px; }

  .summary-row.total { font-size: 17px; }

  .cart-summary { padding: 20px; }

}