/* Cart Page */
.cart-section { padding: var(--space-10) 0 var(--space-20); }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; }
.cart-items { background: var(--white); border: 1px solid var(--neutral-100); border-radius: var(--radius-xl); overflow: hidden; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { background: var(--neutral-50); padding: var(--space-4) var(--space-5); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--neutral-600); text-align: left; text-transform: uppercase; letter-spacing: 0.5px; }
.cart-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.cart-item-info { display: flex; align-items: center; gap: var(--space-4); }
.cart-item-img { width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--neutral-50); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.cart-item-name { font-weight: 600; font-size: var(--text-sm); }
.cart-item-comp { font-size: var(--text-xs); color: var(--neutral-500); margin-top: 2px; }
.cart-qty { display: flex; align-items: center; gap: 0; }
.cart-qty button { width: 32px; height: 32px; border: 1px solid var(--neutral-200); background: var(--white); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cart-qty button:first-child { border-radius: 6px 0 0 6px; }
.cart-qty button:last-child { border-radius: 0 6px 6px 0; }
.cart-qty input { width: 44px; height: 32px; border: 1px solid var(--neutral-200); border-left: none; border-right: none; text-align: center; font-size: var(--text-sm); font-weight: 600; }
.cart-remove { color: var(--danger); cursor: pointer; font-size: 18px; transition: transform var(--transition-fast); }
.cart-remove:hover { transform: scale(1.2); }
.cart-summary { background: var(--white); border: 1px solid var(--neutral-100); border-radius: var(--radius-xl); padding: var(--space-6); position: sticky; top: calc(var(--header-height) + 24px); }
.cart-summary h3 { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--neutral-100); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.summary-row.total { font-size: var(--text-lg); font-weight: 700; color: var(--primary-600); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 2px solid var(--neutral-100); }
.cart-empty { text-align: center; padding: var(--space-16) var(--space-8); }
.cart-empty h2 { margin-bottom: var(--space-4); }
.cart-empty p { color: var(--neutral-500); margin-bottom: var(--space-6); }
/* Checkout Page */
.checkout-section { padding: var(--space-10) 0 var(--space-20); }
.checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-8); align-items: start; }
.checkout-steps { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-10); }
.step { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--neutral-400); }
.step.active { color: var(--primary-600); }
.step.done { color: var(--success); }
.step-num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); }
.step.active .step-num { background: var(--primary-600); color: var(--white); border-color: var(--primary-600); }
.step.done .step-num { background: var(--success); color: var(--white); border-color: var(--success); }
.step-line { width: 60px; height: 2px; background: var(--neutral-200); }
.checkout-form { background: var(--white); border: 1px solid var(--neutral-100); border-radius: var(--radius-xl); padding: var(--space-8); }
.checkout-form h3 { margin-bottom: var(--space-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.payment-options { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.payment-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 2px solid var(--neutral-200); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.payment-option:hover, .payment-option.selected { border-color: var(--primary-500); background: var(--primary-50); }
.payment-option input { accent-color: var(--primary-600); }
.order-confirm { text-align: center; padding: var(--space-12); }
.order-confirm .check-circle { width: 80px; height: 80px; background: var(--primary-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto var(--space-6); }
.order-confirm h2 { color: var(--primary-600); margin-bottom: var(--space-3); }
.order-id { font-size: var(--text-lg); color: var(--neutral-600); margin-bottom: var(--space-6); }