/* --- MOBILE RESPONSIVENESS --- */
/* These rules ONLY apply when the screen is 768px wide or smaller (tablets and phones) */
@media (max-width: 768px) {
    
    /* Header & Navigation */
    .hamburger-menu {
        display: block; /* Reveals the hamburger icon */
    }

    .desktop-nav {
        /* Transforms the normal menu into a slide-out drawer */
        position: fixed;
        top: 0;
        left: -100%; /* Hides it completely off the left side of the screen */
        width: 250px;
        height: 100vh;
        background-color: #ffffff;
        padding: 80px 30px;
        transition: left 0.4s ease; /* Smooth sliding animation */
        box-shadow: 2px 0 15px rgba(0,0,0,0.1);
    }

    .desktop-nav.active {
        left: 0; /* JavaScript will add this class to slide the menu into view */
    }

    .desktop-nav ul {
        flex-direction: column; /* Stacks the links vertically */
        gap: 25px;
    }

    .desktop-nav a {
        font-size: 16px;
        font-weight: 500;
    }

    /* Hero Banner */
    .hero-content h2 {
        font-size: 40px; /* Shrinks the massive text for small screens */
    }

    /* Categories */
    .categories {
        flex-wrap: wrap; /* Allows categories to drop to the next line if cramped */
        gap: 30px;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column; /* Stacks the input and button vertically */
    }

    .newsletter-form input {
        border-radius: 50px;
        margin-bottom: 10px;
    }

    /* Footer */
    .footer-grid {
        text-align: center; /* Centers all footer text on mobile */
    }
}

/* Product Details Page */
    .product-detail-container {
        grid-template-columns: 1fr; /* Stacks image on top, text on bottom */
        padding: 30px 5%;
        gap: 30px;
    }

    /* Checkout Page */
    .checkout-page-container {
        grid-template-columns: 1fr; /* Stacks form on top of summary */
        gap: 40px;
    }
    
    .input-row {
        flex-direction: column; /* Stacks First Name and Last Name */
        gap: 0;
    }
    
    .checkout-header {
        justify-content: flex-start;
    }
    
    .return-link {
        display: none; /* Hides return link to save space on mobile */
    }

    /* Search Popup */
    .search-input {
        font-size: 24px;
    }

    /* Info Pages */
    .about-content {
        grid-template-columns: 1fr;
    }