/* 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.6em; }

    .container {
        padding: 0 15px;
    }

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

    .logo {
        font-size: 2em;
        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;
    }

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

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

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

    .hero {
        height: 60vh;
    }

    .hero h1 {
        font-size: 3em;
    }

    .hero p {
        font-size: 1.2em;
    }

    .product-grid {
        grid-template-columns: 1fr; /* Single column for products on small screens */
    }

    .category-mosaic {
        grid-template-columns: 1fr; /* Single column for categories */
    }

    .testimonial-slider {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .testimonial-card {
        flex: 0 0 90%; /* Adjust width for better mobile scrolling */
        margin: 0 10px;
    }

    .instagram-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for Instagram on small screens */
    }

    .newsletter-content {
        padding: 30px;
        max-width: 90%;
    }

    .newsletter-content input[type="email"] {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .newsletter-content button {
        width: 100%;
    }

    .product-detail-container {
        flex-direction: column;
    }

    .product-images, .product-info-detail {
        min-width: unset;
        width: 100%;
    }

    .shop-layout {
        flex-direction: column;
    }

    .sidebar {
        flex: unset;
        width: 100%;
    }

    .cart-items th, .cart-items td {
        padding: 10px;
        font-size: 0.9em;
    }

    .cart-item-img {
        width: 60px;
        height: 60px;
    }

    .cart-summary {
        max-width: 100%;
    }

    .checkout-steps {
        flex-direction: column;
        gap: 10px;
    }

    .checkout-step {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .payment-options {
        flex-direction: column;
    }

    .account-dashboard {
        flex-direction: column;
    }

    .account-sidebar {
        flex: unset;
        width: 100%;
    }

    .about-content, .contact-layout {
        flex-direction: column;
    }

    .contact-form-section, .contact-info-section {
        min-width: unset;
        width: 100%;
    }

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

    .cookie-consent-banner {
        flex-direction: column;
        padding: 15px 20px;
        max-width: 90%;
    }

    .cookie-consent-banner .cookie-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-banner .btn {
        width: 100%;
    }
}

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

    .container {
        padding: 0 20px;
    }

    .navbar {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .logo {
        margin-bottom: 15px;
    }

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

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

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

    .hero {
        height: 70vh;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for products on tablets */
    }

    .category-mosaic {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for categories */
    }

    .instagram-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for Instagram */
    }

    .testimonial-card {
        flex: 0 0 45%; /* Adjust width for better tablet scrolling */
    }

    .product-detail-container {
        flex-direction: column;
    }

    .product-images, .product-info-detail {
        min-width: unset;
        width: 100%;
    }

    .shop-layout {
        flex-direction: column;
    }

    .sidebar {
        flex: unset;
        width: 100%;
    }

    .account-dashboard {
        flex-direction: column;
    }

    .account-sidebar {
        flex: unset;
        width: 100%;
    }

    .about-content, .contact-layout {
        flex-direction: column;
    }

    .contact-form-section, .contact-info-section {
        min-width: unset;
        width: 100%;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 993px and up) */
@media (min-width: 993px) {
    .container {
        padding: 0 20px;
    }

    .navbar {
        flex-wrap: nowrap;
    }

    .logo {
        margin-bottom: 0;
    }

    .nav-links {
        display: flex !important; /* Ensure nav links are always visible on desktop */
        width: auto;
        flex-direction: row;
        text-align: left;
        margin-top: 0;
    }

    .nav-links li {
        margin-left: 30px;
        margin-right: 0;
    }

    .nav-icons {
        width: auto;
        margin-top: 0;
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for products on large screens */
    }

    .category-mosaic {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for categories */
    }

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

    .testimonial-card {
        flex: 0 0 30%; /* 3 columns for testimonials */
    }

    .product-detail-container {
        flex-direction: row;
    }

    .shop-layout {
        flex-direction: row;
    }

    .account-dashboard {
        flex-direction: row;
    }

    .about-content, .contact-layout {
        flex-direction: row;
    }
}