/* Cart Page Layout */ .cart-layout { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start; } .cart-empty { padding: 3rem; text-align: center; } .cart-empty-icon { font-size: 4rem; color: var(--color-text-muted); margin-bottom: 1rem; } /* Cart Items */ .cart-items-list { display: grid; gap: 1rem; } .cart-item { display: grid; grid-template-columns: 80px 1fr auto auto; gap: 1rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .cart-item:last-child { border-bottom: none; padding-bottom: 0; } .cart-item-img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md); } .cart-item-name { font-weight: 600; margin-bottom: 0.25rem; } .cart-item-price { color: var(--color-text-muted); margin: 0; } /* Quantity Selector */ .quantity-selector { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .qty-btn { padding: 0.25rem 0.75rem; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--color-text); transition: var(--transition); } .qty-btn:hover { color: var(--color-primary); } .qty-input { width: 50px; text-align: center; border: none; outline: none; font-size: 1rem; font-family: inherit; } .cart-item-total { text-align: right; } .cart-item-total .amount { font-weight: 600; margin-bottom: 0.25rem; } .btn-remove { background: none; border: none; color: var(--color-error); cursor: pointer; font-size: 0.875rem; padding: 0; } /* Order Summary Sidebar */ .cart-summary { position: sticky; top: 100px; } .cart-summary-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .cart-summary-total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600; } .free-shipping-msg { font-size: 0.875rem; color: var(--color-primary); margin: 0.5rem 0; } @media (max-width: 768px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } .cart-item { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; } .cart-item-img { width: 64px; height: 64px; } .quantity-selector, .cart-item-total { grid-column: 2; } }