/* css/mobile-optimizations.css */

@media (max-width: 768px) {
    .checkout-container {
        padding: 24px 16px;
    }

    /* Stack columns on mobile */
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .order-summary {
        padding-right: 0;
    }

    .h1-serif {
        font-size: 36px;
    }

    .checkout-form {
        padding: 24px 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 16px;
    }

    .trust-icons {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .trust-footer-icons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Sticky CTA for mobile if needed */
    .mobile-sticky-cta-wrapper {
        position: sticky;
        bottom: 0;
        z-index: 100;
        padding: 16px;
        background: linear-gradient(to top, rgba(245, 240, 232, 1) 80%, rgba(245, 240, 232, 0) 100%);
        margin: 0 -16px -24px -16px;
        /* Negate container padding */
    }

    .mobile-sticky-cta-wrapper .cta-button {
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }
}