/* ---------- Cart Container ---------- */
.cart-container{
  max-width:1100px;
  margin:60px auto;
  padding:30px 24px;
  background:#fff;
  border-radius:0;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

/* ---------- Heading ---------- */
.cart-container h2{
  text-align:center;
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:28px;
  color:#111;
}

/* ---------- Block-style cart list ---------- */
.cart-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Each cart item as a card-like row (rectangular) */
.cart-item{
  display:flex;
  gap:18px;
  align-items:stretch;
  padding:14px;
  background:#fff;
  border:1px solid #f1f5f4;
  box-shadow:0 6px 18px rgba(0,0,0,0.03);
  border-radius:0; /* keep no-radius look */
}

/* Left: thumbnail */
.cart-item-left{
  flex: 0 0 120px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-thumb{
  width: 110px;
  height: 110px;
  object-fit: cover;
  display:block;
  border:1px solid #f0f0f0;
  background:#fff;
}

/* Center: product info and controls */
.cart-item-center{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.cart-item-title{
  font-weight:700;
  color:#111;
  font-size:16px;
  margin-bottom:6px;
}

.cart-item-link{
  color:inherit;
  text-decoration:none;
}
.cart-item-link:hover{text-decoration:underline;}

/* Meta */
.cart-item-meta{
  font-size:13px;
  color:#6b7280;
  margin-bottom:10px;
}

/* Controls row (price, qty, item total) */
.cart-item-controls{
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}

.cart-item-controls .label{
  display:block;
  font-size:12px;
  color:#6b7280;
  margin-bottom:4px;
}

.cart-price strong,
.cart-total-item strong{
  color:#10b981; /* site green */
  font-weight:700;
}

/* Qty box */
.qty-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:8px 10px;
  background:#f7faf8;
  color:#111;
  font-weight:700;
}

/* Right: action */
.cart-item-right{
  flex: 0 0 120px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Buttons (no border radius) */
.btn,
.remove-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  font-weight:700;
  text-decoration:none;
  border-radius:0;
  transition:background .18s ease, transform .12s ease, box-shadow .12s ease;
  border: none;
  cursor: pointer;
}

/* Reuse color scheme */
.secondary-btn{
  background:#111;
  color:#fff;
  padding:10px 16px;
}
.secondary-btn:hover{
  background:#222;
  transform:translateY(-2px);
}

.checkout-btn{
  background:#10b981;
  color:#fff;
  padding:10px 16px;
}
.checkout-btn:hover{
  background:#059669;
  transform:translateY(-2px);
}

/* Remove button */
.remove-btn{
  background:#ef4444;
  color:#fff;
  padding:8px 12px;
  font-weight:700;
}
.remove-btn:hover{
  background:#c0392b;
  transform:translateY(-2px);
}

/* Cart totals */
.cart-total{
  font-size:1.2rem;
  font-weight:600;
  text-align:right;
  margin:20px 0;
  color:#111;
}

/* Cart actions container */
.cart-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.cart-actions.bottom{margin-top:40px;}

/* ---------- Mobile responsive ---------- */
@media (max-width:820px){
  .cart-item{
    flex-direction:column;
    align-items:stretch;
    gap:0px;
    display: flex;
  }

  .cart-item-right{
    flex: 0 0 auto;
  }

  .cart-item-left{
    flex: 0 0 auto;
    text-align:center;
  }

  .cart-thumb{
    width:30%;
    height:110px;
    object-fit:cover;
  }

  .cart-item-center{
    margin-top:10px;
  }

  .cart-item-left{
    flex: 0 0 120px;
    display:flex;
    align-items:left;
    justify-content:left;
  }

  .cart-item-controls{
    gap:12px;
  }

  .cart-item-right{
    justify-content:flex-start;
    margin-top:12px;
  }

  .cart-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .checkout-btn, .secondary-btn{
    width:100%;
    justify-content:center;
  }

  .cart-total{
    text-align:left;
  }

  .cart-container{
    padding:18px;
    margin:24px auto;
  }
}

/* Keep empty cart text centered & consistent */
.empty-cart{
  text-align:center;
  color:#666;
  font-size:1rem;
  margin:40px 0 20px;
}