/* --- TABLETS & SMALL DESKTOPS --- */
@media screen and (max-width: 1024px) {
    .header { padding: 20px 30px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .hero-content h1 { font-size: 56px; }
    .footer-links { gap: 40px; }
}

/* --- MOBILE DEVICES --- */
@media screen and (max-width: 768px) {
    /* Header Layout */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .hamburger {
        display: flex;
        flex: 1; 
        order: 1;
    }

    .logo {
        flex: 2;
        display: flex;
        justify-content: center;
        order: 2;
    }

    .logo img { height: 45px; }

    .nav-icons {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        order: 3;
    }

    /* Navigation Menu */
    .nav-menu {
        display: none;
        position: absolute;
        top: 83px; 
        left: 0;
        width: 100%;
        background-color: #f5bf2a;
        flex-direction: column;
        padding: 20px 0;
        border-bottom: 3px solid #222;
        z-index: 1000;
        order: 4;
    }

    #menu-toggle:checked ~ .nav-menu {
        display: flex;
    }

    .nav-menu a { margin: 15px 0; font-size: 20px; }

    /* Hero Section */
    .hero-content h1 { font-size: 36px; }
    .cta-btn { padding: 12px 24px; }

    /* Featured Section */
    .featured { padding: 50px 20px; }
    .card-grid { grid-template-columns: 1fr; max-width: 350px; } 
    
    /* Find Us Section */
    .find-us h2 { font-size: 32px; }
    .location-details p { font-size: 18px; }
    .map-wrapper iframe { height: 300px; }

    /* Footer Section */
    .footer { padding: 30px 20px; }
    .footer-container { flex-direction: column; align-items: center; text-align: center; }
    .footer-links { margin: 30px 0; flex-direction: column; gap: 20px; }
    .footer-social { align-items: center; text-align: center; }
}

/* --- PHONES --- */
@media screen and (max-width: 360px) {
    .hero-content h1 { font-size: 28px; }
    .nav-icons { gap: 10px; }
    .cart-icon, .profile { width: 30px; height: 30px; }
    .footer-logo img { height: 45px; }
}