/* ==========================================
   MESACK STORE - RESPONSIVE PREMIUM HEADER (MOBILE)
   ========================================== */

@media screen and (max-width: 768px) {
    
    /* Fè tout paj la ak header a rete nan limit ekran telefòn nan san depase */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Fè header a plis kontra sou telefòn */
    .navbar {
        padding: 15px 10px !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Diminye gwosè logo la pou l pa pran twòp plas */
    .logo {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }

    /* Mete lyen yo sou de liy si sa nesesè, oswa diminye font la */
    .nav-links {
        gap: 10px !important;
        font-size: 10px !important; /* Pi piti pou tout antre */
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .nav-links a {
        padding: 5px !important;
    }
}