/* --- MOBILE RESPONSIVENESS (Enqueued separately) --- */

/* Toggle Button (Hidden on Desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--color-black);
    cursor: pointer;
}

@media (max-width: 900px) {

    /* Header Layout */
    .site-header .container {
        flex-wrap: wrap;
        /* Allow search to wrap */
        gap: 1rem;
    }

    .site-branding {
        flex-grow: 1;
    }

    .menu-toggle {
        display: block;
        /* Show hamburger */
        order: -1;
        /* Left side */
        margin-right: 1rem;
    }

    .site-tools {
        margin-left: auto;
        /* Push to right */
    }

    /* Mobile Navigation */
    .main-navigation {
        width: 100%;
        order: 10;
        /* Force to bottom of header */
        display: none;
        /* Hide by default */
        background: #fff;
        border-top: 1px solid var(--color-border);
        margin: 0;
    }

    .main-navigation.toggled {
        display: block;
        /* Show when open */
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation ul li {
        width: 100%;
        border-bottom: 1px solid var(--color-bg);
    }

    .main-navigation ul li a {
        padding: 15px;
        white-space: normal;
        /* Allow wrapping in vertical menu */
    }

    /* Dropdowns in Mobile - Always Show or Indent */
    .main-navigation ul ul {
        position: static;
        /* Flow naturally */
        box-shadow: none;
        display: none;
        background: var(--color-bg-secondary);
        padding-left: 20px;
    }

    .main-navigation ul li:hover>ul,
    .main-navigation ul li.focus>ul {
        display: block;
    }

    /* Grids Stack */
    .category-grid,
    .product-grid,
    .related.products ul.products {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        /* Smaller cards on mobile */
        gap: 1rem;
    }

    /* Hero Text */
    .hero-section h1 {
        font-size: 1.8rem !important;
    }

    /* Sidebar stacks on top or bottom */
    .site-content {
        grid-template-columns: 1fr !important;
    }

    .shop-sidebar {
        display: none;
        /* Hide sidebar so products are first */
    }

    /* Header Search Mobile */
    .header-search input[type="search"] {
        width: 160px;
        /* Smaller */
    }

    .header-search input[type="search"]:focus {
        width: 200px;
    }
}