/* AKGadgets — page-specific layouts (Cart, Checkout). Builds on tokens.css/components.css. */

/* ---------- Cart ---------- */
.cart-layout { max-width: 960px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.cart-title { font-size: 1.4rem; font-weight: 800; margin: 0; }

.cart-item { display: flex; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-item:last-child { border-bottom: none; }
.cart-item-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-surface-alt); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-item-name { font-weight: 700; margin: 0; }
.cart-item-variant { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.cart-item-warning { align-self: flex-start; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--color-danger); border-radius: var(--radius-pill); padding: 2px 8px; margin-top: 2px; }
.cart-item-qty-form { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.cart-item-qty-form label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; }
.cart-item-qty-form input { width: 56px; padding: var(--space-1) var(--space-2); min-height: 36px; text-align: center; }
.cart-item-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-2); flex-shrink: 0; }
.cart-item-price { font-weight: 800; margin: 0; white-space: nowrap; }

.cart-summary { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.cart-summary-title { font-size: 1.05rem; margin: 0; }
.cart-summary-row { display: flex; justify-content: space-between; }
.cart-summary-row span:last-child { font-weight: 700; }
.cart-summary-note { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 var(--space-2); }

/* ---------- Checkout ---------- */
.checkout-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.checkout-secure-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: 0.85rem; color: var(--color-success); }
.checkout-main { max-width: 720px; margin: 0 auto; padding: var(--space-4); padding-bottom: var(--space-7); }
.checkout-section { padding: var(--space-4); margin-bottom: var(--space-4); }
.checkout-section h2 { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.checkout-summary-line { display: flex; justify-content: space-between; font-size: 0.9rem; padding: var(--space-1) 0; gap: var(--space-3); }
.checkout-summary-line span:first-child { color: var(--color-text-muted); }
.checkout-summary-total {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 1.15rem;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}
.checkout-disclaimer { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

/* No bottom nav on the checkout shell, so no need to reserve the space _Layout's body rule does. */
.checkout-body { padding-bottom: 0; }

/* ---------- Policy pages (Cookie/Privacy/Terms) ---------- */
.policy-page { max-width: 760px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-7); }
.policy-updated { color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.policy-section { padding: var(--space-4); margin-bottom: var(--space-4); }
.policy-section h2 { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.policy-section p { margin: 0 0 var(--space-3); line-height: 1.6; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); line-height: 1.6; }
.policy-section ul:last-child { margin-bottom: 0; }
.policy-section a { color: var(--color-accent-dark); }
.policy-placeholder {
    background: var(--color-surface-alt);
    border-left: 3px solid var(--color-sale);
    padding: var(--space-3);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ---------- Order confirmation ---------- */
.confirmation-header { text-align: center; padding: var(--space-6) var(--space-4) var(--space-4); }
.confirmation-icon { width: 56px; height: 56px; color: var(--color-success); margin-bottom: var(--space-3); }
.confirmation-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 var(--space-2); }
.confirmation-text { color: var(--color-text-muted); margin: 0; }