/* ==========================================================================
   ADN NATURAL - RESPONSIVE STYLES
   ========================================================================== */

/* 1. TABLET LAYOUT (<= 992px)
   ========================================================================== */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
        --spacing-lg: 3rem;
        --spacing-xl: 5rem;
    }

    /* Navbar Navigation */
    .nav-menu {
        display: none; /* Hide standard menu */
    }

    /* Mobile Menu Drawer */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .mobile-menu-open .mobile-menu-drawer {
        transform: translateY(0);
    }

    .mobile-menu-open {
        overflow: hidden; /* Prevent body scroll */
    }

    .mobile-menu-drawer .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .mobile-menu-drawer .nav-link {
        font-size: 1.5rem;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(61, 26, 92, 0.4);
        backdrop-filter: blur(5px);
        z-index: 998;
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .mobile-menu-open .mobile-menu-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .hamburger {
        display: flex;
        z-index: 1000;
    }

    .mobile-menu-open .hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-open .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-open .hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Hero Section */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-md);
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* 2. MOBILE LAYOUT (<= 576px)
   ========================================================================== */
@media (max-width: 576px) {
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 2.5rem;
    }

    /* Hero Section */
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-ctas {
        flex-direction: column;
        gap: 0.8rem;
    }

    .hero-ctas .btn {
        width: 100%;
    }

    .hero-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

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

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-about p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-socials {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-form .btn {
        width: 100%;
    }

    /* Cart Sidebar Width */
    .cart-drawer {
        max-width: 100%;
    }
}