/* ==========================================================================
   VELAR — Main CSS Manifest
   Import order matters: tokens → reset → typography → layouts → components → pages
   ========================================================================== */

/* Base Layer */
@import url('./base/variables.css?v=4.2');
@import url('./base/reset.css?v=4.2');
@import url('./base/typography.css?v=4.2');

/* Layout Layer */
@import url('./layouts/grid.css?v=4.2');
@import url('./layouts/sections.css?v=4.2');

/* Component Layer */
@import url('./components/header.css?v=4.2');
@import url('./components/footer.css?v=4.2');
@import url('./components/buttons.css?v=4.2');
@import url('./components/cards.css?v=4.2');
@import url('./components/forms.css?v=4.2');

/* Page Layer */
@import url('./pages/homepage.css?v=4.2');
@import url('./pages/shop.css?v=4.2');
@import url('./pages/single-product.css?v=4.3');
@import url('./pages/cart.css?v=4.2');
@import url('./pages/checkout.css?v=4.3');
@import url('./pages/about.css?v=4.2');
@import url('./pages/privacy.css?v=4.3');
@import url('./pages/contact.css?v=4.3');
@import url('./pages/popup-checkout.css?v=3.0');

/* ==========================================================================
   MOBILE FOOTER OVERRIDES (inline to bypass @import cache)
   ========================================================================== */
@media (max-width: 767px) {
    .velar-footer__main {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--velar-space-6, 1.5rem) !important;
    }
    .velar-footer__brand {
        grid-column: 1 / -1;
        text-align: center;
        max-width: none;
    }
    .velar-footer__brand-logo {
        height: 60px;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    .velar-footer__social {
        justify-content: center;
    }
    .velar-footer__col-info,
    .velar-footer__col-more {
        text-align: center;
    }
    .velar-footer__col-info .velar-footer__links a,
    .velar-footer__col-more .velar-footer__links a {
        justify-content: center;
    }
    .velar-footer__col-support {
        grid-column: 1 / -1;
        text-align: center;
    }
    .velar-footer__col-support .velar-footer__links a {
        justify-content: center;
    }
    .velar-footer__newsletter {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .velar-footer__newsletter-form {
        flex-direction: column;
    }
    .velar-footer__newsletter-btn {
        width: 100%;
    }
    .velar-footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}