/* Responsive Styles for LUNAYA E-commerce (Mobile-First) */

/* Small devices (phones, 600px and down) */
@media (max-width: 600px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.8em; }
    h4 { font-size: 1.5em; }

    .container {
        padding: 0 15px;
    }

    /* Header */
    .navbar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .logo {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .nav-links {
        display: none; /* Hidden by default, will be toggled by JS for mobile menu */
        width: 100%;
        flex-direction: column;
        text-align: center;
        margin-top: 15px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .nav-icons {
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }

    .nav-icons .icon {
        margin: 0 10px;
    }

    .menu-toggle {
        display: block; /* Show hamburger menu */
        position: absolute;
        right: 15px;
        top: 20px;
        font-size: 1.5em;
        cursor: pointer;
    }

    /* Hero Section */
    .hero-section {
        height: 60vh;
    }

    .hero-content h1 {
        font-size: 2.2em;
    }

    .hero-content p {
        font-size: 0.9em;
    }

    /* Category Mosaic */
    .category-mosaic {
        grid-template-columns: 1fr;
    }

    /* Product Grid */
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        margin-bottom: 30px;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-section {
        margin-bottom: 30px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input[type="email"] {
        border-radius: 3px;
        margin-bottom: 10px;
    }

    .newsletter-form button {
        border-radius: 3px;
    }

    /* Product Page */
    .product-details-container {
        flex-direction: column;
    }

    .product-images, .product-info {
        width: 100%;
        padding: 0;
    }

    .product-thumbnails {
        flex-wrap: wrap;
        justify-content: center;
    }

    .thumbnail-item {
        width: 80px;
        height: 80px;
        margin: 5px;
    }

    /* Cart Page */
    .cart-items {
        flex-direction: column;
    }

    .cart-item {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .cart-item-details {
        margin-left: 0;
        margin-top: 10px;
    }

    .cart-summary {
        width: 100%;
        margin-top: 30px;
    }

    /* Checkout Page */
    .checkout-steps {
        flex-direction: column;
    }

    .checkout-step {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Medium devices (tablets, 601px to 992px) */
@media (min-width: 601px) and (max-width: 992px) {
    h1 { font-size: 3em; }
    h2 { font-size: 2.5em; }

    .nav-links li {
        margin-left: 20px;
    }

    .nav-icons .icon {
        margin-left: 15px;
    }

    .category-mosaic {
        grid-template-columns: 1fr 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-content {
        justify-content: space-around;
    }

    /* Product Page */
    .product-details-container {
        flex-direction: column;
    }

    .product-images, .product-info {
        width: 100%;
        padding: 0;
    }
}

/* Large devices (desktops, 993px and up) */
@media (min-width: 993px) {
    .menu-toggle {
        display: none; /* Hide hamburger menu on desktop */
    }

    .nav-links {
        display: flex !important; /* Ensure nav links are visible on desktop */
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    }

    .product-details-container {
        display: flex;
        gap: 40px;
    }

    .product-images {
        flex: 1;
        padding-right: 20px;
    }

    .product-info {
        flex: 1;
        padding-left: 20px;
    }
}